Crafting Engaging Product Stories on Shopify's Smile Theme: A Community Deep Dive
Hey everyone! I just dove into a fantastic discussion on the Shopify community forums that really hit home for a lot of store owners. It was all about adding those crucial 'story' sections to product pages – you know, the ones that really sell your brand and product benefits beyond just the basic description. Our friend saqlain1 kicked things off, asking how to integrate a specific, branded text and bullet point layout into their 'Smile theme' (which we later figured out was likely the Nexa theme preset) with a distinct brand color of #0B283D.
The Problem: Custom Content on Product Pages
Saqlain1 had a clear vision: a section on their product page, like the one in their screenshot, featuring headlines, compelling paragraphs, striking statistics, and clear bullet points – all adhering to their brand's aesthetic. The initial challenge was getting this content in there without relying on images, as they already knew how to handle those. They needed something editable, flexible, and truly integrated into their theme.
Community Solutions & Insights: Two Paths to Custom Content
This is where the Shopify community really shines! The thread quickly evolved with several helpful experts jumping in. First, Mustafa_Ali asked for the store URL, which is always the right first step to get context. Saqlain1 provided it: AlvaraOne RootRevive™ Deoxyribose Serum. This immediately helped others visualize the target page.
V.marychenka then offered a really practical, quick-win solution using the 'Custom Liquid' section. This is a fantastic built-in feature in most modern Shopify themes that lets you paste HTML and CSS directly. It's perfect for when you need a custom block of content without building a whole new section file. V.marychenka even provided ready-to-use code tailored to saqlain1’s request for text, stats, and bullets, all styled with the specified brand color. They even tested it on the Nexa Smile demo store – talk about thorough!
Then, devcoders came in with an even more comprehensive solution: a full branded-product-story.liquid section. This approach is fantastic for long-term flexibility because it creates a new, reusable section that's fully editable right from your Shopify Theme Editor. Think of it – you get to change headings, descriptions, statistics, benefit points, colors, font sizes, spacing, and even image settings (if you decide to add them later!) without ever touching a line of code again. This is truly the gold standard for empowering store owners to manage their content easily.
Finally, NoahMueller (who actually started the thread with general advice, not the specific question) offered some excellent strategic reminders:
- Context is King: Don't just throw numbers out there. If you're using statistics, explain what they measure and where they come from.
- Mobile First: Ensure your story section is scannable on mobile. Lead with a headline and a few short benefits, keeping longer explanations for later to avoid pushing crucial elements like price and 'Add to Cart' too far down.
- Measure Impact: Always compare your mobile add-to-cart rate and revenue per session before and after adding a new section. This helps you understand if your story is building confidence or just adding unnecessary scroll.
Implementing Your Branded Product Story Section
Ready to get this custom content onto your product pages? Here's how you can leverage the community's insights, choosing the method that best suits your comfort level with code.
Option 1: Quick & Easy with Custom Liquid (for Text & Bullets)
This method is perfect if you want to quickly add a text-focused section with statistics and bullet points, as v.marychenka suggested. It's less about building a reusable component and more about injecting specific content.
- Duplicate Your Theme: Always, always, always duplicate your live theme before making any code changes. Go to Online Store > Themes, find your current theme, click Actions > Duplicate. Work on the duplicate!
- Navigate to Theme Editor: From your duplicated theme, click Actions > Edit code.
- Add a Custom Liquid Section:
- Go to Online Store > Themes > Customize.
- In the theme editor, use the page drop-down at the top (it usually says "Home page") and select your Product template (e.g., "Default product").
- Scroll down in the left sidebar and click Add section.
- Choose Custom Liquid.
- Paste the Code: Copy and paste the following HTML and CSS code provided by v.marychenka into the Custom Liquid section. Remember to replace the placeholder text with your actual content and statistics.
Your headline here
Your intro paragraph goes here.
87%First stat line goes here
65%Second stat line goes here
Your closing paragraph goes here.
- First bullet point
- Second bullet point
- Third bullet point
- Save and Position: Click Save. You can then drag the section up or down in the sidebar to position it where you want it on your product page.
- Review: Check how it looks on both desktop and mobile.
Option 2: Advanced & Fully Customizable with a New Section File
This method, detailed by devcoders, gives you the most control and makes the content truly editable from the Theme Customizer, similar to how your theme's built-in sections work. It's more setup initially but saves tons of time later.
- Duplicate Your Theme: As always, start by duplicating your live theme.
- Navigate to Theme Editor: From your duplicated theme, click Actions > Edit code.
- Create a New Section File:
- In the left sidebar, under the Sections directory, click Add a new section.
- Name it
branded-product-story(or something similar). It will automatically createbranded-product-story.liquid.
- Paste the Code: Copy and paste the entire code block provided by devcoders into your new
branded-product-story.liquidfile.
{% liquid
assign secti | append: section.id
%}
{% if section.settings.first_heading != blank %}
{{ section.settings.first_heading }}
{% endif %}
{% if section.settings.first_description != blank %}
{{ section.settings.first_description }}
{% endif %}
{% for block in section.blocks %}
{% if block.type == 'stat' %}
{% if block.settings.number != blank %}
{{ block.settings.number }}
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% endif %}
{% endfor %}
{% if section.settings.first_bottom_text != blank %}
{{ section.settings.first_bottom_text }}
{% endif %}
{% if section.settings.first_image != blank %}
{{
section.settings.first_image
| image_url: width: 1600
| image_tag:
loading: 'lazy',
widths: '400, 600, 800, 1200, 1600',
sizes: '(min-width: 750px) 50vw, 100vw',
alt: section.settings.first_image.alt
}}
{% else %}
Add your first image from the Theme Editor.
{% endif %}
{% if section.settings.second_image != blank %}
{{
section.settings.second_image
| image_url: width: 1600
| image_tag:
loading: 'lazy',
widths: '400, 600, 800, 1200, 1600',
sizes: '(min-width: 750px) 50vw, 100vw',
alt: section.settings.second_image.alt
}}
{% else %}
Add your second image from the Theme Editor.
{% endif %}
{% if section.settings.second_heading != blank %}
{{ section.settings.second_heading }}
{% endif %}
{% if section.settings.second_description != blank %}
{{ section.settings.second_description }}
{% endif %}
{% assign has_benefits = false %}
{% for block in section.blocks %}
{% if block.type == 'benefit' %}
{% assign has_benefits = true %}
{% endif %}
{% endfor %}
{% if has_benefits %}
{% for block in section.blocks %}
{% if block.type == 'benefit' %}
-
{{ block.settings.text }}
{% endif %}
{% endfor %}
{% endif %}
{% if section.settings.second_bottom_text != blank %}
{{ section.settings.second_bottom_text }}
{% endif %}
{% schema %}
{
"name": "Branded Product Story",
"tag": "section",
"class": "section-branded-product-story",
"settings": [
{
"type": "header",
"content": "Brand colors"
},
{
"type": "color",
"id": "brand_color",
"label": "Brand color",
"default": "#0B283D"
},
{
"type": "color",
"id": "accent_color",
"label": "Accent color",
"default": "#EC148C"
},
{
"type": "color",
"id": "border_color",
"label": "Image border color",
"default": "#0B283D"
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#FFFFFF"
},
{
"type": "header",
"content": "First content block"
},
{
"type": "text",
"id": "first_heading",
"label": "Heading",
"default": "Most Products Leave Customers Behind"
},
{
"type": "richtext",
"id": "first_description",
"label": "Description",
"default": "Add your product story and explain the problem your product solves.
"
},
{
"type": "richtext",
"id": "first_bottom_text",
"label": "Bottom description",
"default": "Explain why your product provides a better solution and what makes it different.
"
},
{
"type": "image_picker",
"id": "first_image",
"label": "First image"
},
{
"type": "header",
"content": "Second content block"
},
{
"type": "text",
"id": "second_heading",
"label": "Heading",
"default": "Your Product: The All-In-One Solution"
},
{
"type": "richtext",
"id": "second_description",
"label": "Description",
"default": "Describe your product and explain the key benefits customers receive.
"
},
{
"type": "richtext",
"id": "second_bottom_text",
"label": "Bottom description",
"default": "Finish with a strong statement about your product and its benefits.
"
},
{
"type": "image_picker",
"id": "second_image",
"label": "Second image"
},
{
"type": "header",
"content": "Desktop layout"
},
{
"type": "range",
"id": "max_width",
"label": "Maximum width",
"min": 900,
"max": 1800,
"step": 20,
"unit": "px",
"default": 1400
},
{
"type": "range",
"id": "desktop_gap",
"label": "Column gap",
"min": 20,
"max": 120,
"step": 5,
"unit": "px",
"default": 50
},
{
"type": "range",
"id": "row_spacing",
"label": "Row spacing",
"min": 20,
"max": 150,
"step": 5,
"unit": "px",
"default": 70
},
{
"type": "header",
"content": "Typography"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading size",
"min": 22,
"max": 60,
"step": 1,
"unit": "px",
"default": 36
},
{
"type": "range",
"id": "body_size",
"label": "Body text size",
"min": 13,
"max": 22,
"step": 1,
"unit": "px",
"default": 16
},
{
"type": "range",
"id": "stat_size",
"label": "Statistic number size",
"min": 35,
"max": 100,
"step": 1,
"unit": "px",
"default": 58
},
{
"type": "range",
"id": "stat_text_size",
"label": "Statistic text size",
"min": 13,
"max": 22,
"step": 1,
"unit": "px",
"default": 16
},
{
"type": "header",
"content": "Images"
},
{
"type": "range",
"id": "border_radius",
"label": "Image corner radius",
"min": 0,
"max": 40,
"step": 2,
"unit": "px",
"default": 16
},
{
"type": "range",
"id": "image_border_width",
"label": "Image border width",
"min": 0,
"max": 5,
"step": 1,
"unit": "px",
"default": 2
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "padding_top",
"label": "Desktop top padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 70
},
{
"type": "range",
"id": "padding_bottom",
"label": "Desktop bottom padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 70
},
{
"type": "range",
"id": "mobile_padding_top",
"label": "Mobile top padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "mobile_padding_bottom",
"label": "Mobile bottom padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "mobile_gap",
"label": "Mobile content gap",
"min": 15,
"max": 60,
"step": 5,
"unit": "px",
"default": 30
},
{
"type": "range",
"id": "mobile_row_spacing",
"label": "Mobile row spacing",
"min": 20,
"max": 100,
"step": 5,
"unit": "px",
"default": 50
},
{
"type": "header",
"content": "Mobile typography"
},
{
"type": "range",
"id": "mobile_heading_size",
"label": "Mobile heading size",
"min": 20,
"max": 40,
"step": 1,
"unit": "px",
"default": 28
},
{
"type": "range",
"id": "mobile_body_size",
"label": "Mobile body size",
"min": 13,
"max": 20,
"step": 1,
"unit": "px",
"default": 15
},
{
"type": "range",
"id": "mobile_stat_size",
"label": "Mobile statistic size",
"min": 35,
"max": 70,
"step": 1,
"unit": "px",
"default": 48
},
{
"type": "range",
"id": "mobile_stat_text_size",
"label": "Mobile statistic text size",
"min": 12,
"max": 20,
"step": 1,
"unit": "px",
"default": 14
}
],
"blocks": [
{
"type": "stat",
"name": "Statistic",
"settings": [
{
"type": "text",
"id": "number",
"label": "Number",
"default": "87%"
},
{
"type": "textarea",
"id": "text",
"label": "Statistic text",
"default": "of customers experience this problem."
}
]
},
{
"type": "benefit",
"name": "Benefit",
"settings": [
{
"type": "textarea",
"id": "text",
"label": "Benefit text",
"default": "Support better results with a simple daily solution."
}
]
}
],
"presets": [
{
"name": "Branded Product Story",
"blocks": [
{
"type": "stat",
"settings": {
"number": "87%",
"text": "of customers say they experience this problem."
}
},
{
"type": "stat",
"settings": {
"number": "65%",
"text": "still experience slow results."
}
},
{
"type": "benefit",
"settings": {
"text": "Support better results without unnecessary complexity."
}
},
{
"type": "benefit",
"settings": {
"text": "Improve recovery and everyday performance."
}
},
{
"type": "benefit",
"settings": {
"text": "Designed with your customers in mind."
}
}
]
}
]
}
{% endschema %}
- Save the File: Click Save.
- Add the Section in Theme Editor:
- Go to Online Store > Themes > Customize.
- Navigate to your Product template.
- Click Add section in the left sidebar.
- You should now see "Branded Product Story" (or whatever name you gave it) as an option. Select it.
- Customize Away! Now, you can use the Theme Editor's sidebar to fill in your headings, descriptions, statistics, and benefits, and tweak all the design settings like colors, spacing, and typography, without touching any code. Remember to set your brand color to #0B283D or your desired shade.
Final Thoughts: Making Your Story Count
No matter which implementation method you choose, remember NoahMueller's excellent advice on making your story section effective. Always provide context for your stats – '87% of customers experience this problem' is much more powerful than just '87%'. Prioritize mobile experience, ensuring your compelling narrative doesn't inadvertently push vital purchase options off-screen. And critically, once you've implemented your new section, take the time to monitor its performance. Are your add-to-cart rates improving? Is revenue per session up? A/B testing can be invaluable here to truly understand if your branded story is adding confidence and converting more customers. Building a strong brand presence isn't just about good products; it's about telling a compelling story, and with these techniques, you're well on your way to doing just that on your Shopify store!