The Prime checkmark and delivery date tag is a feature that allows you to display the Prime checkmark logo and delivery estimate directly on your product cards across your ecommerce store. This helps shoppers easily identify which of your products are eligible for Prime shopping benefits and how quickly those items will be delivered, without requiring them to click through to the individual product detail page. The Prime checkmark and delivery date tag is a script and a code snippet that you can install within your ecommerce platform or content management system, making it easy to start showcasing your Prime eligible products across your site.
Requirements
Before you start setting up Prime checkmark and delivery date tag, you must have the Buy with Prime button set up on your product detail pages. For more information about Buy with Prime set up, go to Set up Buy with Prime.
Set up the Prime checkmark and delivery date tag on your site
To set up Prime checkmark and delivery date tag on your site, perform the following steps:
- Sign in to the merchant console.
- On the side menu, choose Prime features.
- On the Prime checkmark and delivery date tag section, choose Manage.
- On the Install Prime checkmark and delivery date tag page, you can customize the following elements:
- Tag: The Prime checkmark and delivery date tag shows the estimated delivery date by default. You can change this selection to not include the estimated delivery date. Note: If you don’t include the estimated delivery date, only the Prime checkmark logo will appear on your product cards with a transparent background.
- Color mode: The Prime checkmark and delivery date tag uses a transparent background. You can set the delivery date tag text to be light or dark mode. Note: This option is only available if you’re showing the delivery date tag on your product card.
- Follow the steps to install the code snippet on your ecommerce site.
Install the Prime checkmark and delivery date tag on your site
To install the Prime checkmark and delivery date tag on your site, you need to add a script and a code snippet to your site.
To add the Prime checkmark and delivery date tag to your BigCommerce site, perform the following steps:
- Sign in to your BigCommerce store.
- On the side menu, choose Storefront, and then Themes.
- To create a copy of your current theme, from the Advanced drop-down menu, select Make a copy.
- From the copied theme, choose the more actions (…) menu, and then Edit Theme Files.
- 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.
- Copy the Prime checkmark & date tag script provided to you in merchant console.
- Paste the script in the <head> tag.
- Choose Save File.
- 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. - In the card.html file, search for ‘data-product-price’.
- 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. - 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”. - Choose Save file.
- Use Preview mode on your site to review the tag placement, and then choose Save.
- 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:
- Open your cPanel dashboard.
- 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.
- On the Plugins section, choose Add New.
- In the Search Plugins field, enter “WPCode Lite”, and then choose Search.
- Install the Plugin, and then choose Active. A new option called Code Snippets appears on your dashboard side menu.
- On the side menu, choose Code Snippets, then Code Snippets, and then Add New.
- Choose Create Custom Snippet.
- In the Add title for snippet field, enter “BwP Element”.
- For Code Type, select HTML Snippet.
- 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. - Choose Save Snippet.
- Activate the snippet, and then choose Update.
- Preview the Buy with Prime cart placement on your site.
- Create a new code snippet by choosing Create Custom Snippet.
- In the Add title for snippet field, enter “BwP checkmark tag”.
- For Code Type, select PHP Snippet.
- In the Code Preview editor, paste the Prime checkmark & delivery date code snippet provided to you in merchant console.
- Choose Save Snippet.
- 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:
- Open the dashboard of your custom store or ecommerce service provider.
- Select your store.
- Select the store version or template that you want to work in.
- Make a copy of that selected store or template.
- Open the code editor to edit your store or template.
- Copy the script provided to you in merchant console.
- Locate a file that persists across all pages within your site such as the header, body, or liquid file.
- Paste the script in the <head> tag.
- Save your changes.
- Locate the file that powers your site’s product cards.
- Copy the Prime checkmark and delivery date code snippet provided to you in merchant console.
- Paste the code snippet at the bottom of the product card code or directly under the product price.
- 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. - Save and publish your changes.
- Go to merchant console.
- On the side menu, choose Settings, and then Domains.
- Verify if your store’s domain is on the allow list.
- If not, add your store’s domain to the list.
- Save your changes.
Note: Buy with Prime features don’t appear on domains that aren’t listed.
Customize the Prime checkmark and delivery date tag
You can add or remove the delivery date tag or change the Prime checkmark logo background color at any time. When you customize your Prime checkmark and delivery date tag in merchant console, a new code snippet is generated, but your site isn’t automatically updated to reflect your changes. To apply these changes, you must manually delete the existing code snippet from your site and replace it with the new code snippet provided to you in merchant console.
- Open your ecommerce dashboard.
- Edit your store’s code.
- Locate the product card where you added the Prime checkmark logo and delivery date tag code snippet.
- Select and delete the old code snippet from your product card.
- Copy and paste the newly generated Prime checkmark and delivery date tag code snippet provided to you in merchant console.
Customize the Prime checkmark and delivery date tag placement
It’s recommended to place the Prime checkmark and delivery date tag under the price on the product card, but you can customize its placement as needed. To change the Prime checkmark and delivery date tag’s placement, move the corresponding code snippet to your preferred location within the product card layout.
- Locate the product card where you pasted the Prime checkmark and delivery date tag code snippet during the installation.
- Cut the Prime checkmark and delivery date tag code snippet, and then paste it in your preferred location within the product card.
- Preview your changes to confirm that the new location is working.
- Save and publish your changes.
Turn off the Prime checkmark and delivery date tag
To turn off the Prime checkmark and delivery date tag from your site, you must manually remove the code snippet from your site’s code.
To remove the Prime checkmark and delivery date tag from your BigCommerce site, perform the following steps:
- Sign in to your BigCommerce store.
- On the side menu, choose Storefront, and then Themes.
- From the theme, choose the more actions (…) menu, and then Edit Theme Files.
- 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.
- In the product card template file, locate and delete the Prime checkmark and delivery date tag code snippet that you pasted during installation.
- Choose Save file.
- Use Preview mode on your site to review the tag placement, and then choose Save.
- Choose Publish.
To remove the Prime checkmark and delivery date tag from your WooCommerce site, perform the following steps:
- Open your cPanel dashboard.
- On the side menu, choose WPCode, and then Code Snippets.
- Locate and select the BwP checkmark tag code snippet that you created during installation.
- 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.
- 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:
- Open the dashboard of your custom store or ecommerce service provider.
- Select your store.
- Open the code editor to edit your store or template.
- Locate the file that powers your site’s product cards.
- Remove the Prime checkmark and delivery date tag code snippet that you added during installation.
- Save and publish your changes.
Troubleshoot the Prime checkmark and delivery date tag
Use the following troubleshooting information to identify and address some issues that can occur while setting up and installing Prime checkmark and delivery date tag.
| Issue | Cause | Solution |
| The Prime checkmark and delivery date tag isn’t showing on my store even after following the instructions in merchant console. | Your store domain isn’t in the allow list within merchant console. | Ensure that you’ve added your store’s domain to the allow list within merchant console. 1. Sign in to merchant console. |
| The script and code snippet that you added to your stores aren’t the correct ones provided in merchant console. These code snippets are unique to your store and Buy with Prime and will vary between stores. | Ensure that you copied and pasted the unique script and code snippet provided to you in merchant console. If you installed the incorrect script or code snippet, remove it, and then reinstall the code. |