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.

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @tdscre 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<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>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs · Accepted solution]

<style>
.section__block.reading-width p:not(:first-of-type) {
    padding-left: 30px;
    position: relative;
}
.media-with-text .section__block p:not(:first-of-type)::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>

[BSS-TekLabs · Accepted solution]

<style>
.section__block.reading-width p:not(:first-of-type) {
    padding-left: 30px;
    position: relative;
}
.media-with-text .section__block p:not(:first-of-type)::before {
    content: '';
    display: inline-block;
    background-image: url('data&colon;image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" width="12" height="12"%3E%3Ccircle cx="8" cy="8" r="8" fill="%2328a745"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M12.207 5.207a1 1 0 00-1.414-1.414L7 7.586 5.207 5.793a1 1 0 00-1.414 1.414l2.5 2.5a1 1 0 001.414 0l4.5-4.5z" fill="white"/%3E%3C/svg%3E');
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

</style>

please try this code again @tdscre 

[BSS-TekLabs]

Hello @tdscre 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

[tdscre]

https://hane313.myshopify.com/products/bett-mit-bettkasten-diana

PW: 0313

[BSS-TekLabs]

Where is this located on your website?

[tdscre]

if u scroll down at a product page down there ... 
i havent filled for everyproduct yet, u can click this product and just scroll down

https://hane313.myshopify.com/products/bett-mit-bettkasten-dimmax

[BSS-TekLabs]

Do you want like this @tdscre ?

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @tdscre 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<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>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[tdscre]

this check mark is pretty nice, but what if i wanna have another one? I will try soon to implement it into the code

[tdscre]

it worked but now it shows a checkmark somewhere else where it shouldnt 

[tdscre]

it shows on the left side now, i like the checkmark really its nice but its shows on the left side .. 

[tdscre]

do u see that on the left side it shows now there tooo

[devcoders]

Hi @tdscre 

Do you want it like this?

Screenshot - https://prnt.sc/Zrk9tnjDj0AK

[tdscre]

now it shows on the left side ... 

[BSS-TekLabs]

Hi, is the problem solved, is there anything else I can help with @tdscre ?

[tdscre]

Hi there, the problem still remains, it is not solved .. 

[BSS-TekLabs · Accepted solution]

<style>
.section__block.reading-width p:not(:first-of-type) {
    padding-left: 30px;
    position: relative;
}
.media-with-text .section__block p:not(:first-of-type)::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>

[BSS-TekLabs]

Can you try this code @tdscre 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[tdscre]

it works, but the problem now is on IOS it shows the black arrow emoji, how can we get rid of that .. 

[BSS-TekLabs]

<style>
.section__block.reading-width p:not(:first-of-type) {
    padding-left: 30px;
    position: relative;
}
.media-with-text .section__block p:not(:first-of-type)::before {
  content: '';
  display: inline-block;
  background-image: url('data&colon;image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" width="12" height="12"><circle cx="8" cy="8" r="8" fill="%2328a745"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.207 5.207a1 1 0 00-1.414-1.414L7 7.586 5.207 5.793a1 1 0 00-1.414 1.414l2.5 2.5a1 1 0 001.414 0l4.5-4.5z" fill="white"/></svg>');
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>

Can you try this code @tdscre 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[tdscre]

now its not visible, how would it be if u give me the code with link to put so i can upload the icon to shopify and then paste the link in it for a custome icon.

[BSS-TekLabs · Accepted solution]

<style>
.section__block.reading-width p:not(:first-of-type) {
    padding-left: 30px;
    position: relative;
}
.media-with-text .section__block p:not(:first-of-type)::before {
    content: '';
    display: inline-block;
    background-image: url('data&colon;image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" width="12" height="12"%3E%3Ccircle cx="8" cy="8" r="8" fill="%2328a745"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M12.207 5.207a1 1 0 00-1.414-1.414L7 7.586 5.207 5.793a1 1 0 00-1.414 1.414l2.5 2.5a1 1 0 001.414 0l4.5-4.5z" fill="white"/%3E%3C/svg%3E');
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

</style>

please try this code again @tdscre 

[tdscre]

Same again....

[BSS-TekLabs]

data&colon;image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" width="12" height="12"%3E%3Ccircle cx="8" cy="8" r="8" fill="%2328a745"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M12.207 5.207a1 1 0 00-1.414-1.414L7 7.586 5.207 5.793a1 1 0 00-1.414 1.414l2.5 2.5a1 1 0 001.414 0l4.5-4.5z" fill="white"/%3E%3C/svg%3E

[BSS-TekLabs]

change this to url('') @tdscre 

[BSS-TekLabs · Accepted solution]

Oh, It's an error because shopify's comment makes the url wrong.

[tdscre]

Can you send me a picture instead I dont know whats the correct version 

[BSS-TekLabs]

This is the exact url but I can't comment on it. can you see the picture?

[BSS-TekLabs]

Or do you have an email address, I will send it to you @tdscre .

[tdscre]

Thank you very much it worked now!!!!

[devcoders]

Hi @tdscre 

Do you want it like this?

Screenshot - https://prnt.sc/Zrk9tnjDj0AK

[tdscre]

Hi there thank u so much, were u able to read my previous messages here