Unlocking Your Shopify Smile Theme: How to Add a Branded Product Story Section with Custom Code or the Theme Editor
Hey there, fellow store owners! I recently stumbled upon a fantastic discussion in the Shopify community that really hit home for anyone looking to make their product pages pop. Our friend saqlain1 was asking about adding a custom, branded story section to their "Smile theme" – specifically, they wanted a section with text, statistics, and bullet points, all styled with their brand color (that lovely #0B283D, by the way!). It's a common challenge, and the community came through with some brilliant solutions.
Creating a compelling product story isn't just about pretty pictures; it's about connecting with your customers, building trust, and showing them why your product is the solution they need. As one of the initial posts in the thread wisely pointed out, a good story section can "add confidence" and truly enhance the customer journey, especially on mobile where scannability is key. Let's dive into how you can achieve this on your own Shopify store, drawing from the expert advice shared.
Two Powerful Ways to Add Your Branded Product Story
The community offered a couple of great paths, ranging from a full-blown customizable section to a quick-and-dirty custom liquid snippet. Both have their merits, depending on how much flexibility you need.
Option 1: The Fully Customizable "Branded Product Story" Section (Recommended for Flexibility!)
This approach, detailed by devcoders, is probably the most robust and user-friendly in the long run. It involves creating a new section file in your theme code, which then magically appears as a drag-and-drop option in your Shopify Theme Editor. This means you get to update content, colors, and even layout settings without ever touching a line of code again!
How to Implement the Full Custom Section:
- Access Your Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme, click Actions > Edit code.
- Create the Section File: Under the Sections directory, click Add a new section. Name the file
branded-product-story.liquid. - Paste the Code: Delete any existing code in the new file and paste the entire code block provided by devcoders below. Make sure to copy everything from
{% liquid ... %}to{% endschema %}.
{% 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."
}
}
]
}
]
}
Once you've saved that file, you're good to go! Head over to your Theme Editor (Online Store > Themes > Customize), navigate to the page where you want to add the section (like a product page template), click Add section, and you'll find "Branded Product Story" as a new option. From there, you can customize everything:
- Headings & descriptions
- Images (even if saqlain1 didn't want them, the option is there!)
- Statistics (like 87% / 65%)
- Benefit points
- Your brand color
#0B283D, accent color, background color, and border colors - Font sizes, image border/radius, desktop & mobile spacing, and typography
This is a super powerful way to maintain a consistent, branded look across your store without repetitive code edits. Here's a peek at what the section looks like in the editor:
Option 2: Quick & Easy Custom Liquid Snippets
If you're looking for a quicker way to get text, stats, and bullets onto a page without creating a whole new theme section, v.marychenka offered a fantastic solution using the existing "Custom Liquid" section. This is particularly handy if your "Smile theme" is the Nexa preset, as they noted.
How to Use a Custom Liquid Snippet for Text & Stats:
- Duplicate Your Theme First! Before making any code changes, always duplicate your live theme (Actions > Duplicate). This creates a safe backup. Shopify Support generally won't troubleshoot custom forum code, so having a backup is crucial.
- Access the Theme Editor: Go to Online Store > Themes > Customize.
- Navigate to Your Page Template: Use the page drop-down at the top (it usually says "Home page") to select the product template where you want to add this section.
- Add Custom Liquid Section: Click Add section in the left sidebar and choose Custom Liquid.
- Paste the Code: Paste the following HTML and CSS code into the Custom Liquid section's input field.
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
- Customize Content: Change the sample text like "Your headline here" and "87%" to your actual content. The CSS automatically applies the brand color
#0B283Dto the text and stats, keeping it perfectly branded. - Save and Position: Click Save and then drag the section to your desired position on the page.
v.marychenka also shared a code snippet for a comparison card, which is another great example of what you can do with a Custom Liquid section:
Generic
Point one
Point two
Point three
Your brand
Point one
Point two
Point three
Important Considerations for Your Product Story
Beyond just getting the code in place, remember the excellent advice from the original post: every number and statistic you use should "earn its space." If a stat comes from a study, make sure to cite it and explain what it measures. Avoid big, unsupported figures that just look like proof without context. For mobile users, keep your section scannable – think a strong headline and a few short benefits first, with longer explanations coming after the purchase choice. And critically, always check that your new story section doesn't push vital elements like price, variants, or the "Add to cart" button too far down the page.
After you've implemented your new branded story section, don't forget to measure its impact. Compare your mobile add-to-cart rate and revenue per session against the previous page version. This will give you concrete data on whether your product story is truly building confidence and driving conversions, or if it's just adding to the scroll. Whether you're just starting your Shopify journey or looking to refine your existing store, these community-driven solutions show just how powerful a well-crafted product story can be. If you're looking to build a new Shopify store, incorporating these kinds of branded sections from the start can give you a real edge!