Help
Log in

Customizing or removing a Buy Button, embedded collection, or embedded cart

You can change the appearance or behavior of a Buy Button, embedded collection, or embedded cart by editing its embed code in your webpage's source HTML. You can also delete an embed by removing the code from your webpage.

A Buy Button displays a product with a purchase button. An embedded collection displays multiple products. An embedded cart displays a standalone cart that customers can use across pages.

Embed code is the code snippet that you copied from your Shopify admin and pasted into your webpage's HTML when you created the Buy Button or cart. Embed code is written in JavaScript, the programming language used to add interactive features to webpages.

On this page

Understanding the Buy Button embed code

Each Buy Button is built out of separate parts called components. A component is a named section of the embed code that controls one part of the Buy Button experience. For example, when you add a product with a cart to your webpage, the embed code generates the following components:

  • a product component, which displays the product information and the purchase button
  • a cart component, which displays the cart contents
  • a cart toggle component, which displays the icon that opens the cart

If your product component opens a product details pop-up window, then the embed code generates two additional components: a modal component for the pop-up itself and a modalProduct component for the product information inside the pop-up.

In the following code snippet, there are separate components for the product and the 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'
          }
        }
      }
    }
  });
});

Each component is configured through a configuration object in the embed code. An object is a structured group of settings, formatted as a list of key-value pairs:

  • A key is the name of a setting, such as buttonDestination.
  • A value is what the setting is set to, such as 'cart'.

An object is similar to a spreadsheet: each key corresponds to a column name, and each value corresponds to the contents of a cell. To change the appearance or behavior of your Buy Buttons, edit the keys and values inside the configuration objects.

Each component has many editable keys. For a full list of editable keys, view the developer documentation. To configure a key that isn't already in your embed code, add the key to the appropriate object. For an example, refer to Change a product embed's layout.

Customize component styles

Each component has a nested styles configuration object that controls the component's appearance. A nested object is an object placed inside another object.

The styles object uses CSS, the language used to describe how webpage elements are visually styled. Each top-level key in the styles object represents an element in the component, such as the title or the button. Within that key, each nested key is a CSS property (for example, background-color or border), and the value is a CSS value.

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

Any valid CSS property can be added to styles. Make sure that property names with dashes are wrapped in quotation marks.

For more information about CSS customization, view the developer documentation.

Embedded collection components

Embedded collections use the same configuration objects as Buy Buttons. To edit the layout or other properties of products within the collection, find the product configuration object and edit it the same way that you would edit a product embed. To edit properties of the collection itself, such as the text of the Next page button, edit the productSet configuration object instead.

Some keys, such as the text of a component, are configured through nested objects. For example, the text for the Next page button is inside the productSet component's text object:

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

A product details modal is a pop-up window that displays product information. To direct your customer to a product details modal instead of the cart, edit your Buy Button embed code in your webpage's source HTML.

Steps:

  1. Open the HTML of the page containing the product embed that you want to change.
  2. Find the product configuration object.
  3. Find the buttonDestination key in the object:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Change the value of that key to 'modal', including the quotation marks:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Save your changes.

Change a product embed's layout

A horizontal product embed layout places the picture beside the product details instead of above them. To switch to this layout, edit your Buy Button embed code in your webpage's source HTML.

Steps:

  1. Open the HTML of the page containing the product embed that you want to change.
  2. Find the product configuration object.
  3. Add a layout key, and then set the value to 'horizontal'. Make sure the value includes the quotation marks and the previous line ends with a comma:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Save your changes.

Change a cart embed's appearance and behavior

To change the appearance or behavior of a cart, edit the cart configuration object in your embed code.

Steps:

  1. Open the HTML of the page containing the cart that you want to edit.
  2. Find the cart configuration object in your embed code:
options: {
      cart: {
        startOpen: false
      }
}
  1. Edit an existing key, or add a new one, to change the cart's appearance or behavior. For a full list of configurable keys, view the developer documentation.
  2. Save your changes.

Delete a Buy Button, embedded collection, or embedded cart

To remove a Buy Button, embedded collection, or embedded cart from your webpage, delete its embed code from the source HTML.

Steps:

  1. Open the source HTML of the webpage that contains the Buy Button, embedded collection, or embedded cart.
  2. Delete the entire embed code from the source HTML, beginning with <script data-shopify-buy-ui> and ending with </script>. The following is an example of Buy Button embed code:
<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. Save your changes.