Supercharge Your Shopify Product Pages: Dynamic Offers, Stock Alerts & Trust Badges on Dawn & Smile Themes
Hey fellow store owners!
You know how vital your product pages are, right? They’re where the rubber meets the road, where browsers become buyers. And often, it’s those little extra touches – the quick benefits, the transparent offers, the reassuring trust signals – that make all the difference. I recently saw a fantastic discussion unfold in the Shopify Community that really highlighted this, and I just had to share the insights with you.
It started with a store owner, saqlain1, using the popular 'Smile' theme (which, by the way, is built on the super flexible Dawn theme, so these tips apply broadly!). saqlain1 wanted to add a whole suite of enhanced product information to their store:
- Mini bullet points highlighting product benefits (like “10,000+ microcapsules” or “For sensitive skin”).
- A dynamic offer line showing savings, coupon codes, and prepaid discounts.
- Real-time stock alerts (“Only X left in stock”).
- Trust badges (secure checkout, free shipping, easy returns, COD available).
- Payment method icons.
The Community Steps In with a Solid Plan
Thankfully, the Shopify community is full of brilliant folks! Ploqo jumped in with a detailed, step-by-step solution using Shopify’s Custom Liquid blocks. This is a fantastic feature in modern Shopify themes that lets you inject custom code (Liquid, HTML, CSS, and even JavaScript) directly into your theme sections without diving deep into the theme code files. It’s perfect for adding unique elements like these. Ploqo's approach was smart: break these elements into three distinct Custom Liquid blocks for better organization and mobile responsiveness, a point later echoed by bchen27. Here’s a quick look at the "Before" and "After" of Ploqo's solution:The Critical Dynamic Update: Don't Forget This!
Now, here’s where another community member, jowel-66, swooped in with a crucial refinement. While Ploqo’s initial blocks looked great, jowel-66 pointed out that the offer line and the “Only X left” text wouldn't update when a shopper picked a different product size or variant. This is a common pitfall because Dawn-based themes only refresh the price, SKU, and basic inventory on variant changes, leaving custom blocks static. The fix is elegant: a small JavaScript snippet that listens for variant changes and refreshes the content of specific custom blocks. This ensures that your offer price, "Save %", and stock alerts always match the selected variant – super important for accuracy and shopper trust!Step-by-Step: Adding Dynamic Product Info to Your Smile/Dawn Theme
Ready to implement this on your store? Here’s how you can combine these insights for a truly dynamic product page experience. Remember, always back up your theme before making code changes!1. Access Your Theme Editor:
- Go to your Shopify Admin, then navigate to Online Store.
- Click Edit theme on your current theme (likely Smile or Dawn).
2. Open the Product Template:
- At the top of the theme editor, switch the page to Products > Default product.
3. Add the Feature Pills Block:
- Under Product information, click Add block and pick Custom liquid.
- Paste the following code into the box. This creates the stylish feature pills.
{%- assign points = '10,000+ microcapsules|8x Hyaluronic Acid|Green Antioxidant|Metacool Cooling|For sensitive skin' | split: '|' -%}
{%- for point in points -%}
{{ point }}
{%- endfor -%}
- Drag this block so it sits just above the Price block.
4. Add the Dynamic Offer Line & Stock Alert Block:
- Add a second Custom liquid block.
- IMPORTANT: Paste this code, ensuring the data-live-block="ao-offer" is included in the main div, and the JavaScript is appended at the end to enable dynamic updates!
{%- assign coup -%}
{%- assign coup -%}
{%- assign prepaid_percent = 5 -%}
{%- assign details_line = 'MRP incl. of all taxes · 50g · 30+ days per tube' -%}
{%- assign low_stock_under = 50 -%}
{%- assign v = product.selected_or_first_available_variant -%}
{%- assign keep1 = 100 | minus: coupon_percent -%}
{%- assign keep2 = 100 | minus: prepaid_percent -%}
{%- assign offer_price = v.price | times: keep1 | divided_by: 100 | times: keep2 | divided_by: 100 -%}
{%- if v.compare_at_price > v.price -%}
{%- assign save = v.compare_at_price | minus: v.price | times: 100.0 | divided_by: v.compare_at_price | round -%}
Save {{ save }}%
{%- endif -%}
{{ offer_price | money }} with {{ coupon_code }} + {{ prepaid_percent }}% prepaid
{{ details_line }}
{%- if v.inventory_management == 'shopify' and v.inventory_quantity > 0 and v.inventory_quantity < low_stock_under -%}
Only {{ v.inventory_quantity }} left in stock. Grab yours before it is gone.
{%- endif -%}
- Drag this block just below the Price block.
5. Add the Trust Badges & Payment Icons Block:
- Add a third Custom liquid block.
- Paste this code.
{%- assign trust = 'Secure;checkout|Free shipping;on prepaid|15-day;easy returns|COD;available' | split: '|' -%}
{%- assign badges = 'COD available|15-day easy returns|Cruelty-free & vegan' | split: '|' -%}
{%- for item in trust -%}
{%- assign parts = item | split: ';' -%}
{{ parts[0] }}
{{ parts[1] }}
{%- endfor -%}
Pay with
{%- for type in shop.enabled_payment_types -%}
{{ type | payment_type_svg_tag: class: 'ao-pay__icon' }}
{%- endfor -%}
{%- for badge in badges -%}
✓ {{ badge }}
{%- endfor -%}
- Drag this block just below the Buy buttons block.
6. Save Your Changes:
- Click Save at the top right of the theme editor.
Customizing the Content
You’ll notice at the top of each Liquid code block, there are assign statements. This is where you can easily change the text for your feature pills, coupon codes, percentages, and trust badge messages without touching the HTML or CSS. For example:{%- assign points = 'Your Awesome Benefit 1|Another Great Feature|Key Advantage Here' | split: '|' -%}
The price, "Save %", and stock count in the offer block are pulled directly from your product data, so those update automatically (thanks to jowel-66's script!).
Expert Tips for a Polished Look
Beyond the code, a couple of other community members, devcoders and bchen27, offered some excellent strategic advice:- Keep it Clean on Mobile: bchen27 rightly pointed out that breaking these into separate blocks prevents a "messy fast on mobile" situation. It's crucial for user experience!
- Don't Overdo It: While it’s tempting to copy every detail from an inspiration screenshot, bchen27 also cautioned against making the buy area "harder to scan." Sometimes less is more, or you can leverage your theme's built-in trust badge features if they exist.
- Make it Editable (Advanced Tip): devcoders suggested an even cleaner setup by making the feature points and trust badges editable directly through the Theme Customizer. This is a more advanced Liquid development task, but it means you wouldn’t have to edit code for each product – a huge time-saver if you have many products with unique benefits! If you’re serious about scaling your store, learning more about advanced Shopify customization or hiring an expert can be a game-changer. You can always start your own Shopify store and explore these possibilities.









