Editing or deleting a Buy Button or embedded cart

Buy Buttons and carts are generated from the code snippets that you copy from your Shopify admin and paste in your webpage's source HTML. These code snippets are referred to as embed code. If you want to change the appearance or behavior of a button or cart, then you need to edit the associated embed code.

Delete a Buy Button, embedded collection, or embedded cart

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>. For a Buy Button, the embed code looks like the following 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.

The Buy Button, embedded collection, or embedded cart will no longer appear on your webpage.

Edit a Buy Button

To change the appearance or settings of an existing Buy Button, you need to edit the embed code that you've added to your source HTML.

Each Buy Button is built out of separate components in the embed code. For example, if you add a product with a cart to your webpage, then the embed code will generate a product component, a cart component, and a cart toggle component:

If you want your product component to open a modal window with product details, then the embed code will generate a modal component and a modalProduct component:

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

These components are configured separately through configuration objects in the embed code. You can change the appearance or behavior of your Buy Buttons by editing the configuration objects in the embed code.

Each component has many attributes that you can edit. For a full list of editable options, view our developer documentation. If you want to configure an option that doesn't already appear in your embed code, then you need to add the appropriate key to the appropriate object (see the example).

Edit the style of a component

Each component has a nested styles configuration object, which you can edit or add to change the component's appearance. These styles are formatted similarly to CSS. Each top-level key in the styles object represents an element in the component, such as the title or the button. Within this object, each 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. Note that property names with dashes need to be within quotation marks.

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

In this example, you can change your current embed code to direct your customer to a product details modal instead of the cart:

  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' (make sure that you include the quotation marks):
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Save your changes.

Example: change the layout of your product embed

In this example, you can change the layout of your product embed so that the picture appears on the side instead of the top:

  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':
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

  1. Save your changes.

Edit your website's cart

If you want to change the appearance or behavior of your website's cart, then you need to 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 or add the property that you would like to change. For a full list of configurable properties, view the developer documentation.
  2. Save your changes.

Edit an embedded collection

Editing an embedded collection is similar to editing a product or a cart. To edit the properties of the products within the collection (for example, the layout of each product), you need to find the product configuration object and edit it in the same way that you would edit a product embed. To edit the properties of the collection itself (for example, the text of the Next page button), edit the productSet key instead.

Some properties, such as the text of a component, are configured through nested objects, which are objects that appear inside other objects. For example, the text for the Next page button appears inside the productSet component's text object:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}
Can’t find the answers you’re looking for? We’re here to help.