Image With Text Issue (Dawn Theme)

Image With Text Issue (Dawn Theme)

dreamtechzone_5
Shopify Partner
676 1 100

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

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 2 (2)

DaisyVo
Shopify Partner
4402 488 580

Hi @dreamtechzone_5 

 

You can use Custom Liquid block, the result will be as shown

 

DaisyVo_0-1740929297384.png

<div>
<img src="https://i.imgur.com/nEmzxM3.png"/>
</div>

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
dreamtechzone_5
Shopify Partner
676 1 100

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

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