Editar o eliminar un Botón de compras o carrito incrustado

Precaución

Este es un tutorial avanzado y Shopify no presta el soporte. Es necesario conocer lenguajes de diseño web, como HTML, CSS, JavaScript y Liquid. Si necesitas ayuda, puedes contratar a un Shopify Partner.

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.

Consejo

El código de incrustación en el código fuente HTML anula la configuración que eliges al crear un botón o carrito en el panel de control de Shopify. Si introduces un valor no válido en el código de incrustación por error, se reemplaza automáticamente por el valor predeterminado.

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:

1. 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.

2. 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:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">Compra tu producto</a></noscript>

1. 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:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

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:

1. Abre el HTML de la página que contiene el Botón de compras que deseas cambiar.

2. Encuentra el atributo data-redirect_to dentro de la etiqueta div principal del código de incrustación del Botón de compra:

   data-redirect_to = "checkout"

3. Cambia el valor del atributo a producto:

   data-redirect_to = "product"

4. Guarda tus cambios.

La etiqueta div principal de un Botón de compras tiene varios atributos que puedes editar:

Atributos de etiqueta de botón de compras editables

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:

1. Abre el HTML de la página que contiene el carrito que deseas editar.

2. Pega el siguiente código:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

1. Reemplaza your-shop-name.myshopify.com con la dirección de tu tienda myshopify.com.

2. 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 agregar data-cart_title="your text" a la etiqueta div principal en el fragmento de código. El resultado sería algo así:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">

1. Cuando termines, guarda tus cambios.

Atributos del carrito

Nota

Asegúrate de que los atributos del carrito que agregas o modificas están incluidos en la misma etiqueta <div> que contiene el atributo data-embed_type="cart", y no en la etiqueta <div> que contiene el atributo data-embed_type="product".

Hay muchos atributos que puedes usar para personalizar el carrito de tu sitio web:

Atributos de personalización del carrito

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.

Nota

El código para el carrito incrustado y los Botones de compra puede editarse como se describió anteriormente, pero el atributo data-redirect_to debe establecerse en modal, y data-product_modal debe ser true.

El segundo elemento div también contiene los siguientes atributos:

Definición de atributos en código de botón de compras

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