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
Now
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>
Hi @dreamtechzone_5 , I'm happy to assist you with this. Please could you send me the URL for store and I can assist you with this build. It is simple to do, but more complicated to explain in detail.
I'm happy to send you a loom video explaining what I did after the fact in case you are interested in learning.
Hi @dreamtechzone_5 ,
It seems that the product page no longer has this loading circle section. Could you enable it again so I can check it for you?
Mageplaza | Top-Rated Shopify Agency | Trusted by 230,000+ worldwide merchants
If our suggestion works for you, please give it a Like or mark it as a Solution!
Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025