Ayuda
Iniciar sesión

Personalizar o eliminar un botón de compras, una colección incrustada o un carrito incrustado

Puedes cambiar la apariencia o el comportamiento de un botón de compras, una colección incrustada o un carrito incrustado; para ello, edita el código de incrustación en el HTML fuente de la página web. También puedes borrar un elemento incrustado si eliminas el código de la página web.

Un botón de compras muestra un producto con un botón de compra. Una colección incrustada muestra varios productos. Un carrito incrustado muestra un carrito independiente que los clientes pueden usar en todas las páginas.

El código de incrustación es el fragmento de código que copiaste del panel de control de Shopify y pegaste en el HTML de la página web cuando creaste el botón de compras o el carrito. El código de incrustación está escrito en JavaScript, el lenguaje de programación usado para agregar funciones interactivas a las páginas web.

En esta página

Entender el código de incrustación del botón de compras

Cada botón de compras se crea a partir de partes separadas llamadas componentes. Un componente es una sección con nombre del código de incrustación que controla una parte de la experiencia del botón de compras. Por ejemplo, cuando agregas un producto con un carrito a la página web, el código de incrustación genera los siguientes componentes:

  • un componente product, que muestra la información del producto y el botón de compra
  • un componente cart, que muestra el contenido del carrito
  • un componente de carrito toggle, que muestra el ícono que abre el carrito

Si el componente del producto abre una ventana emergente de información del producto, el código de incrustación genera dos componentes adicionales: un componente modal para la ventana emergente y un componente modalProduct para la información del producto dentro de esta.

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'
          }
        }
      }
    }
  });
});

Cada componente se configura mediante un objeto de configuración en el código de incrustación. Un objeto es un grupo de configuración estructurado que tiene formato de lista de pares clave-valor:

  • Una clave es el nombre de una configuración, como buttonDestination.
  • Un valor es la opción asignada a esa configuración, como 'cart'.

Un objeto es similar a una hoja de cálculo: cada clave corresponde al nombre de una columna y cada valor corresponde al contenido de una celda. Para cambiar la apariencia o el comportamiento de los botones de compras, edita las claves y los valores dentro de los objetos de configuración.

Cada componente tiene muchas claves editables. Para ver una lista completa, consulta la documentación para desarrolladores. Para configurar una clave que aún no está en el código de incrustación, agrégala al objeto que corresponda. Como ejemplo, consulta la sección Cambiar el diseño de un producto incrustado.

Personalizar los estilos de los componentes

Cada componente tiene un objeto de configuración styles anidado que controla la apariencia del componente. Un objeto anidado es un objeto colocado dentro de otro objeto.

El objeto styles usa CSS, el lenguaje empleado para describir cómo se diseñan visualmente los elementos de las páginas web. Cada clave de nivel superior en el objeto styles representa un elemento en el componente, como el título o el botón. Dentro de esa clave, cada clave anidada es una propiedad de CSS (por ejemplo, background-color o border), y el valor corresponde a un valor de CSS.

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

Se puede agregar cualquier propiedad de CSS válida a styles. Asegúrate de que los nombres de las propiedades con guiones estén entre comillas.

Para obtener más información sobre la personalización con CSS, view the developer documentation.

Componentes de una colección incrustada

Las colecciones incrustadas usan los mismos objetos de configuración que los botones de compras. Para editar el diseño u otras propiedades de los productos dentro de la colección, busca el objeto de configuración product y edítalo de la misma manera que editarías un producto incrustado. Para editar las propiedades de la colección en sí, como el texto del botón Página siguiente, debes editar el objeto de configuración productSet.

Algunas claves, como el texto de un componente, se configuran a través de objetos anidados. Por ejemplo, el texto del botón Página siguiente está dentro del objeto text del componente productSet:

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

Un modal de información del producto es una ventana emergente que muestra información sobre el producto. Para enviar al cliente al modal de información del producto en lugar de al carrito, edita el código de incrustación del botón de compras en el HTML fuente de la página web.

Pasos:

  1. Abre el HTML de la página que contiene la incrustación de producto que quieres cambiar.
  2. Busca el objeto de configuración product.
  3. Busca la clave buttonDestination en el objeto:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Cambia el valor de esa clave a 'modal', incluidas las comillas:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Guarda los cambios.

Cambiar el diseño de un producto incrustado

Un diseño horizontal de un producto incrustado coloca la imagen junto a la información del producto en lugar de arriba. Para cambiar a este diseño, edita el código de incrustación del botón de compras en el HTML fuente de la página web.

Pasos:

  1. Abre el HTML de la página que contiene la incrustación de producto que quieres cambiar.
  2. Busca el objeto de configuración product.
  3. Agrega una clave layout y luego establece el valor en 'horizontal'. Asegúrate de que el valor incluya las comillas y de que la línea anterior termine con una coma:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Guarda los cambios.

Cambiar la apariencia y el comportamiento de un carrito incrustado

Para cambiar la apariencia o el comportamiento de un carrito, edita el objeto de configuración cart en el código de incrustación.

Pasos:

  1. Abre el HTML de la página que contiene el carrito que quieres editar.
  2. Busca el objeto de configuración cart en el código de incrustación:
options: {
      cart: {
        startOpen: false
      }
}
  1. Edita una clave existente o agrega una nueva para cambiar la apariencia o el comportamiento del carrito. Para ver una lista completa de las claves configurables, consulta la documentación para desarrolladores.
  2. Guarda los cambios.

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

Para eliminar un botón de compras, una colección incrustada o un carrito incrustado de la página web, elimina el código de incrustación del HTML fuente.

Pasos:

  1. Abre el HTML fuente 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 HTML fuente, desde <script data-shopify-buy-ui> hasta </script>. El siguiente es un ejemplo del código de incrustación de un botón de compras:
<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 los cambios.