Editing or deleting a Buy Button or embedded cart

This page was printed on Jul 15, 2023. For the current version, visit https://help.shopify.com/en/manual/online-sales-channels/buy-button/legacy-edit-delete.

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.

On this page

删除一个购买按钮,嵌入式集合,或嵌入ded 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:

<divdata-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>
  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 maindiv标签在嵌入代码出现在源HTML:

<divdata-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 maindivtag. 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 thedata-redirect_toattribute within the maindivtag of the Buy Button's embed code:

    data-redirect_to="checkout"

  3. Change the value of the attribute toproduct:

    data-redirect_to="product"

  4. Save your changes.

A Buy Button's maindivtag has many attributes that you can edit:

Editable Buy Button tag attributes
Attribute Value Default
data-shop The myshopify domain (such asstorename.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 areproduct,cart, andcollection. product
data-display_size The maximum width of the entire embed (not of the button). Can becompact(230px) orregular(450px). Applies only to a single Product Buy Button. compact
data-has_image Whether it's afull product embed(true) orBuy Button only(false). true
data-redirect_to Where the Buy Buttonlinks to. Can becheckout,product, orcart. If you want the Buy Button to connect with an embedded cart on the same page,data-redirect_tomust becart. checkout
data-product_modal Triggers the product modal to display when a product is clicked. If the value ofdata-redirect_toismodal, this attribute must betrue, otherwise it should befalse. false
data-buy_button_text The text displayed on the Buy Button. Buy now
data-button_background_color Thehex codeof the color of the Buy Button, without the#. Can be three hex characters or six. 7db461
data-button_text_color Thehex codeof 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 ahex code(per rules above), ortransparent. Iftransparent, 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 betrueorfalse. The current value ofdata-has_image
data-show_product_title Override for whether or not to display the product title. Can betrueorfalse. The current value ofdata-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 Thehex codeof 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:

data-sticky="true"data-embed_type="cart"data-shop="your-shop-name.myshopify.com">
type="text/javascript">document.getElementById('ShopifyEmbedScript')||document.write('

  1. Replaceyour-shop-name.myshopify.comwith your store'smyshopify.comaddress.

  2. Addthe relevant attributesto the cart's maindivtag, 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 adddata-cart_title="your text"to the maindivtag in the code snippet. The result would look like this:

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

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

Cart customization attributes
Attribute Value Default
data-shop The relevantmyshopifydomain (such asstorename.myshopify.com). Your Shopify domain
data-embed_type Distinguishes between embed code for Buy Buttons, embedded collections, and embedded carts. Possible values areproduct,cart, andcollection. 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 Thehex codeof the color of the cart button's text, without the#. Can be three hex characters or six. ffffff
data-button_background_color Thehex codeof 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 ahex code(per rules above), ortransparent. Iftransparent, no padding is applied to the embed's content. transparent
data-text_color Thehex codeof the color of the cart button's text, without the#. Can be three hex characters or six. 000000
data-accent_color Thehex codeof 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 totruein 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 theNext pagebutton within an embedded collection. Next page

Edit an embedded collection

The embed code for an embedded collection includes twodivelements. The firstdivcontains the code for an embedded cart, and the seconddivcontains the code for the embedded Buy Buttons, which take the form of a modal window button for each product in the collection.

The seconddivelement 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 areproduct,cart, andcollection. collection