How Do I Add Sections That Look This?

How Do I Add Sections That Look This?

Jman4
Tourist
12 0 4

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?

Example1.pngExample2.png

Replies 6 (6)

DaisyVo
Shopify Partner
3434 393 475

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>



DaisyVo_0-1738772028322.png


And enter the desired image link here
https://prnt.sc/AFUs24ux7rqA

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

DaisyVo
Shopify Partner
3434 393 475

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>

 

DaisyVo_1-1738772304923.png

 

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

LizHoang
Shopify Partner
774 87 117

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

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

Check our Joy Rewards & Loyalty Program

DaisyVo
Shopify Partner
3434 393 475

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!

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
Jman4
Tourist
12 0 4

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!

PageFly-Richard
Shopify Partner
4902 1100 1776

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.