Shopify themes, liquid, logos, and UX
Hello Everyone!
I have added the image with text section through coding but I want to keep the section as shown in the image below. Please help me. Thank you.
Store: https://bdcoffeeshop.myshopify.com/products/mushroom-coffee-with-6-adaptogenic-mushrooms
Password: Admin
What I want
I have used this code
{% schema %}
{
"name": "Glowy Skin Section",
"settings": [
{
"type": "image_picker",
"id": "glowy_skin_image",
"label": "Upload Image"
}
],
"presets": [
{
"name": "Glowy Skin Section"
}
]
}
{% endschema %}
<style>
.glowy-skin-section {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
background-color: #fff;
}
.glowy-image img {
max-width: 100%;
border-radius: 10px;
}
.glowy-content {
padding-left: 30px;
max-width: 500px;
}
.glowy-title {
font-size: 28px;
font-weight: bold;
color: #000;
display: flex;
align-items: center;
}
.glowy-title svg {
margin-left: 8px;
color: #ff4081;
}
.glowy-stats {
margin-top: 20px;
}
.stat-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.stat-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #1d7c3e;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
margin-right: 15px;
color: #1d7c3e;
}
.stat-text {
font-size: 14px;
color: #333;
}
</style>
<section class="glowy-skin-section">
<div class="glowy-image">
<img src="{{ section.settings.glowy_skin_image | img_url: 'master' }}" alt="Glowy Skin">
</div>
<div class="glowy-content">
<h2 class="glowy-title">The Future is Glowy Skin
</h2>
<div class="glowy-stats">
<div class="stat-item">
<div class="stat-circle">97%</div>
<p class="stat-text">Said the appearance of fine lines and wrinkles have disappeared</p>
</div>
<div class="stat-item">
<div class="stat-circle">96%</div>
<p class="stat-text">Noticed a reduction in the appearance of stretch marks on my belly</p>
</div>
<div class="stat-item">
<div class="stat-circle">93%</div>
<p class="stat-text">Said their skin feels smoother and soft</p>
</div>
</div>
</div>
</section>
You can use Custom Liquid block, the result will be as shown
<div>
<img src="https://i.imgur.com/nEmzxM3.png"/>
</div>
I don't want to add images. I want to add a section for it. After using the code it looks like this but I want to keep it like the image below.
Now
What I want
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025