Hi, does anyone know how to make it like this?
Its kinda banner style for image and text, and the text layout is exactly like this. Sit beside for desktop and stacked for mobile
@veluxe1 ,
Yes this is a fairly common layout and can be built in Shopify without an app.
Its essentially a 50/50 split section with the content on the left and the image on the right. On desktop, both columns sit side by side and on mobile they stack vertically.
If you are using a Shopify 2.0 theme like Dawn you can achieve something similar with the Image with Text section and a bit of custom CSS for the spacing and typography.
If you want the exact design a custom Liquid section with Flexbox or CSS Grid is the best approach.
Hi @veluxe1 ,
Here is the most efficient way to set this up:
Set up the Layout (Desktop Split / Mobile Stacked)
- In your Shopify theme customizer, add the built-in Image with Text section.
- Set the image layout to the Right (desktop alignment).
- If your theme supports it, set the section width to full-width or remove the grid padding to get that clean split look.
Thanks!
You may need to create a customized section to do that if your theme does not support it. You can try using AI on your theme to create that section for you.
Best regards,
Dan from Ryviu: Reviews & Loyalty app
Hello @veluxe1
I have created this section for you.
You can download the section file from this link:
https://drive.google.com/file/d/11smY_XOtpO2z-uDglzyN28ysd-7Jq0lJ/view?usp=sharing
After downloading the file:
-
Open the file in any code editor.
-
Copy all the code from the file.
-
Go to Online Store > Themes.
-
Click the three dots (…) beside your active theme.
-
Click Edit code.
-
Under the Sections folder, create a new section file.
-
Name the file:
hydration-shimmer.liquid -
Paste the copied code into that file and save it.
-
Then go to Online Store > Customize and add the new section to your page.
This should give you an image and text banner layout where the image and text sit side by side on desktop and stack nicely on mobile.
Another easier option is to use an app if you don’t want to work with code. You can check Slider Revolution & Sections With this app, you can create this type of image + text banner, hero section, column layout, and responsive mobile/desktop section without manually coding the full layout.
Hi @veluxe1
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
(post deleted by author)
Hi @veluxe1
Please follow the below code and steps to create image banner.
<section class="hydration-section">
<div class="hydration-grid">
<div class="hydration-content">
{% if section.settings.heading != blank %}
<h2>{{ section.settings.heading }}</h2>
{% endif %}
<div class="info-table">
{% for block in section.blocks %}
<div class="info-row">
<div class="info-label">{{ block.settings.label }}</div>
<div class="info-value">{{ block.settings.value }}</div>
</div>
{% endfor %}
</div>
</div>
<div class="hydration-image">
{% if section.settings.image %}
{{
section.settings.image
| image_url: width: 1600
| image_tag:
loading: 'lazy',
widths: '600,800,1200,1600',
class: 'cover-image'
}}
{% endif %}
</div>
</div>
</section>
<style>
.hydration-grid{
display:grid;
grid-template-columns:1fr 1fr;
min-height:620px;
}
.hydration-content{
background:#f6f4ef;
padding:70px 50px;
display:flex;
flex-direction:column;
justify-content:center;
}
.hydration-content h2{
font-size:54px;
line-height:1.08;
font-weight:400;
color:#6f675f;
margin:0 0 60px;
}
.info-table{
width:100%;
border-top:1px solid #ddd;
}
.info-row{
display:grid;
grid-template-columns:180px 1fr;
border-bottom:1px solid #ddd;
padding:18px 0;
align-items:center;
}
.info-label{
font-size:14px;
font-weight:700;
color:#6f675f;
text-transform:uppercase;
}
.info-value{
text-align:right;
font-size:16px;
color:#6f675f;
}
.hydration-image{
height:100%;
}
.cover-image{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
@media(max-width:768px){
.hydration-grid{
grid-template-columns:1fr;
}
.hydration-image{
order:-1;
height:420px;
}
.hydration-content{
padding:40px 24px;
}
.hydration-content h2{
font-size:34px;
margin-bottom:35px;
}
.info-row{
grid-template-columns:1fr;
gap:8px;
}
.info-value{
text-align:left;
}
}
</style>
{% schema %}
{
"name": "Hydration Split",
"settings": [
{
"type": "textarea",
"id": "heading",
"label": "Heading",
"default": "Potent HYDRATION with a soft SHIMMER finish."
},
{
"type": "image_picker",
"id": "image",
"label": "Right Image"
}
],
"blocks": [
{
"type": "row",
"name": "Table Row",
"settings": [
{
"type": "text",
"id": "label",
"label": "Label",
"default": "GOOD FOR:"
},
{
"type": "text",
"id": "value",
"label": "Value",
"default": "All skin types"
}
]
}
],
"presets": [
{
"name": "Hydration Split",
"blocks": [
{
"type": "row",
"settings": {
"label": "GOOD FOR:",
"value": "All skin types"
}
},
{
"type": "row",
"settings": {
"label": "FEELS LIKE:",
"value": "Lightweight, milky texture"
}
},
{
"type": "row",
"settings": {
"label": "LOOKS LIKE:",
"value": "A sheer glow with soft pink shimmer"
}
},
{
"type": "row",
"settings": {
"label": "AWARD:",
"value": "Seal of Acceptance™ from the National Eczema Association"
}
}
]
}
]
}
{% endschema %}
Step 1: Open Your Shopify Admin
Go to Online Store → Themes
Find your published theme.
Click … (three dots) → Edit code.
Step 2: Create a New Section
In the left sidebar, find the Sections folder.
Click Add a new section.
Name it: hydration-split and add below code
Step 3: Add the Section to a Template
Click Done