How to Add a Benefits Section in Shopify (No Coding needed)
Give your Shopify store a clean “benefits” block you can reuse anywhere, powered by Dynamic sources. Copy–paste two tiny files, bind fields to product metafields, and you’re done. Can be used in all OS 2.0 themes like Dawn and Horizon. More advanced versions (like metaobjects) are coming soon.
What you’ll get
A section you can add to any product template that shows:
- a small icon (SVG recommended)
- a title
- a rich text description
for as many items (“benefits”) as you want. You’ll control the content via Dynamic sources. Once it’s installed, you manage everything in the Theme Editor.
2-Minute Install
You’ll create one section file and one CSS file. That’s it.
1) Add the section file
Online Store → Themes → … → Edit code → Sections → Add a new section
Name it: icons-with-text-blocks.liquid
Paste this into the file:
sections/icons-with-text-blocks.liquid
{{ 'icons-with-text-metaobjects.css' | asset_url | stylesheet_tag }}
{%- comment -%}
Icons + Text (blocks)
---------------------
• Add blocks in the Theme Editor.
• Each block can bind its fields (icon/title/text/link) to Product metafields via Dynamic sources.
• Layout is controlled by CSS variables on the <ul> (columns, gap, icon size).
{%- endcomment -%}
{%- liquid
assign heading = section.settings.heading
assign icon_size = section.settings.icon_size | default: 80
assign cols_desktop = section.settings.columns_desktop | default: 3
assign cols_mobile = section.settings.columns_mobile | default: 1
assign gap = section.settings.gap | default: 24
-%}
<section id="icons-blocks-{{ section.id }}" class="kw-icons-mo color-{{ section.settings.color_scheme }}">
{%- if heading != blank -%}
<h2 class="kw-icons-mo__heading">{{ heading }}</h2>
{%- endif -%}
{%- if section.blocks.size > 0 -%}
<ul
class="kw-icons-mo__grid"
role="list"
style="
--cols-desktop: {{ cols_desktop }};
--cols-mobile: {{ cols_mobile }};
--gap: {{ gap }}px;
--icon-size: {{ icon_size }}px;
"
>
{%- for block in section.blocks -%}
{%- if block.type == 'benefit' -%}
{%- assign alt_text = block.settings.icon_alt | default: block.settings.title | escape -%}
{%- assign href = block.settings.link -%}
<li class="kw-icons-mo__item" {{ block.shopify_attributes }}>
{%- if href != blank -%}<a href="{{ href }}" class="kw-icons-mo__card">{%- endif -%}
{%- if block.settings.icon != blank -%}
{{ block.settings.icon
| image_url: width: icon_size
| image_tag:
alt: alt_text,
class: 'kw-icons-mo__icon',
loading: 'lazy',
decoding: 'async'
}}
{%- endif -%}
{%- if block.settings.title != blank -%}
<h3 class="kw-icons-mo__title">{{ block.settings.title }}</h3>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="kw-icons-mo__text">{{ block.settings.text }}</div>
{%- endif -%}
{%- if href != blank and block.settings.link_label != blank -%}
<span class="kw-icons-mo__link">{{ block.settings.link_label }}</span>
{%- endif -%}
{%- if href != blank -%}</a>{%- endif -%}
</li>
{%- endif -%}
{%- endfor -%}
</ul>
{%- else -%}
<p class="kw-icons-mo__empty">{{ section.settings.empty_state }}</p>
{%- endif -%}
</section>
{% schema %}
{
"name": "Icons + Text (blocks)",
"tag": "section",
"class": "section-icons-text-blocks",
"disabled_on": { "groups": ["header", "footer"] },
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "Why you’ll love it" },
{ "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-1" },
{ "type": "range", "id": "icon_size", "label": "Icon size", "min": 24, "max": 400, "step": 4, "unit": "px", "default": 80 },
{ "type": "range", "id": "columns_desktop", "label": "Columns (desktop)", "min": 1, "max": 6, "step": 1, "default": 3 },
{ "type": "range", "id": "columns_mobile", "label": "Columns (mobile)", "min": 1, "max": 3, "step": 1, "default": 1 },
{ "type": "range", "id": "gap", "label": "Gap", "min": 0, "max": 48, "step": 2, "unit": "px", "default": 24 },
{ "type": "inline_richtext", "id": "empty_state", "label": "Empty state", "default": "Add one or more Benefit blocks to show them here." }
],
"blocks": [
{
"type": "benefit",
"name": "Benefit",
"limit": 12,
"settings": [
{ "type": "image_picker", "id": "icon", "label": "Icon" },
{ "type": "text", "id": "title", "label": "Title" },
{ "type": "richtext", "id": "text", "label": "Text" },
{ "type": "text", "id": "icon_alt", "label": "Icon alt text" },
{ "type": "url", "id": "link", "label": "Optional link" },
{ "type": "text", "id": "link_label", "label": "Link label", "default": "Learn more" }
]
}
],
"presets": [
{ "name": "Icons + Text (blocks)", "category": "Content" }
]
}
{% endschema %}
This is what it should look like
2) Add the CSS file
Online Store → Themes → … → Edit code → Assets → Add a new asset → Create a blank file
Name it: icons-with-text-metaobjects.css
Paste this:
assets/icons-with-text-metaobjects.css
/* Icons + Text (blocks)
Simple, theme-friendly defaults. Driven by inline CSS variables set in the section:
--cols-desktop, --cols-mobile, --gap, --icon-size
Scope to the section class to avoid collisions with other components. */
.section-icons-text-blocks .kw-icons-mo {
margin-block: 2.5rem;
padding-inline: 16px; /* side breathing room */
}
@media (min-width: 1024px) {
.section-icons-text-blocks .kw-icons-mo { padding-inline: 24px; }
}
.section-icons-text-blocks .kw-icons-mo__heading {
margin: 0 0 2rem 0;
font-weight: 600;
text-align: center;
}
/* Responsive grid controlled by --cols-mobile / --cols-desktop and --gap */
.section-icons-text-blocks .kw-icons-mo__grid {
display: grid;
grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr));
gap: var(--gap, 24px);
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 768px) {
.section-icons-text-blocks .kw-icons-mo__grid {
grid-template-columns: repeat(var(--cols-desktop, 3), minmax(0, 1fr));
}
}
/* Center the icon; SVGs are ideal and stay crisp */
.section-icons-text-blocks .kw-icons-mo__icon {
width: var(--icon-size); /* visual size from section setting */
height: auto;
display: block;
margin-inline: auto; /* centers horizontally */
}
.section-icons-text-blocks .kw-icons-mo__item {
display: grid;
gap: .5rem;
align-content: start;
}
/* Centered title; description centered by default (flip to left if you prefer) */
.section-icons-text-blocks .kw-icons-mo__title { margin: 0; font-weight: 600; text-align: center; }
.section-icons-text-blocks .kw-icons-mo__text { opacity: .9; text-align: center; }
.section-icons-text-blocks .kw-icons-mo__empty { opacity: .6; }
.section-icons-text-blocks .kw-icons-mo__card {
color: inherit;
text-decoration: none;
display: grid;
gap: .5rem;
}
.section-icons-text-blocks .kw-icons-mo__card:hover .kw-icons-mo__link { text-decoration: underline; }
This is what it should look like
Set up metafields for Dynamic content
We are using metafields saved on each product to define content for the section. Settings → Metafields and metaobjects → Products → Add definition
Add these metafields definitions:
- Benefit 1 Title, Type: Single line text
- Benefit 1 Text, Type: Rich text
-
Benefit 1 Icon, Type: File
- Benefit 2 Title, Type: Single line text
- Benefit 2 Text, Type: Rich text
- Benefit 2 Icon, Type: File
- Benefit 3 Title, Type: Single line text
- Benefit 3 Text, Type: Rich text
- Benefit 3 Icon, Type: File
This is what it should look like when finished
This leaves you with metafields for three different benefits that can be added on every product you want.
Bind content with Dynamic sources (Theme Editor)
Now we will do the actual binding of metafields with the section we just built.
- Customize your product template → Add section → Icons + Text (blocks).
- Click Add block → Benefit (add one per item you want).
- For each block field, click the dynamic source icon (the “database” icon) and bind:
- Icon → a product metafield for your icon (image)
- Title → a product metafield (single line text)
- Text → a product metafield (rich text)
- Set Icon size, Columns, and Gap in the section settings.
Tips: SVG files makes the crispest icons. If you use PNG/JPG etc. make sure you upload images that have 2x the size that you want to display here.
Ta-da! You have yourself a fully working custom section that you can use for your products. In 'products' you scroll down to the metafields section and enter the 9 metafields that are relevant for the given product. This way every product will show different benefits inside this section.
How it works
Section file (icons-with-text-blocks.liquid):
- Declares a repeatable “Benefit” block with fields (icon/title/text/link). Essentially a for loop that checks how many benefit blocks you have added and then show you these blocks.
- Outputs a clean, responsive grid using CSS variables for columns, gap, and icon size. Creating the visual layout that let's you set how many benefits you want horizontally and vertically.
- The Dynamic sources UI links each block field to product metafields, so content changes per product. The types used in the blocks are standar types and therefore gets an option in the theme customizer to connect dynamic sources, like metafields.
CSS-file (icons-with-text-metaobjects.css)
- Handles layout (grid), spacing, and centering.
- Keeps styles scoped to this section so it won’t fight your theme.
- If you want to change the style of the section. This is where you do it.
What’s next (and why you’ll want it)
This article is the beginner-friendly foundation. In the next parts, we’ll cover:
- Better understanding of the code. Build your own sections.
- A Metaobjects version (centralized content objects you can reuse anywhere)
- An Auto mode that reads a List of Metaobjects metafield per product
- Optional links, sorting, and design variants for different themes (Horizon vs Dawn)
Want the next articles by email?
Join the list and we’ll send you the metaobject version + downloadable code snippets as soon as they drop. Sign up in the footer.