Prime checkmark and delivery date tag

You can install the Prime checkmark and delivery date tag on multiple pages of your Shopify store to provide shoppers with Prime delivery information throughout their shopping experience:

• Product detail pages
• Collections pages
• Cart page
• Side cart (cart drawer)

Important: If the Prime checkmark and delivery date tag doesn’t appear as expected on your Shopify store, go to the section in this article, “Validate Prime checkmark and delivery tag.”

Product detail pages:

To add the Prime checkmark and delivery date tag to your Shopify site’s product detail pages, use the following steps:

1. In Shopify admin, choose Online store and then Themes.
2. Create a duplicate of your active theme as a backup.
3. Choose the more actions (...) dropdown menu on your theme and then click Edit Code.
4. In the code editor, choose Sections and then locate the header.liquid or theme.liquid file.
5. Go to Buy with Prime merchant console, select Prime Features, Add on features, and Prime checkmark logo and delivery date tag, and then copy the script.
   

   

6. In Shopify admin, paste the script in the last line of the code under {% endschema %}.
   

   

7. Click Save.
8. On your Shopify admin, choose Online store, Themes, and then click Edit Theme.
9. In the Shopify theme editor, open the Home Page menu, choose Products and then the Default Product template (or other template that you want to edit). Note that you need to repeat these steps for each template that want to edit.
   

   

10. On the side menu, in the Template section, hover over the Buy buttons block, and then click the (+) button to add a new block.
11. For block type, select Custom Liquid or HTML.
12. Paste the code snippet into the Custom Liquid editor, making sure to replace [ESP SKU identifier] with {{product.selected_or_first_available_variant.sku}}.
    

    

13. Click Save.
14. Make sure that the new custom liquid block appears under the Price block.
    

    

Collections pages

1. In the Shopify code editor, choose Snippets, and then open the card-product.liquid file.
2. Paste the snippet code under the price_class or render price section.
3. Replace the product-sku in the snippet-code with:
   product-sku="{{ card_product.selected_or_first_available_variant.sku }}"
   

   

4. Click Save.
   

   

Cart page

1. In the Shopify code editor, choose Sections, and then open the main-cart-items.liquid or cart.template.liquid file.
2. Paste the snippet code under the price_class or render price section.
3. Replace the product-sku in the snippet-code with:
   product-sku="{{ item.variant.id }}"
   

   

4. Click Save.
   

   

Side cart or cart drawer

1. In the Shopify code editor, choose Snippets, and open the cart-drawer.liquid file.
2. Paste the code snippet under the price_class or render pricesection.
3. Replace the product-sku in the snippet-code with:
   product-sku="{{ product.selected_or_first_available_variant.id }}"
   

   

4. Click Save.
   

   

Validate Prime checkmark and delivery tag

Check that the Prime checkmark appears correctly, at the correct locations. If the Prime checkmark doesn’t appear as expected, verify that your store’s domain is on the allow list, using the following steps:

1. Go to Buy with Prime merchant console.
2. On the side menu, choose Settings and then Domains.
3. Add your store’s domain (url) to the allow list.
   Important: Make sure that you add your domains both with and without the “www.”

To add the Prime checkmark and delivery date tag to your BigCommerce site, perform the following steps:

1. Sign in to your BigCommerce store.
2. On the side menu, choose Storefront, and then Themes.
3. To create a copy of your current theme, from the Advanced drop-down menu, select Make a copy.
4. From the copied theme, choose the more actions (…) menu, and then Edit Theme Files.
5. In the file tree, locate and open the base.html template file. For example, if you’re using the default theme, choose templates, layout, and then base.html.
6. Copy the Prime checkmark & date tag script provided to you in merchant console.
7. Paste the script in the <head> tag.
8. Choose Save File.
9. In the file tree, locate and open the product card template file. For example, if you’re using the default theme, choose templates, components, products, and then card.html.
   Note: Depending on your theme, your path might differ.
10. In the card.html file, search for ‘data-product-price’.
11. Copy the Prime checkmark and delivery date tag code snippet provided to you in merchant console.
    Note: The merchant console generates a code that has all your site details. You don’t need to change anything in the code.
12. Paste the code under ‘data-product-price’.
    Note: Your product cards might vary. It’s recommended to install the code snippet at the bottom of the product card or under “price”.
13. Choose Save file.
14. Use Preview mode on your site to review the tag placement, and then choose Save.
15. If you’re editing a copy, choose Use as Active Theme, and then Publish.

To add the Prime checkmark and delivery date tag to your WooCommerce site, perform the following steps:

1. Open your cPanel dashboard.
2. Install the WPCode Lite Plugin, also known as WPCode. This plugin helps to insert headers, footers, and code. If you already have the WPCode Lite Plugin installed, skip to Step 6. If you don’t have the WPCode Lite Plugin, go to Step 3.
3. On the Plugins section, choose Add New.
4. In the Search Plugins field, enter “WPCode Lite”, and then choose Search.
5. Install the Plugin, and then choose Active. A new option called Code Snippets appears on your dashboard side menu.
6. On the side menu, choose Code Snippets, then Code Snippets, and then Add New.
7. Choose Create Custom Snippet.
8. In the Add title for snippet field, enter “BwP Element”.
9. For Code Type, select HTML Snippet.
10. In the Code Preview editor, paste the Prime checkmark & delivery date script provided to you in merchant console.
    Note: The merchant console generates a code that has all your site details. You don’t need to change anything in the code.
