Product Price

The Product Price app block shows a product's price and updates it as customers choose between a one-time purchase and a subscription. When a subscription option is selected, the block shows the subscription price. It can also show the original price with a strikethrough and a discount badge such as Save 10%.

Many themes show only the one-time price on the product page, even after a customer picks a subscription. Use this block in place of your theme's price so customers see what they will pay.

Before you begin

Install Awtomic and assign at least one Awtomic subscription plan to the product. See Assigning subscription plans to products.
Use a theme that supports app blocks (an Online Store 2.0 theme).
Add the Subscription Widget block too. The price updates when a customer picks an option in the widget. Without the widget, the block shows the price of the selected variant.

Add the block to your theme

In Shopify admin, go to Online Store → Themes and click Customize on the theme you want to update.
Open the product template, for example Products → Default product.
In the product information section, click Add block and select Awtomic's Product Price from the Apps list.
Drag the block to where the price should appear. This is usually where your theme's Price block sits.
Hide or remove your theme's own Price block so customers don't see two prices.
Configure the settings described below, then click Save.

📘
Keep the block in the product section
Place the Product Price block in the same section as the product's variant picker and Add to cart button. The block uses that section to detect variant changes.

On product templates, the block uses the product being viewed. On other pages, such as a landing page with a featured product section, choose the product in the block's Product setting.

Settings

Display options

Setting	What it controls	Default
Show compare-at price (strikethrough)	Shows the original price crossed out when the current price is lower.	On
Compare-at price position	Shows the strikethrough price Before current price or After current price.	Before current price
Show discount badge	Shows a badge with the subscription discount when a subscription option is selected.	On
Show currency code	Adds the currency code to prices, for example $25.00 USD.	Off
Show cents	Shows the decimal part of prices. Turn it off to show $25 instead of $25.00. The discount badge always shows the full amount.	On
Discount badge text	The badge text. Use `[discount_value]` where the discount should appear, for example `Save [discount_value]` or `[discount_value] off`.	Save [discount_value]

Styling

Setting	Default
Price font size	18px
Compare-at price font size	18px
Bold price	On
Price color	Inherits your theme's text color
Compare-at price color	#999999
Badge text color	#16a34a (green)
Badge background color	Transparent
Custom CSS	Additional CSS for the block.

What customers see

Customer's selection	Price shown	Strikethrough price	Discount badge
One-time purchase	The variant's price	The variant's compare-at price, if higher than the price	Hidden
Subscription	The subscription price for the selected plan	The one-time price, when the subscription price is lower	The plan's discount, for example Save 10% or Save $5.00

The price also updates when the customer changes the variant, such as size or color.
The discount shows as a percentage for percentage discounts and as a currency amount for fixed-amount discounts.
If a plan has more than one price stage, such as a first-order discount followed by a different recurring price, the block shows the price of the first order without the strikethrough or badge.
A product page link that includes a selling_plan parameter opens with that plan's price.

Test your setup

Open a product with Awtomic subscription plans in your storefront or theme preview.
Confirm the one-time price appears and that your theme's price is hidden.
Select a subscription option in the Subscription Widget. Confirm the price, the strikethrough price and the badge update.
Change frequency, then change the variant, and confirm the price follows each change.
Switch back to one-time purchase and confirm the badge disappears.

Troubleshooting

Issue	What to check
The block doesn't appear	Confirm the block is saved on the template being viewed and that a product is selected or available on the page.
Two prices appear	Hide or remove your theme's own Price block.
The price doesn't change when a subscription is selected	Confirm the product has an Awtomic subscription plan for the selected variant, and that the Subscription Widget shows the same product.
The price doesn't change when the variant changes	Move the Product Price block into the same section as the variant picker and Add to cart button.
No strikethrough price or badge on a subscription	Confirm the plan has a discount and that Show compare-at price and Show discount badge are on. Plans with multiple price stages don't show them.
Prices appear without cents	Turn on Show cents.

Contact [email protected] if you need help.