Mastering Dynamic Product Page Elements for Shopify Dawn & Smile Themes

Hey everyone! As a Shopify migration expert and community analyst, I spend a lot of time digging through the forums to find common challenges and brilliant solutions. Recently, I stumbled upon a fantastic discussion that many of you running a Shopify store, especially those on Dawn-based themes like 'Smile', will find incredibly useful.

Our fellow store owner, saqlain1, came to the community with a clear vision: he wanted to supercharge his product pages with a suite of dynamic elements. Think engaging feature pills, an eye-catching offer line with coupon and prepaid discounts, a real-time stock alert, and reassuring trust badges along with payment icons. He even shared a screenshot of his desired layout, which looked something like this:

It’s a common goal, right? We all want to make our product pages as informative and persuasive as possible to drive those conversions. The community quickly jumped in to help, and what emerged was a fantastic, actionable solution using Shopify’s powerful Custom Liquid blocks.

The Core Strategy: Custom Liquid Blocks

The general consensus, brilliantly demonstrated by community member Ploqo, was to leverage Shopify’s Custom Liquid blocks within the theme editor. Since the 'Smile' theme is built on Dawn, these solutions are widely applicable to any modern Dawn-based theme. Ploqo even provided a step-by-step guide, which I’ll walk you through.

A smart piece of advice came from bchen27, who suggested keeping these elements as separate blocks rather than one big custom section. This approach, which Ploqo’s solution naturally follows, is crucial for better mobile responsiveness and easier management. As bchen27 put it, "otherwise it gets messy fast on mobile." Good thinking!

Making It Dynamic: The Crucial Variant Update

One of the most valuable insights came from jowel-66, who pointed out a common pitfall: while Dawn-based themes refresh price, SKU, and inventory on variant change, custom blocks for offer lines and stock text might not update automatically. This means if a shopper picks a different size, the offer could still show details for the first variant. To quote jowel-66:

"Dawn-based themes like Smile only refresh the price, SKU and inventory on variant change, so these blocks keep showing the first variant’s price and stock."

The fix? A simple addition to the HTML of the offer block and a small JavaScript snippet. This ensures that when your customer selects a different product variant (like a different size or color), the offer price, "Save %", and stock line update to match the selected variant in real-time. We’ll integrate this into the instructions below.

Step-by-Step: Implementing Dynamic Product Page Elements

Here’s how you can replicate saqlain1’s desired product page enhancements on your Dawn or Smile theme, combining Ploqo’s detailed steps with jowel-66’s crucial dynamic update fix.

1. Access Your Theme Editor:
   • Go to your Shopify Admin.
   • Navigate to Online Store > Themes.
   • On your current theme, click Customize.
2. Open the Product Template:
   • At the top of the theme editor, use the dropdown menu to switch the page to Products > Default product.
     
3. Add Feature Pills (Above Price):
   • Under Product information, click Add block and select Custom liquid.
     
   • Paste the following code into the Custom Liquid box:

     {%- assign points = '10,000+ microcapsules|8x Hyaluronic Acid|Green Antioxidant|Metacool Cooling|For sensitive skin' | split: '|' -%}
     
       {%- for point in points -%}
         {{ point }}
       {%- endfor -%}
     
     

     
   • Drag this new block so it sits just above the Price block.
     
4. Add Dynamic Offer Line & Stock Alert (Below Price):
   • Add a second Custom liquid block.
   • Paste this combined code into the box. Notice the addition of data-live-block="ao-offer" to the div and the JavaScript at the end, which is jowel-66’s fix for dynamic variant 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 Trust Badges & Payment Icons (Below Buy Buttons):
   • Add a third Custom liquid block.
   • Paste this code into the box:

     {%- 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:
   • Don’t forget to click Save in the top right corner of the theme editor!
     

Customizing Your New Blocks

You’ll notice that many of the text elements, like the feature points, coupon code, percentages, and trust badge descriptions, are defined at the top of each Liquid code block. To change the wording or values, simply edit the text inside the quotes. For example, in the feature pills block, you can modify '10,000+ microcapsules|8x Hyaluronic Acid|Green Antioxidant|Metacool Cooling|For sensitive skin' to reflect your product’s unique selling points.

As devcoders wisely suggested in the thread, for the cleanest setup, you might consider making the feature points and trust badges editable directly through the Theme Customizer’s settings, rather than hardcoding them. This would require a bit more advanced Liquid development to create schema settings for your custom blocks, but it offers incredible flexibility for managing content across different products without touching code.

And remember bchen27’s advice: while it’s tempting to copy every line, consider whether your theme already has native blocks for trust badges or payment icons that you can use or adapt. Sometimes, less is more for mobile usability, and leveraging existing theme features can keep things cleaner.

This whole discussion really highlights the power of the Shopify community and the flexibility of the platform. With a few well-placed Custom Liquid blocks and some clever JavaScript, you can transform your product pages into dynamic, conversion-focused machines. It just goes to show what’s possible when store owners and developers share their knowledge!