All things Shopify and commerce
I want to add a section to my store that looks like this; how do I do it? Is there a specific theme or app this person used in order to do that?
Hi @Jman4
Add this code to your Custom liquid block
<style>
#anivia {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #fff;
}
#anivia .container {
display: flex;
align-items: center;
}
#anivia .text {
font-size: 24px;
font-weight: bold;
margin-right: 40px;
}
#anivia .comparison-table {
display: flex;
border-radius: 10px;
overflow: hidden;
border: 1px solid #ddd;
}
#anivia .column {
padding: 15px;
background-color: #fff;
}
#anivia .features {
background-color: #f9f9f9;
font-weight: bold;
}
#anivia .icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
#anivia .check {
color: green;
}
#anivia .cross {
color: red;
}
#anivia .elephant-column {
background-color: #fde4e4;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
}
#anivia .elephant-image {
width: 50px;
height: 50px;
margin-bottom: 10px;
}
</style>
<div id="anivia">
<div class="container">
<div class="text">Why The Anxious Elephant?</div>
<div class="comparison-table">
<div class="column features">
<div>Moving Chest Function</div>
<div>90-Day Money Back Guarantee</div>
<div>Results Rooted In Extensive R&D</div>
<div>Lifetime Warranty</div>
<div>100% Hypo-Allergenic Materials</div>
</div>
<div class="column elephant-column">
<img src="elephant.png" alt="Elephant" class="elephant-image">
<div class="icon check">✔</div>
<div class="icon check">✔</div>
<div class="icon check">✔</div>
<div class="icon check">✔</div>
<div class="icon check">✔</div>
</div>
<div class="column">
<div class="icon cross">✖</div>
<div class="icon cross">✖</div>
<div class="icon cross">✖</div>
<div class="icon cross">✖</div>
<div class="icon cross">✖</div>
</div>
</div>
</div>
</div>
And enter the desired image link here
https://prnt.sc/AFUs24ux7rqA
HI @Jman4
Do the same for this photo
<style>
#ani-custom {
font-family: Arial, sans-serif;
}
#ani-custom .container {
display: flex;
align-items: center;
max-width: 900px;
margin: auto;
padding: 20px;
}
#ani-custom .title {
font-size: 24px;
font-weight: bold;
margin-right: 20px;
}
#ani-custom .survey-results {
display: flex;
flex-direction: column;
gap: 20px;
}
#ani-custom .survey-item {
display: flex;
align-items: center;
gap: 15px;
border: 1px solid #f0f0f0;
padding: 10px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
#ani-custom .percentage {
width: 50px;
height: 50px;
border-radius: 50%;
border: 4px solid #f5a623;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 16px;
color: #f5a623;
}
#ani-custom .text {
font-size: 14px;
color: #333;
}
</style>
<div id="ani-custom">
<div class="container">
<div class="title">We Surveyed Our Customers And...</div>
<div class="survey-results">
<div class="survey-item">
<div class="percentage">97%</div>
<div class="text">Felt a noticeable improvement in their overall mood and mental state.</div>
</div>
<div class="survey-item">
<div class="percentage">90%</div>
<div class="text">Reported a marked improvement in sleep quality, highlighting the Anxious Elephant's ability to create a conducive environment for restful sleep.</div>
</div>
<div class="survey-item">
<div class="percentage">96%</div>
<div class="text">Expressed that the rhythmic sounds facilitated a quicker transition into relaxation during moments of heightened anxiety.</div>
</div>
</div>
</div>
</div>
Hi @Jman4, thanks for reaching out.
Regarding your request, I checked and would like to inform you that each Shopify theme has a different layout and customization options. If the current theme doesn’t meet your display preferences, you might consider looking for other themes that better align with your expectations.
I hope my information is helpful to you.
Liz
Hi @Jman4
Did my answer help you solve your problem?
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!
It has worked! But it's too difficult to customize because 2 of the circles are too small, and I also need to change the text alignment. Thank you for helping me, though!
This is Richard from PageFly - Shopify Page Builder App
To create the two sections above, you can use Liquid code or, more simply, the PageFly Page Builder app.
With PageFly, you can easily create them without coding. If you encounter any difficulties, PageFly also has a 24/7 support team ready to assist you anytime! 😊
Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
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