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 comprar y los carritos se generan a partir de fragmentos de código que copias de tu panel de control de Shopify y pegas en el código fuente HTML de tu página web. Estos fragmentos de código se conocen como código de incrustación. Si deseas cambiar la apariencia o el comportamiento de un botón o carrito, debes editar el código de incrustación correspondiente.

Nota

Estas instrucciones se aplican al código de incrustación del Botón de compras que hayas generado después del 26 de septiembre de 2016. Si deseas cambiar el código de incrustación que generaste antes de esta fecha, debes seguir las instrucciones anteriores. También puedes volver a crear tu código de incrustación usando el canal de ventas del Botón de compras.

Si no estás seguro(a) qué versión de código de incrustación tienes, entonces verifica si comienza con <script data-shopify-buy-ui>. Si es así, entonces tienes la versión más reciente. Si comienza con <div data-emebd_type=... u otro tipo de etiqueta <div>, tienes la versión anterior.

Eliminar un Botón de compras, una colección incrustada o un carrito incrustado

Pasos:

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 incrustado de la fuente HTML, que comience con <script data-shopify-buy-ui> y termine con </script>. En el caso de un Botón de compras, el código de incrustación se parece al siguiente código:

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>

1. Guarda tus cambios.

El Botón de compras, la colección incrustada o el carrito incrustado ya no aparecerán en tu página web.

Editar un Botón de compras

Para cambiar el aspecto o la configuración de un Botón de compras, debes editar el código de incrustación que has agregado a tu código fuente HTML.

Cada Botón de compras está formado por componentes separados en el código de incrustación. Por ejemplo, si agregas un producto con un carrito a tu página web, el código de incrustación generará un componente de product, un componente de cart y un componente de toggle de carrito:

Si quieres que tu componente de producto abra un modal con detalles del producto, el código de incrustación generará un componente modal y un componente de modalProduct:

En el siguiente fragmento de código hay componentes separados para el product y el cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Estos componentes se configuran por separado a través de objetos de configuración en el código de incrustación. Puedes cambiar el aspecto o el comportamiento de tus Botones de compra editando los objetos de configuración en el código de incrustación.

Consejo

En JavaScript, un objeto es un conjunto de pares clave-valor, en formato {key: value}. Imagina que es como una hoja de cálculo: una clave es como un nombre de columna, y un valor es como el contenido de una celda.

Cada componente tiene varios atributos que puedes editar. Para ver una lista completa de opciones editables, consulta nuestra documentación para programadores. Si deseas configurar una opción que no aparece en tu código de incrustación, debes agregar la clave apropiada al objeto apropiado (ver el ejemplo).

Editar el estilo de un componente

Cada componente tiene un objeto de configuración de styles anidado, que puedes editar o agregar para cambiar el aspecto del componente. Estos estilos tienen un formato similar a CSS. Cada clave de nivel superior en el objeto de styles representa un elemento en el componente, como el título o el botón. Dentro de este objeto, cada clave es una propiedad CSS (por ejemplo, 'color de fondo' o 'borde'), y el valor es un valor CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Cualquier propiedad CSS válida se puede agregar a los styles. Ten en cuenta que los nombres de propiedades con guiones deben estar entre comillas.

Para leer más sobre personalización de CSS, consulta la documentación para programadores.

Ejemplo: reemplazar el enlace al carrito con el modal de detalles del producto

En este ejemplo, puedes cambiar tu código de incrustación actual para dirigir a tu cliente a un modal de detalles de producto en lugar del carrito:

1. Abre el HTML de la página que contiene el producto insertado que deseas cambiar.
2. Encuentra el objeto de configuración del product.
3. Encuentra la clave buttonDestination en el objeto:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

1. Cambia el valor de esa clave a 'modal' (asegúrate de incluir las comillas):

options: {
      product: {
        buttonDestination: 'modal'
      }
}

1. Guarda tus cambios.

Ejemplo: cambiar el diseño de tu producto insertado

En este ejemplo, puedes cambiar el diseño de tu producto insertado para que la imagen aparezca a un lado en lugar de en la parte superior:

1. Abre el HTML de la página que contiene el producto insertado que deseas cambiar.
2. Encuentra el objeto de configuración del product.
3. Agrega una clave de layout y luego define el valor como 'horizontal':

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

<aside class="note">
<h4>Nota</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>

1. Guarda tus cambios.

Editar el carrito del sitio web

Si deseas cambiar el aspecto o el comportamiento del carrito de tu sitio web, debes editar el objeto de configuración del cart en tu código de incrustación.

Pasos:

1. Abre el HTML de la página que contiene el carrito que deseas editar.
2. Encuentra el objeto con la configuración del cart en tu código de incrustación:

options: {
      cart: {
        startOpen: false
      }
}

1. Edita o agrega la propiedad que deseas cambiar. Para obtener una lista completa de las propiedades configurables, véase la documentación del desarrollador.
2. Guarda tus cambios.

Edita una colección incrustada

Editar una colección incrustada es similar a editar un producto o un carrito. Para editar las propiedades de los productos dentro de la colección (por ejemplo, el diseño de cada producto), necesitas encontrar el objeto con la configuración de product y editarlo de la misma manera que editas el código de incrustación de un producto. Para editar las propiedades de la colección como tal (por ejemplo, el texto del botón Página siguiente), edita más bien la clave productSet.

Algunas propiedades, como el texto de un componente, se configuran a través de objetos anidados, que son objetos que aparecen dentro de otros objetos. Por ejemplo, el texto para el botón Página siguiente aparece dentro del objeto de text del componente productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}