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.

Note

These instructions apply to Buy Button embed code that you've generated after September 26, 2016. If you want to change embed code that you generated before this date, then you need to follow the legacy instructions. You can also recreate your embed code using the Buy Button sales channel.

If you aren't sure which version of the embed code you have, then check to see if it starts with <script data-shopify-buy-ui>. If it does, then you have the latest version. If it starts with <div data-emebd_type=... or another type of <div> tag, then you have the legacy version.

Delete a Buy Button, embedded collection, or embedded cart

To delete an existing buy button, collection, or embedded cart:

  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>
    
  3. 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:

Components

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:

Components2

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.

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'
          }
    }
    
  4. Change the value of that key to 'modal' (make sure that you include the quotation marks):

    options: {
          product: {
            buttonDestination: 'modal'
          }
    }
    
  5. 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.
    
  4. 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.

To edit your website's cart:

  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
          }
    }
    
  3. Edit or add the property that you would like to change. For a full list of configurable properties, view the developer documentation.

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

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free