Adding Custom Green Checkmark Bullet Points

[tdscre]

Hi there!

I’m looking to add green checkmarks (not the iOS emoji) to the bullet points on my product page next to the metafield content, similar to an example I’ve seen. Does anyone know an easy way to do this? I’d like the checkmarks to look clean and professional.

[Moeed]

Hey @tdscre 

I'm unable to locate this part on your website, can you share the exact URL?

Best Regards,

Moeed

[tdscre]

https://hane313.myshopify.com/products/bett-mit-bettkasten-costa?_pos=1&_psq=costa&_ss=e&_v=1.0

PW: 0313

[Moeed]

Hey @tdscre 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.section__block.reading-width.rte p:before {
    content: '\2713';
    color: green;
    font-size: 17px;
    position: absolute;
    left: 0;
    top: 0;
}
.section__block.reading-width.rte p {
    list-style-type: none;
    position: relative;
    padding-left: 25px;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[tdscre]

<style>
.section__block.reading-width p:not(:first-of-type) {
padding-left: 30px;
position: relative;
}
.section__block p::before {
content: '✔';
font-size: 12px;
color: white;
background-color: #28a745;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
</style>

this codes icon is design wise a bit nice but it shows it in the left side of the screen why ??

[tdscre]

I really appreciate your help, but this one is showing for every part. I only wanted to show and the three bullet points.

[tdscre]

and a circle in the background would be nice and a more decent checkmark like this one for example