Editar o eliminar un Botón de compras o carrito incrustado
Los Botones de compra y los carritos se generan a partir del código de incrustación que agregas al código fuente HTML de tu página web. Si deseas cambiar la apariencia o el comportamiento de un botón o carrito en una página web, debes cambiar el código de incrustación correspondiente.
En esta página
Eliminar un Botón de compras, una colección incrustada o un carrito incrustado
Para eliminar un Botón de compras, una colección o carrito incrustado:
Abre el código fuente HTML de la página web que contiene el Botón de compras, la colección incrustada o el carrito incrustado.
Elimina todo el código de incrustación del código fuente HTML. El código de incrustación se verá como el siguiente código para el Botón de compra:
- Guarda tus cambios.
Editar un Botón de compras
Para cambiar el aspecto o la configuración de un Botón de compras, debes editar el contenido de su etiqueta div
principal en el código de incrustación que aparece en el código fuente HTML:
Cada función del Botón de compras integrado está controlada por un atributo aparte en la etiqueta div
principal. Puedes agregar, eliminar o actualizar estos atributos directamente en el código fuente HTML.
Por ejemplo, si deseas que un Botón de compras existente dirija al usuario a la página del producto en lugar de a la página de pago:
Abre el HTML de la página que contiene el Botón de compras que deseas cambiar.
Encuentra el atributo
data-redirect_to
dentro de la etiquetadiv
principal del código de incrustación del Botón de compra:Cambia el valor del atributo a
producto
:Guarda tus cambios.
La etiqueta div
principal de un Botón de compras tiene varios atributos que puedes editar:
Atributo | Valor | Predeterminado |
---|---|---|
data-shop |
El dominio myshopify (como storename.myshopify.com ) conectado al botón. |
Tu dominio de Shopify |
data-product_handle |
El identificador del producto destacado, que se basa en el título del producto. Cada uno de tus productos tiene un identificador único en Shopify. | El identificador del producto destacado |
data-embed_type |
Distingue entre código de incrustación para Botones de compra, colecciones incrustadas y carritos incrustados. Los valores posibles son producto , carrito y colección . |
Producto |
data-display_size |
El ancho máximo de la inserción completa (no del botón). Puede ser compacto (230 px) o regular (450 px). Se aplica solo a un Botón de compras para un solo producto. |
compacto |
data-has_image |
Ya sea la incrustación completa de un producto (true ) o solo un botón de compras (false ). |
verdadero |
data-redirect_to |
Adonde se vincula el botón de compras. Puede ser checkout , product o cart . Si quieres que el botón de compras se conecte con un carrito incrustado en la misma página, data-redirect_to debe ser cart . |
pantalla de pago |
data-product_modal |
Activa el modal de un producto para mostrar cuando se hace clic en un producto. Si el valor de data-redirect_to es modal , este atributo debe ser verdadero ; de lo contrario, debería ser falso . |
falso |
data-buy_button_text |
El texto que se muestra en el Botón de compras. | Comprar ahora |
data-button_background_color |
El código hexadecimal del color del Botón de compras, sin el # . Pueden ser tres o seis caracteres hexadecimales. |
7db461 |
data-button_text_color |
El código hexadecimal del color del texto del Botón de compras, sin el # . Pueden ser tres o seis caracteres hexadecimales. |
ffffff |
data-background_color |
El color de fondo del área alrededor del Botón de compras. Puede ser un código hexadecimal (según las reglas anteriores) o transparente . Si es transparente , no se aplican espacios adicionales al contenido de la inserción. |
transparente |
data-show_product_price |
Modifica manualmente si se muestra o no el precio del producto. Puede ser verdadero o falso . |
El valor actual de data-has_image
|
data-show_product_title |
Modifica manualmente si se muestra o no el título del producto. Puede ser verdadero o falso . |
El valor actual de data-has_image
|
data-buy_button_out_of_stock_text |
El texto que aparece cuando un producto está agotado. | Agotado |
data-buy_button_product_unavailable_text |
El texto que aparece cuando un producto no está disponible. | No disponible |
data-product_title_color |
El código hexadecimal del color del texto del título del producto, sin el # . Pueden ser tres o seis caracteres hexadecimales.
|
000000 |
Editar el carrito de tu sitio web
Si deseas cambiar el aspecto o el comportamiento del carrito de tu sitio web, debes agregar un fragmento de código HTML y luego editar sus atributos. Cada atributo controla una parte diferente del aspecto o de las funciones del carrito.
Para editar el carrito de tu sitio web:
Abre el HTML de la página que contiene el carrito que deseas editar.
Pega el siguiente código:
Reemplaza
your-shop-name.myshopify.com
con la dirección de tu tiendamyshopify.com
.Agrega los atributos relevantes a la etiqueta
div
principal del carrito y cámbiala para que incluya el valor que desees. Por ejemplo, si deseas cambiar el texto que aparece en la parte superior del carrito, debes agregardata-cart_title="your text"
a la etiquetadiv
principal en el fragmento de código. El resultado sería algo así:
- Cuando termines, guarda tus cambios.
Atributos del carrito
Hay muchos atributos que puedes usar para personalizar el carrito de tu sitio web:
Atributo | Valor | Predeterminado |
---|---|---|
data-shop |
El dominio myshopify correspondiente (p. ej., storename.myshopify.com ). |
Tu dominio de Shopify |
data-embed_type |
Distingue entre código de incrustación para Botones de compra, colecciones incrustadas y carritos incrustados. Los valores posibles son producto , carrito y colección . |
carrito |
data-checkout_button_text |
El texto que se muestra en el botón que lleva a la pantalla de pago desde el carrito (no el botón del carrito). | Pantalla de pago |
data-button_text_color |
El código hexadecimal del color del texto del botón del carrito, sin el # . Pueden ser tres o seis caracteres hexadecimales. |
ffffff |
data-button_background_color |
El código hexadecimal del color del botón del carrito, sin el # . Pueden ser tres o seis caracteres hexadecimales. |
7db461 |
data-background_color |
El color de fondo del área alrededor del carrito incrustado. Puede ser un código hexadecimal (según las reglas anteriores) o transparente . Si es transparente , no se aplican espacios adicionales al contenido de la inserción. |
transparente |
data-text_color |
El código hexadecimal del color del texto del botón del carrito, sin el # . Pueden ser tres o seis caracteres hexadecimales. |
000000 |
data-accent_color |
El código hexadecimal del color del borde que aparece alrededor del carrito, sin el # . Pueden ser tres o seis caracteres hexadecimales. |
000000 |
data-cart_title |
El texto que aparece en la parte superior del carrito incrustado cuando se abre en una página. | Tu carrito |
data-cart_total_text |
El texto que aparece junto al monto total en el carrito incrustado. | Total |
data-discount_notice_text |
La notificación sobre el descuento que aparece en el carrito incrustado. | Los códigos de envío y de descuento se agregan en la pantalla de pago. |
data-sticky |
Indica si el botón aparece donde se colocó en el marcado o si se pega al borde de la página. Los carritos incrustados más recientes tienen estos parámetros establecidos como verdadero al momento de generar el código de incrustación. |
falso |
data-empty_cart_text |
El texto que aparece si el carrito está vacío. | Tu carrito esta vacío |
data-next_page_button_text |
El texto que aparece en el botón Página siguiente dentro de una colección incrustada. | Página siguiente |
Edita una colección incrustada
El código de incrustación de una colección incrustada incluye dos elementos div
. El primer div
contiene el código para un carrito incrustado, y el segundo div
contiene el código para los Botones de compra incrustados, que toman la forma de un botón de ventana modal para cada producto en la colección.
El segundo elemento div
también contiene los siguientes atributos:
Atributo | Valor | Predeterminado |
---|---|---|
data-collection_handle |
El identificador de la colección destacada, que se basa en el título de la colección. Cada una de tus colecciones tiene un identificador único en Shopify. | El identificador de la colección destacada |
data-embed_type |
Distingue entre código de incrustación para Botones de compra, colecciones incrustadas y carritos incrustados. Los valores posibles son producto , carrito y colección . |
Colección |