Adding social proof to your product pages can significantly increase trust and conversion rates. In this tutorial, we'll show you how to add a stylish Verified Testimonials block to your Shopify store using the Dawn theme . This block displays user avatars, names, and a verified icon—all customizable from the theme editor. ✅ Step 1: Open the main-product.liquid file Go to your Shopify Admin. Navigate to: Online Store → Themes → Edit code . Open the file: sections/main-product.liquid . Now add this code exactly as I’ve shown in the video — and yes, make sure to test it on a duplicate theme first! Full Code {%- when 'verified-testimonials' -%} <style> .verified-testimonials-container-{{block.id}} .verified-testimonials-user-icon-img-class { width: {{block.settings.verified_use...
A visually engaging Shopify store helps convert visitors into customers. One of the best ways to enhance your store design is by incorporating a Feature Section with an image and informative cards. This guide will walk you through adding a customizable section that combines a main image with text blocks to highlight key features of your brand or product.
Visually Appealing: A clean layout with a combination of an image and text improves the store’s aesthetic. Flexible Layouts: Choose whether the image appears on the left or right. Easy Customization: Modify colors, padding, and text to fit your brand. Engaging Content: Informative cards allow you to showcase key benefits or features.
Why Use an Image & Info Card Section?
How to Add This Section to Your Shopify Store
Follow these steps to integrate the Image & Info Card Section into your Shopify theme.
Step 1: Add the Code to Your Theme
Go to Online Store > Themes > Edit Code, and under the Sections folder, click "Add a new section". Name it feature-section, then copy and paste the following Liquid code inside:
HTML
<style>
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} * {
border: 0 solid;
box-sizing: border-box;
}
.main-fs-wrapper--{{section.id}} {
display: flex;
flex: 1;
flex-direction: column;
margin: 0;
padding: 0;
letter-spacing: normal;
line-height: 1.15;
tab-size: 4;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} h3,
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} p{
margin: 0;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} svg {
display: block;
vertical-align: middle;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} img {
height: auto;
max-width: 100%;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-main__image {
aspect-ratio: inherit;
border-radius: 16px 16px 16px 16px;
height: 100%;
max-height: inherit;
object-fit: inherit;
width: 100%;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-inner-wrapper--{{section.id}} {
background: #fff;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-inner-wrapper--{{section.id}},
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-container--{{section.id}} {
align-items: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-container--{{section.id}} {
column-gap: 32px;
max-width: none;
min-height: 24px;
padding: 64px;
row-gap: 32px;
width: 100%;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid--{{section.id}} {
align-items: flex-start;
column-gap: 64px;
display: flex;
flex-direction: row;
justify-content: center;
max-width: 100%;
min-height: 24px;
position: relative;
row-gap: 64px;
width: 1200px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid__item--{{section.id}} {
align-items: flex-start;
align-self: stretch;
border-radius: 0 0 0 0;
column-gap: 0;
display: flex;
flex-basis: 0%;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
min-width: 0;
padding: 0 0 40px;
position: relative;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-main-heading--{{section.id}} h3 {
color: {{ section.settings.main_heading_color }};
display: flex;
flex-direction: column;
font-family: Inter;
font-size: 40px;
font-weight: 700;
justify-content: flex-start;
letter-spacing: -.02em;
line-height: 1.2;
margin: 0 0 48px;
max-width: 100%;
padding: 0;
position: relative;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-content--{{section.id}} p{
color: {{ section.settings.block_content_color }};
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-heading--{{section.id}} p{
color: {{ section.settings.block_heading_color }};
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-wrapper--{{section.id}} {
align-items: flex-start;
background: #fff;
border: 1px solid {{ section.settings.block_border_color}};
border-radius: 16px 16px 16px 16px;
column-gap: 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 0 0 8px;
padding: 24px;
position: relative;
row-gap: 16px;
width: 100%;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-wrapper--{{section.id}} {
align-items: center;
align-self: stretch;
column-gap: 8px;
display: flex;
flex-direction: row;
justify-content: flex-start;
position: relative;
row-gap: 8px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-icon--{{section.id}} {
height: 32px;
max-width: 100%;
object-fit: cover;
position: relative;
width: 32px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-heading--{{section.id}} {
font-size: 20px;
font-weight: 700;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-content--{{section.id}},
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-heading--{{section.id}} {
color: #000;
display: flex;
flex-direction: column;
font-family: Inter;
justify-content: flex-start;
line-height: 1.5;
margin: 0;
max-width: 100%;
padding: 0;
position: relative;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-content--{{section.id}} {
font-size: 16px;
font-weight: 500;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid__item--{{section.id}} {
align-self: stretch;
border-radius: 24px 24px 24px 24px;
object-fit: cover;
position: relative;
width: 50%;
}
@media (max-width:1024px) {
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid--{{section.id}} {
column-gap: 32px;
row-gap: 32px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid__item--{{section.id}} {
align-self: stretch;
flex-basis: 0%;
flex-grow: 1;
flex-shrink: 1;
height: auto;
min-width: 0;
padding: 0;
width: auto;
}
}
@media (max-width:768px) {
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-container--{{section.id}} {
column-gap: 32px;
padding: 32px;
row-gap: 32px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid--{{section.id}} {
column-gap: 32px;
flex-direction: column;
height: auto;
row-gap: 32px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid__item--{{section.id}} {
align-self: auto;
border-radius: 24px 24px 24px 24px;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
height: auto;
width: 100%;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid__item--{{section.id}} {
align-self: auto;
height: auto;
width: 100%;
}
}
@media (max-width:575px) {
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-container--{{section.id}} {
padding: 16px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid--{{section.id}} {
column-gap: 32px;
row-gap: 32px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid__item--{{section.id}} {
align-self: auto;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-main-heading--{{section.id}} h3 {
font-size: 32px;
margin: 0 0 24px;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-content--{{section.id}},
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-block-inner-heading--{{section.id}} {
font-size: 16px;
padding: 0;
}
.main-fs-wrapper--{{section.id}}.fs-main-wrapper--{{section.id}} .fs-grid__item--{{section.id}} {
align-self: auto;
height: auto;
}
}
</style>
<div class="main-fs-wrapper--{{section.id}} fs-main-wrapper--{{section.id}}">
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 769px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="fs-inner-wrapper--{{section.id}} section-{{ section.id }}-padding">
<div class="fs-container--{{section.id}}">
<div class="fs-grid--{{section.id}}">
{% if section.settings.image_position == 'left' %}
<div class="fs-grid__item--{{section.id}}">
{% if section.settings.main_image and section.settings.main_image != blank %}
{{
section.settings.main_image
| image_url: width: 1280
| image_tag: class: ' fs-main__image', alt: section.settings.main_image.alt
}}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
{% endif %}
<div class="fs-grid__item--{{section.id}}">
<div class="fs-common-text--{{section.id}} fs-main-heading--{{section.id}}">
<h3>{{ section.settings.main_heading }}</h3>
</div>
{%- for block in section.blocks -%}
<div class="fs-block-wrapper--{{section.id}}">
<div class="fs-block-inner-wrapper--{{section.id}}">
<div class="fs-block-inner-icon--{{section.id}}">
{% if block.settings.icon_image and block.settings.icon_image != blank %}
{{
block.settings.icon_image
| image_url: width: 1280
| image_tag: class: ' fs-main__image', alt: block.settings.icon_image.alt
}}
{% else %}
<img
alt=""
src="https://cdn.shopify.com/s/files/1/0787/1712/4884/files/check-double-line.svg?v=1736579556"
class="fs-main__image"
>
{% endif %}
</div>
<div class="fs-common-text--{{section.id}} fs-block-inner-heading--{{section.id}}">
{% if block.settings.heading != blank %}
<p>{{ block.settings.heading }}</p>
{% endif %}
</div>
</div>
<div class="fs-common-text--{{section.id}} fs-block-inner-content--{{section.id}}">
{% if block.settings.content != blank %}
<p>{{ block.settings.content }}</p>
{% endif %}
</div>
</div>
{%- endfor -%}
</div>
{% if section.settings.image_position == 'right' %}
<div class="fs-grid__item--{{section.id}}">
{% if section.settings.main_image and section.settings.main_image != blank %}
{{
section.settings.main_image
| image_url: width: 1280
| image_tag: class: ' fs-main__image', alt: section.settings.main_image.alt
}}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "Features Section",
"settings": [
{
"type": "textarea",
"id": "main_heading",
"label": "Heading",
"default": "What is Lorem Ipsum?"
},
{
"type": "image_picker",
"id": "main_image",
"label": "Image"
},
{
"type": "select",
"id": "image_position",
"label": "Image Position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "header",
"content": "Color"
},
{
"type": "color",
"id": "main_heading_color",
"label": "Main heading color",
"default": "#000000"
},
{
"type": "color",
"id": "block_heading_color",
"label": "Block heading color",
"default": "#000000"
},
{
"type": "color",
"id": "block_content_color",
"label": "Block content color",
"default": "#000000"
},
{
"type": "color",
"id": "block_border_color",
"label": "Block border color",
"default": "#d1d5db"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top padding",
"default": 0
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom padding",
"default": 0
}
],
"blocks": [
{
"name": "Block",
"type": "block",
"settings": [
{
"type": "image_picker",
"id": "icon_image",
"label": "Icon image",
"info": "You can use icons from this site: remixicon.com"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Lorem Ipsum"
},
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary"
}
]
}
],
"presets": [
{
"name": "Features Section"
}
]
}
{% endschema %}
Step 2: Customize the Section in the Theme Editor
- Go to Online Store > Customize.
- Add the "Feature Section" to any page.
- Upload an image for the main feature.
- Select Image Position (left or right).
- Add Blocks with icons, headings, and descriptions.
- Modify Colors & Padding to match your branding.
Final Thoughts
This Shopify Feature Section is an excellent way to showcase your product’s key features while keeping your store visually attractive and engaging. By following the steps above, you can quickly add a custom, fully responsive section that aligns with your brand’s aesthetic.
Would you like additional modifications, such as animations or hover effects? Let me know! 🚀
Comments
Post a Comment