tdscre
September 23, 2024, 5:47pm
1
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
September 23, 2024, 5:52pm
2
Hey @tdscre
I’m unable to locate this part on your website, can you share the exact URL?
Best Regards,
Moeed
tdscre
September 23, 2024, 5:53pm
3
Moeed
September 23, 2024, 6:10pm
4
Hey @tdscre
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
tdscre
September 23, 2024, 6:53pm
5
.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%);
}
this codes icon is design wise a bit nice but it shows it in the left side of the screen why ??
tdscre
September 23, 2024, 6:55pm
6
I really appreciate your help, but this one is showing for every part. I only wanted to show and the three bullet points.
tdscre
September 23, 2024, 6:57pm
7
and a circle in the background would be nice and a more decent checkmark like this one for example
