Image With Text Issue (Dawn Theme)

Image With Text Issue (Dawn Theme)

dreamtechzone_5
Shopify Partner
593 1 91

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 

 

Mushroom-Coffee-with-6-Adaptogenic-Mushrooms-–-Bd-Coffee-Shop-03-02-2025_09_56_PM.png

 

What I want

Natural-Moisturizer-Shea-Butter-Hydrate-Nourish-Skin-Zuva-Shea-Butter-03-02-2025_05_07_PM.png

 

 

 

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>

Replies 3 (3)

wildlangosta
Shopify Partner
50 8 10

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. 

 

 

Don't forget to mark as solution if this helped.
Want a faster website? Check out Shopify Speed Secrets - FREE.
Looking for a Full-service Shopify Agency to Skyrocket your Business Growth?? Visit our website.
dreamtechzone_5
Shopify Partner
593 1 91

Store: https://bdcoffeeshop.myshopify.com/

Password: Admin

mageplaza-cs
Shopify Partner
394 32 67

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