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.

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

Tip

If you're not comfortable reading and editing theme code, and you're using a theme from Shopify, then you can have your theme updated by contacting Shopify Support. Learn more about the Shopify Design Policy. If you're using a third-party theme, then you can contact your theme developer or hire a Shopify Partner.

Update the product page

Tip

Before making any changes, duplicate your theme and make changes in the duplicate so that you can more easily revert any changes that you make.

Steps:

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Open the relevant file.
4. Find the line that contains {%- if block.settings.show_dynamic_checkout -%} or {{ form | payment_button }}.
5. Create a new line directly below {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} and paste the following on that line:

<div class="delivery-promise__promise-container"></div>

6. Click Save.

The result should be similar to the following:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

iPhone

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme you want to edit, tap the … button to open the actions menu, and then tap Edit code.
5. Open the relevant file.
6. Find the line that contains {%- if block.settings.show_dynamic_checkout -%} or {{ form | payment_button }}.
7. Create a new line directly below {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} and paste the following on that line:

<div class="delivery-promise__promise-container"></div>

8. Tap Save.

The result should be similar to the following:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Android

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme you want to edit, tap the … button to open the actions menu, and then tap Edit code.
5. Open the relevant file.
6. Find the line that contains {%- if block.settings.show_dynamic_checkout -%} or {{ form | payment_button }}.
7. Create a new line directly below {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} and paste the following on that line:

<div class="delivery-promise__promise-container"></div>

8. Tap Save.

The result should be similar to the following:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

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.

Tip

If you're not comfortable reading and editing theme code, and you're using a theme from Shopify, then you can have your theme updated by contacting Shopify Support. Learn more about the Shopify Design Policy. If you're using a third-party theme, then you can contact your theme developer or hire a Shopify Partner.

Steps:

Desktop

1. Follow the instructions to manually position the Shop Promise module on your product page and then keep the theme editor open.
2. Add a theme data attribute to your newly created anchor element set to dark or light.
3. Click Save.

The result should be similar to one of the following:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Or

<div class="delivery-promise__promise-container" data-theme="light"></div>

iPhone

1. Follow the instructions to manually position the Shop Promise module on your product page and then keep the theme editor open.
2. Add a theme data attribute to your newly created anchor element set to dark or light.
3. Tap Save.

The result should be similar to one of the following:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Or

<div class="delivery-promise__promise-container" data-theme="light"></div>

Android

1. Follow the instructions to manually position the Shop Promise module on your product page and then keep the theme editor open.
2. Add a theme data attribute to your newly created anchor element set to dark or light.
3. Tap Save.

The result should be similar to one of the following:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Or

<div class="delivery-promise__promise-container" data-theme="light"></div>

Add custom HTML or liquid for the Promise module

If your theme supports custom blocks, then you can use a Custom Liquid block to add the Shop Promise module to your product page without editing theme code.

Steps to add the Promise module using a custom Liquid block:

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and click Customize.
3. Navigate to a product page using the template selector in the top menu bar.
4. In the sidebar menu, find the Product information section.
5. Click Add block and select custom Liquid from the list of available blocks.
6. In the custom Liquid text field, paste the following code:

<div class="delivery-promise__promise-container"></div>

7. Position the block by dragging it to the desired location, typically below the Buy buttons block.
8. Click Save to apply your changes.

If you want to specify a theme preference (dark or light), then use one of the following instead:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Or

<div class="delivery-promise__promise-container" data-theme="light"></div>

iPhone

1. From the Shopify app, tap Online Store.
2. Tap Manage themes.
3. Find your active theme and tap Customize.
4. Navigate to a product page using the template selector at the top.
5. Tap the Product information section.
6. Tap Add block and select Custom Liquid.
7. In the custom Liquid text field, paste the following code:

<div class="delivery-promise__promise-container"></div>

8. Position the block by dragging it to the desired location, typically below the Buy buttons block.
9. Tap Save to apply your changes.

If you want to specify a theme preference (dark or light), then use one of the following instead:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Or

<div class="delivery-promise__promise-container" data-theme="light"></div>

Android

1. From the Shopify app, tap Online Store.
2. Tap Manage themes.
3. Find your active theme and tap Customize.
4. Navigate to a product page using the template selector at the top.
5. Tap the Product information section.
6. Tap Add block and select Custom Liquid.
7. In the custom Liquid text field, paste the following code:

<div class="delivery-promise__promise-container"></div>

8. Position the block by dragging it to the desired location, typically below the Buy buttons block.
9. Tap Save to apply your changes.

If you want to specify a theme preference (dark or light), then use one of the following instead:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Or

<div class="delivery-promise__promise-container" data-theme="light"></div>

Tip

Not all themes support Custom Liquid blocks. If your theme doesn't have this option, then follow the instructions to manually position the Shop Promise module by editing your theme code.