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 embed code that you add to your webpage's source HTML. If you want to change the appearance or behavior of a button or cart on a webpage, then you need to change the associated embed code.

Tip

The embed code in the source HTML overrides the settings you choose when creating a button or cart in your Shopify admin. If you enter an invalid value to the embed code by mistake, then it is automatically replaced by the default value.

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. The embed code will look like the following code for a Buy Button:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>
<script type="text/javascript">
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
</script>
<noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">Buy your product</a></noscript>

1. Save your changes.

Edit a Buy Button

To change the appearance or settings of an existing Buy Button, you must edit the contents of its main div tag in the embed code that appears in the source HTML:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page" />

Each feature of the embedded Buy Button is controlled by a separate attribute in the main div tag. You can add, remove, or update these attributes directly in the source HTML.

For example, if you want an existing Buy Button to direct the user to the product page instead of the checkout page:

1. Open the HTML of the page containing the Buy Button you want to change.

2. Find the data-redirect_to attribute within the main div tag of the Buy Button's embed code:

   data-redirect_to="checkout"

3. Change the value of the attribute to product:

   data-redirect_to="product"

4. Save your changes.

A Buy Button's main div tag has many attributes that you can edit:

Editable Buy Button tag attributes

Attribute	Value	Default
data-shop	The myshopify domain (such as storename.myshopify.com) connected to the button.	Your Shopify domain
data-product_handle	The featured product's handle, which is based on the product's title. Each of your products has a unique handle in Shopify.	The featured product's handle
data-embed_type	Distinguishes between embed code for Buy Buttons, embedded collections, and embedded carts. Possible values are product, cart, and collection.	product
data-display_size	The maximum width of the entire embed (not of the button). Can be compact (230px) or regular (450px). Applies only to a single Product Buy Button.	compact
data-has_image	Whether it's a full product embed (true) or Buy Button only (false).	true
data-redirect_to	Where the Buy Button links to. Can be checkout, product, or cart. If you want the Buy Button to connect with an embedded cart on the same page, data-redirect_to must be cart.	checkout
data-product_modal	Triggers the product modal to display when a product is clicked. If the value of data-redirect_to is modal, this attribute must be true, otherwise it should be false.	false
data-buy_button_text	The text displayed on the Buy Button.	Buy now
data-button_background_color	The hex code of the color of the Buy Button, without the #. Can be three hex characters or six.	7db461
data-button_text_color	The hex code of the color of the Buy Button's text, without the #. Can be three hex characters or six.	ffffff
data-background_color	The background color of the area surrounding the Buy Button. It can be a hex code (per rules above), or transparent. If transparent, no padding is applied to the embed's content.	transparent
data-show_product_price	Override for whether or not to display the product price. Can be true or false.	The current value of data-has_image
data-show_product_title	Override for whether or not to display the product title. Can be true or false.	The current value of data-has_image
data-buy_button_out_of_stock_text	The text that appears when a product is out of stock.	Out of Stock
data-buy_button_product_unavailable_text	The text that appears when a product is unavailable.	Unavailable
data-product_title_color	The hex code of the color of the product title's text, without the #. Can be three hex characters or six.	000000

Edit your website's cart

If you want to change the appearance or behavior of your website's cart, you need to add a separate snippet of HTML code and then edit its attributes. Each attribute controls a different part of what the cart looks like or how it works.

To edit your website's cart:

1. Open the HTML of the page containing the cart you want to edit.

2. Paste the following code:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

1. Replace your-shop-name.myshopify.com with your store's myshopify.com address.

2. Add the relevant attributes to the cart's main div tag, and change it to include the value that you want. For example, if you want to change the text that appears at the top of the cart, then you need to add data-cart_title="your text" to the main div tag in the code snippet. The result would look like this:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">

1. When you're done, save your changes.

Cart attributes

Note

Make sure that the cart attributes that you add or change are included in the same <div> tag that contains the data-embed_type="cart" attribute, and not in the <div> tag that contains the data-embed_type="product" attribute.

There are many attributes that you can use to customize your website's cart:

Cart customization attributes

Attribute	Value	Default
data-shop	The relevant myshopify domain (such as storename.myshopify.com).	Your Shopify domain
data-embed_type	Distinguishes between embed code for Buy Buttons, embedded collections, and embedded carts. Possible values are product, cart, and collection.	cart
data-checkout_button_text	The text displayed on the button that leads to the checkout page from within the cart (not the cart button).	Checkout
data-button_text_color	The hex code of the color of the cart button's text, without the #. Can be three hex characters or six.	ffffff
data-button_background_color	The hex code of the color of the cart button, without the #. Can be three hex characters or six.	7db461
data-background_color	The background color of the area surrounding the embedded cart. It can be a hex code (per rules above), or transparent. If transparent, no padding is applied to the embed's content.	transparent
data-text_color	The hex code of the color of the cart button's text, without the #. Can be three hex characters or six.	000000
data-accent_color	The hex code of the color of the border that appears around the cart, without the #. Can be three hex characters or six.	000000
data-cart_title	The text that appears at the top of the embedded cart when open on a page.	Your cart
data-cart_total_text	The text that appears beside the total amount in the embedded cart.	Total
data-discount_notice_text	The discount notice that appears in the embedded cart.	Shipping and discount codes are added at checkout.
data-sticky	Indicates whether the button appears where it is placed in the markup or sticks to the side of the page. Recently built embedded carts have this set to true in the embed code output.	false
data-empty_cart_text	The text that appears if the cart is empty.	Your cart is empty
data-next_page_button_text	The text that appears on the Next page button within an embedded collection.	Next page

Edit an embedded collection

The embed code for an embedded collection includes two div elements. The first div contains the code for an embedded cart, and the second div contains the code for the embedded Buy Buttons, which take the form of a modal window button for each product in the collection.

Note

The code for the embedded cart and Buy Buttons can be edited as described above, but the data-redirect_to attribute must be set to modal, and data-product_modal must be true.

The second div element also contains the following attributes:

Definition of attributes in Buy Button code

Attribute	Value	Default
data-collection_handle	The featured collection's handle, which is based on the collection's title. Each of your collections has a unique handle in Shopify.	The featured collection's handle
data-embed_type	Distinguishes between embed code for Buy Buttons, embedded collections, and embedded carts. Possible values are product, cart, and collection.	collection