Editar o eliminar un Botón de compra o carrito insertado

Los Botones de comprar y los carritos se generan a partir de snippets 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 snippets de código se conocen como código de inserción. Si deseas cambiar la apariencia o el comportamiento de un botón o carrito, debes editar el código de inserción correspondiente.

Eliminar un Botón de compra, una colección insertada o un carrito insertado

Pasos:

  1. Abre el código fuente HTML de la página web que contiene el Botón de compra, la colección insertada o el carrito insertado.
  2. Elimina todo el código insertado de la fuente HTML, que comience con <script data-shopify-buy-ui> y termine con </script>. En el caso de un Botón de compra, el código de inserció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 compra, la colección insertada o el carrito insertado ya no aparecerán en tu página web.

Editar un Botón de compra

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

Cada Botón de compra está formado por componentes separados en el código de inserción. Por ejemplo, si agregas un producto con un carrito a tu página web, el código de inserció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 una ventana modal con detalles del producto, el código de inserció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 inserción. Puedes cambiar el aspecto o el comportamiento de tus Botones de compra editando los objetos de configuración en el código de inserción.

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 inserció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 inserció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'
      }
}

  1. Guarda tus cambios.

Editar el carrito de tu 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 inserció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 inserció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 inserció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'
    }
  }
}

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis