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
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025