Add price and compare price to ATC button Ride Theme

Store Design

Topic summary

Goal: display both product price and compare-at price on the Add to Cart (ATC) button in the Shopify Ride theme. ATC = “Add to Cart.” Compare-at price = the original/higher price shown for a discount.

Most recent update: A contributor provided a code-based approach to show the price:

  • Navigate: Online Store > Themes > More actions > Edit code.
  • Open main-product.liquid and search for “product-form__buttons.”
  • Insert: {{ product.price | money_without_trailing_zeros }} near the ATC button (a screenshot was shared to indicate placement).

Notes:

  • The shared snippet displays the current product price only. It does not include logic for a compare-at price in the example.
  • A prior reply requested the product page URL and a screenshot to clarify exact placement before advising.

Status: Partially addressed. A concrete method to display the price is provided, but adding the compare-at price specifically isn’t shown. No confirmation from the original poster yet; discussion appears open. The included screenshot is useful for understanding exact placement.

Summarized with AI on February 2. AI used: gpt-5.
1

Hi there,

I am looking to add the price and compare price to ATC button on the Ride Theme. Any help is appreciated.

2

@jcbkgh

firstly, give me the product page url and give me the screenshot where to put price and compare at price?

3

Hi @jcbkgh ,

This is Victor from PageFly - Shopify Page Builder App

You can follow this guide to add a product price / compare price to the ATC button of the Ride theme

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: Find main-product.liquid, click on it > Search for “product-form__buttons” in the file

Step 3: Add the code below like this screenshot

 {{  product.price | money_without_trailing_zeros}}

PageFlyVictor_0-1674027691777.png
PageFlyVictor_0-1674027691777.png2226×1476 328 KB

Hope this can help you solve the issue

Best regards,

Victor | PageFly