11. Choose Save Snippet.
12. Activate the snippet, and then choose Update.
13. Preview the Buy with Prime cart placement on your site.
14. Create a new code snippet by choosing Create Custom Snippet.
15. In the Add title for snippet field, enter “BwP checkmark tag”.
16. For Code Type, select PHP Snippet.
17. In the Code Preview editor, paste the Prime checkmark & delivery date code snippet provided to you in merchant console.
18. Choose Save Snippet.
19. Activate the snippet, and then choose Update.

To add the Prime checkmark and delivery date tag to your custom site or other ESP, perform the following steps:

1. Open the dashboard of your custom store or ecommerce service provider.
2. Select your store.
3. Select the store version or template that you want to work in.
4. Make a copy of that selected store or template.
5. Open the code editor to edit your store or template.
6. Copy the script provided to you in merchant console.
7. Locate a file that persists across all pages within your site such as the header, body, or liquid file.
8. Paste the script in the <head> tag.
9. Save your changes.
10. Locate the file that powers your site’s product cards.
11. Copy the Prime checkmark and delivery date code snippet provided to you in merchant console.
12. Paste the code snippet at the bottom of the product card code or directly under the product price.
13. Replace the value of "[ESP SKU identifier]” with the correct SKU identifier that your product card uses. For example, “product-sku="{{sku}} or “product-sku="{{card_product.selected_or_first_available_variant.sku}}.
    Note: Your store might use the same SKU identifier here as the SKU identifier used on your product detail page.
14. Save and publish your changes.
15. Go to merchant console.
16. On the side menu, choose Settings, and then Domains.
17. Verify if your store’s domain is on the allow list.
18. If not, add your store’s domain to the list.
19. Save your changes.
    Note: Buy with Prime features don’t appear on domains that aren’t listed.

To remove the Prime checkmark and delivery date tag from any of the following locations, use the following steps:

• Product detail pages
• Collections pages
• Cart page
• Side cart (cart drawer)

Remove from product detail pages:

1. In Shopify admin, choose Online store and then Themes.
2. Choose the more actions (...) dropdown menu on your theme and then click Edit Code.
3. In the code editor, choose Sections and then locate the header.liquid or theme.liquid file.
4. Locate and delete the Prime checkmark and delivery date tag script in the last line of the code under {% endschema %}.
   

   

5. Click Save.
6. In Shopify admin, choose Online store, Themes, and then click Edit Theme.
7. In the Shopify theme editor, open the Home Page menu, choose Products and then the Default Product template (or other template that you edited during installation).
8. On the side menu, in the Template section, locate the Custom Liquid or HTML block that contains the Prime checkmark and delivery date tag code snippet.
9. Delete the Custom Liquid or HTML block.
10. Click Save.
11. Repeat steps 7-10 for each product template in which you installed the tag.

Remove from collections pages:

1. In the Shopify code editor, choose Snippets, and then open the card-product.liquid file.
2. Locate and delete the Prime checkmark and delivery date tag code snippet under the price_class or render price section.
3. Click Save.

Remove from cart page:

1. In the Shopify code editor, choose Sections, and then open the main-cart-items.liquid or cart.template.liquid file.
2. Locate and delete the Prime checkmark and delivery date tag code snippet under the price_class or render price section.
3. Click Save.

Remove from side cart (cart drawer):

1. In the Shopify code editor, choose Snippets, and open the cart-drawer.liquid file.
2. Locate and delete the Prime checkmark and delivery date tag code snippet under the price_class or render price section.
3. Click Save.

To remove the Prime checkmark and delivery date tag from your BigCommerce site, perform the following steps:

1. Sign in to your BigCommerce store.
2. On the side menu, choose Storefront, and then Themes.
3. From the theme, choose the more actions (…) menu, and then Edit Theme Files.
4. In the file tree, locate and open the product card template file that where you pasted the code snippet during installation. For example, card.html.
5. In the product card template file, locate and delete the Prime checkmark and delivery date tag code snippet that you pasted during installation.
6. Choose Save file.
7. Use Preview mode on your site to review your changes, and then choose Save.
8. Choose Publish.

To remove the Prime checkmark and delivery date tag from your WooCommerce site, perform the following steps:

1. Open your cPanel dashboard.
2. On the side menu, choose WPCode, and then Code Snippets.
3. Locate and select the BwP checkmark tag code snippet that you created during installation.
4. Choose one of the following options:
   
   • To turn off the Prime checkmark and delivery date tag, choose Edit, turn off the Active button, and then click Update.
   • To remove the Prime checkmark and delivery date tag, select Trash.
5. Review your changes and verify that the Prime checkmark and delivery date tag no longer appears on your product cards.

To remove the Prime checkmark and delivery date tag from your custom site or other ESP, perform the following steps:

1. Open the dashboard of your custom store or ecommerce service provider.
2. Select your store.
3. Open the code editor to edit your store or template.
4. Locate the file that powers your site’s product cards.
5. Remove the Prime checkmark and delivery date tag code snippet that you added during installation.
6. Save and publish your changes.