Editing or deleting a Buy Button or embedded cart

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. If you need help, then you can hire a Shopify Partner.

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.

Tip

In JavaScript, an object is a set of key-value pairs, in the format {key: value}. You can think of it like a spreadsheet: a key is like a column name, and a value is like the contents of a cell.

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.

Example: replace link to cart with product details modal

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

Note

When you add the 'horizontal' value, make sure that it includes the quotation marks, and that the previous line ends with a comma.

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