Hello. How can I add a section like this to my website? Can someone help me?
Topic summary
Goal: Add an image gallery with accompanying text to a Shopify store using the Dawn theme.
-
Early guidance: This was framed as advanced theme customization; options included hiring help or trying the Theme Editor’s section/block generation (Shopify Magic). Another approach suggested using the built‑in Multicolumn section and applying custom CSS (e.g., remove column padding).
-
Concrete solution: A complete custom Liquid section (featured-images-row.liquid) was shared. It adds up to 5 items, each with image, title, and description, and renders a responsive grid (5 columns on desktop, 2 on mobile) with basic styling.
-
Outcome: The store owner implemented the provided Liquid code and confirmed it achieved the desired result. No further adjustments were requested.
-
Notes: The original post included a screenshot and site URL for context. Multicolumn + CSS remains a lower-code alternative if preferred.
Status: Resolved; no open questions.
1 Like
@voodoowww123 asking for full blown section design is an advanced theme customization way beyond the scope of the forums.
At minimum show your work so far for others to build upon otherwise hire someone.
Consider that peoples time has value and if you cannot assign an ROI to something why spend time any time on it at all.
If you must DIY you can try burning time trying the section generator in the theme editor.
Read the friendly manual your business depends on https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/shopify-magic/generate-blocks
If a theme doesn’t support section/block generation then use a horizon-theme generate a block there then get it transplanted between themes.
Remember others can’t fix something if it never worked or existed in the first place.
You can reach out to me for customization services.
CLICK my profile-pic or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc
You can DIY but will spend time to research and handle it, suggestion for you, you can Using the “Multicolumn” Section of Dawn theme to customize for it. if you don’t familiar with code, just let me know.
1 Like
You can try using a Multicolumn section and then adding Custom CSS to remove the padding from the columns.
1 Like
Here is a complete custom section you can copy-paste into your theme.
Steps
- Go to Online Store → Themes → Edit code
- Open /sections folder
- Click Add new section
- Name it:
featured-images-row.liquid - Paste this code:
<div class="acne-row">
<div class="acne-row__inner">
{% for block in section.blocks %}
<div class="acne-item">
<img src="{{ block.settings.image | img_url: '800x' }}" alt="" class="acne-img">
<h3 class="acne-title">{{ block.settings.title }}</h3>
<p class="acne-text">{{ block.settings.text }}</p>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Image Features Row",
"settings": [],
"blocks": [
{
"type": "item",
"name": "Feature Item",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "textarea",
"id": "text",
"label": "Description"
}
]
}
],
"max_blocks": 5,
"presets": [
{
"name": "Image Features Row",
"category": "Custom"
}
]
}
{% endschema %}
<style>
.acne-row__inner {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 30px;
}
.acne-img {
width: 100%;
height: auto;
object-fit: cover;
}
.acne-title {
margin-top: 15px;
font-size: 14px;
font-weight: 700;
color: #002ab4;
}
.acne-text {
margin-top: 5px;
font-size: 14px;
color: #444;
}
@media(max-width: 768px) {
.acne-row__inner {
grid-template-columns: 1fr 1fr;
}
}
</style>
Best regards,
Devcoder 
2 Likes
Hey, thank you! I already added the liquid and It was what I was looking for! Thank you so much for the help 
1 Like