Shopify themes, liquid, logos, and UX
This is an accepted solution.
Hello @Somehow999
I am showing a example , you make it like this
<section id="hasan112">
<h2>Included in the Box</h2>
<div class="items">
<div class="item">
<img src="brick.png" alt="Quality Bricks">
<p>Quality Bricks</p>
</div>
<div class="item">
<img src="manual.png" alt="Instructions Manual">
<p>Instructions Manual</p>
</div>
<div class="item">
<img src="packaging.png" alt="Exclusive Packaging">
<p>Exclusive Packaging</p>
</div>
</div>
</section>
#hasan112 {
font-family: 'Arial', sans-serif;
text-align: center;
background-color: #f9f9f9;
padding: 20px;
}
#hasan112 h2 {
font-size: 1.5rem;
font-weight: bold;
color: #333;
margin-bottom: 30px;
}
#hasan112 .items {
display: flex;
justify-content: center;
gap: 40px;
}
#hasan112 .item {
text-align: center;
}
#hasan112 .item img {
width: 80px;
height: auto;
margin-bottom: 10px;
}
#hasan112 .item p {
font-size: 1rem;
font-weight: 500;
color: #555;
}
If its helpful Hit Like button & Accept as solution Thanks
This is an accepted solution.
Hello @Somehow999
I am showing a example , you make it like this
<section id="hasan112">
<h2>Included in the Box</h2>
<div class="items">
<div class="item">
<img src="brick.png" alt="Quality Bricks">
<p>Quality Bricks</p>
</div>
<div class="item">
<img src="manual.png" alt="Instructions Manual">
<p>Instructions Manual</p>
</div>
<div class="item">
<img src="packaging.png" alt="Exclusive Packaging">
<p>Exclusive Packaging</p>
</div>
</div>
</section>
#hasan112 {
font-family: 'Arial', sans-serif;
text-align: center;
background-color: #f9f9f9;
padding: 20px;
}
#hasan112 h2 {
font-size: 1.5rem;
font-weight: bold;
color: #333;
margin-bottom: 30px;
}
#hasan112 .items {
display: flex;
justify-content: center;
gap: 40px;
}
#hasan112 .item {
text-align: center;
}
#hasan112 .item img {
width: 80px;
height: auto;
margin-bottom: 10px;
}
#hasan112 .item p {
font-size: 1rem;
font-weight: 500;
color: #555;
}
If its helpful Hit Like button & Accept as solution Thanks
Thank you, bro
Add custom code or custom html block using the customizer
and paste this code there
make sure to replace image urls with actual images or icons link
<div class="cus-container">
<div class="cus-item">
<img src="quality_bricks.png" alt="Quality Bricks">
<p>Quality Bricks</p>
</div>
<div class="cus-item">
<img src="instructions_manual.png" alt="Instructions Manual">
<p>Instructions Manual</p>
</div>
<div class="cus-item">
<img src="exclusive_packaging.png" alt="Exclusive Packaging">
<p>Exclusive Packaging</p>
</div>
</div>
<style>
.cus-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #f8f8f8;
}
.cus-item {
flex: 1;
min-width: 150px;
max-width: 250px;
margin: 10px;
text-align: center;
}
.cus-item img {
width: 100%;
height: auto;
}
</style>
Thank you bro
Hi @Somehow999
Please share the Url of your store and password and the link of the sample store
Best,
Daisy
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025