Change the style of the stats icon ( Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I want to change the style of the stats icon. I want to have the stats icon like the image below. Also, I want to add a line below the last icon. 2 lines have been added above, I want to add a line below the bottom icon as well in all formats. Please help me. Thank you.

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

Password: Admin

Now

What I want

[Pooja-Tiwari]

Hi @dreamtechzone_5 ,
Needs to check code and i will do this for you soo please provide me access of your store.

[LizHoang]

Hi @dreamtechzone_5

To add the line below the bottom icons, you can try this instruction:

You can follow this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

.glowy-stats {
    border-bottom: 2px solid #cfc8c8;
}

result:

Liz

[dreamtechzone_5]

Can the STATS icon style be changed?

[DaisyVo]

Hi @dreamtechzone_5

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.stat-circle::after {
    content: "";
    width: 70px;
    height: 70px;
    background: white;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}
.glowy-stats > .stat-item:nth-child(1) .stat-circle::before {
    content: "97%";
    color: black !important;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}
.stat-circle {
    position: relative !important;
}
.glowy-stats > .stat-item:nth-child(2) .stat-circle::before {
    content: "96%";
    color: black !important;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}
.glowy-stats > .stat-item:nth-child(3) .stat-circle::before {
    content: "93%";
    color: black !important;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

Here is the result:

I hope this helps

Best,

Daisy

[dreamtechzone_5]

I have pasted the code here but it looks like this. I can’t save.