Displaying Shop Promise on your product page
The Shop Promise badge is displayed beside delivery dates and on product pages for eligible deliveries that are estimated to be delivered domestically in the United States in five or less calendar days. This badge lets customers know that their order includes fast and reliable delivery.
After your application for Shop Promise is approved, you should navigate to the product page using your theme editor to confirm that the Shop Promise badge is displaying correctly.
If the badge isn't displaying correctly, then you'll need to manually position the Shop Promise module.
On this page
Manually position the Shop Promise module
If you're comfortable reading and editing theme code, then you can identify where to make changes and update the product page.
Identify where to make changes
The code for the Shop Promise module needs to be included in the product form on the product page, which should be similar to {%- form 'product', product -%}
. The Shop Promise module can be found in various locations depending on your theme. The following are common locations:
-
main-product.liquid
-
product-form.liquid
-
product-template.liquid
-
product.liquid
Update the product page
Steps:
Manually override the Shop Promise module theme
The Shop Promise module has a dark and light theme. The module automatically uses whichever theme has the highest contrast ratio compared to the background color of the product page.
If you're comfortable reading and editing theme code, then you can override the selected theme of the module by adding a data attribute to the anchor element that's used to manually position the Shop Promise module.
Before you make any changes, duplicate your theme and edit the duplicate theme, so that you can easily revert any changes.