For Business

Customize Buy with Prime button

Learn how to customize your Buy with Prime button

Buy with Prime automatically matches your template and by default positions itself below the Add to Cart button. However, because each store is different, you can change the placement and adjust styles (border width, color, font) of the Buy with Prime button container to align it with your brand and business goals.

Change placement

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.
      Screenshot of the product.json file highlighting the type value field under the section, and then main value fields.
      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:

    Screenshot of the .liquid file with the new div element added after the existing closing div tag.

  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.
    Screenshot of the Shopify default product page, with the Add block option on the side, and the custom liquid option on the right pane.
  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.
    Screenshot of the custom liquid block with the option to Save at the top right.
  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.

Change styling

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:

CSS variableDescription
Controls the opacity of the container border.
Controls the border radius of the button.
Controls the border width of the Buy with Prime container.
Controls the color of the container border and text.
Controls the text font family. This variable is inherited from the theme.

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

Screenshot of the product css file with the custom css properties added.

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:

Screenshot of the Theme editor page with the Custom css added.