Custom bullet point icons for product description

Technical Q&A
1

Hi, can anyone instruct me on how I can replace the standard bullet points (black dots) with a custom icon (either a png or inline SVG icon) for my product description bullet lists?

I am using Turbo theme.

Here’s an example of the desired result:

Screen Shot 2021-05-29 at 19.52.29.png
Screen Shot 2021-05-29 at 19.52.29.png230×115 4.17 KB

any help much appreciated!

2

Hello, @vivame

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

3

Hi I have sent you my site details in a pm, thank you very much for having a look. I found one way using a PNG, by uploading it as a file and pasting the image URL in to the product description and it looks ok but I am not sure if that is the best way to do this?

4

@vivame On which product page?

5

Hi @vivame ,

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Assets > styles.css and paste this at the bottom of the file:

.product_section .description ul {

list-style-image: url(‘{{ ‘custom-icon.png’ | asset_url }}’);

}

With custom-icon.png uploaded in Assets.

6

Hey, thank you that code worked, however I need to limit the size to width 12px by height 12px, can you tell me how I can add those styles? Also if I have an SVG of the icon should I use that or just use the PNG from assets folder? Many thanks

7

Hi @vivame ,

#1: Set width for image: Change code:

.product_section .description ul {

list-style-image: url(“{{ ‘custom-icon.png’ | asset_img_url: ‘12x12’ , crop: ‘center’ }}”);

}

#2: Set svg: Please upload the svg file in Assets and change code:

.product_section .description ul {

list-style-image: url(“{{ ‘custom-icon.svg’ | asset_img_url: ‘12x12’ , crop: ‘center’ }}”);

}

Hope it clear to you.

8

Perfect thank you so much for your help

9

Would this be the same for the dawn theme?
I am looking to have custom bullet points on our product descriptions and on a few of our content pages

Thanks