Customize Buy with Prime button

The default placement of the Buy with Prime button is below the Add to Cart button. If you want to change the placement of the button to suit your business needs or if you find the button appearing at an incorrect place on your product details page, you can manually change its position by adding the following div element to the product page in whichever place you want the button to appear.

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

Adding a div element directly to theme code

1. On your Shopify admin, choose Online store, and then Themes.
2. Create a duplicate of the theme file as a backup.
3. Choose the more actions (…) drop-down menu on your theme, and then Edit Code.
4. In the code editor, choose Sections, and then choose the .liquid file that contains the code for your product page. The correct .liquid file might vary depending on your site customizations. If you don’t know which .liquid file contains the code for your product page, you can find by following these steps:
   
   1. Search for the product.json file.
   2. In the product.json file, under the sections and main headers, find the type field value.
      

      

      The “type” value header shown above is likely be the .liquid file that contains your code for the product details page. Note: The .liquid file may vary due to customizations made on your theme.
   3. Note the name of the .liquid file.

5. Add the following div element in the .liquid file where you want the Buy with Prime button to appear. Insert following code after the closing </div> tag:

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

   For example:

   

6. Go to your product page to verify the placement of the button. If you want to move the button, place the <div> element in another <div> container.

Adding a custom liquid block through Theme editor

1. On your Shopify admin, choose Online store, Your theme options appear.
2. Choose Customize.
3. Navigate to Home page in top-middle drop-down. Change the drop-down to Products, and then Default Product.
4. On the side menu, choose Sections.
5. Choose Default Product, and then Preview.
6. Choose Add block, and then Custom liquid. This adds a new custom liquid block on your product details page.
   

   

7. Once Custom liquid block is selected, add the following div element to the Custom liquid panel on the right-hand side of the screen.
   

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

8. Choose Save.
   

   

9. Move the custom liquid block to your desired location by dragging up and down from the left-hand side panel.
10. Choose Save and visit your page to confirm the changes.

If the Buy with Prime button is present but without an ideal appearance or size, you can re-style it to alter its size or characteristics. Changes to the button can be made in CSS by overriding the styles of the delivery-promise-wc parent element.

For example, if the Buy with Prime module is rendered within the product-form__buttons, you can target it in CSS as follows:

.product-form__buttons delivery-promise-wc {display: block;max-width: 44rem;}

Other style properties can be modified by overriding the values of certain CSS variables. The available variables include:

--inputs-border-opacity

--buttons-radius-outset

--inputs-border-width

--color-foreground

--font-body-family

Example of adding CSS variables directly in your section-main-product.css:

Note: This placement varies across stores and themes. You might need to include it in another stylesheet depending on your site’s theme and CSS.

Example of adding CSS variable through the Theme editor: