Hello. How can I add a section like this to my website? Can someone help me?
@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.
You can try using a Multicolumn section and then adding Custom CSS to remove the padding from the columns.
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 
Hey, thank you! I already added the liquid and It was what I was looking for! Thank you so much for the help 
Create a Custom Section (Liquid file)
First, create a custom Liquid file to hold the code for the gallery. This will allow you to control the structure and style of the gallery.
Steps:
-
Go to Online Store > Themes.
-
Click on Actions > Edit Code.
-
Under the Sections folder, create a new section and name it
featured-images-row.liquid.
Now, paste the following code into featured-images-row.liquid:
{% stylesheet %}
.featured-images-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem;
}
.featured-images-row__item {
text-align: center;
}
.featured-images-row__image img {
width: 100%;
height: auto;
display: block;
}
.featured-images-row__title {
margin-top: 1rem;
font-weight: 600;
}
.featured-images-row__text {
margin-top: 0.5rem;
color: rgb(var(--color-foreground), 0.75);
font-size: 0.95rem;
}
@media screen and (max-width: 749px) {
.featured-images-row {
grid-template-columns: repeat(2, 1fr);
}
}
{% endstylesheet %}
<div class="page-width">
{% if section.settings.heading != blank %}
<h2 class="title {{ section.settings.heading_size }}">
{{ section.settings.heading }}
</h2>
{% endif %}
<div class="featured-images-row">
{% for block in section.blocks %}
<div class="featured-images-row__item" {{ block.shopify_attributes }}>
{% if block.settings.image != blank %}
<div class="featured-images-row__image">
{{ block.settings.image | image_url: width: 600 | image_tag: loading: 'lazy' }}
</div>
{% endif %}
{% if block.settings.title != blank %}
<div class="featured-images-row__title">
{{ block.settings.title }}
</div>
{% endif %}
{% if block.settings.text != blank %}
<div class="featured-images-row__text">
{{ block.settings.text }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Image row with text",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Section heading"
},
{
"type": "select",
"id": "heading_size",
"label": "Heading size",
"default": "h1",
"options": [
{ "value": "h2", "label": "Small" },
{ "value": "h1", "label": "Medium" },
{ "value": "h0", "label": "Large" }
]
}
],
"blocks": [
{
"type": "item",
"name": "Image item",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "textarea",
"id": "text",
"label": "Text"
}
]
}
],
"presets": [
{
"name": "Image row with text",
"blocks": [
{ "type": "item" },
{ "type": "item" },
{ "type": "item" },
{ "type": "item" },
{ "type": "item" }
]
}
]
}
{% endschema %}
Add it in the Theme Editor
-
Online Store → Themes → Customize
-
Go to the page you want (Home, Page, Product, etc.)
-
Click Add section
-
Select “Image row with text”
-
Add / remove / reorder blocks freely