Changing Bullet Point Shape (or to Image)

Store Design
, , , , ,

Topic summary

A Shopify store owner wanted to replace standard bullet points in product descriptions with custom images (specifically, a light blue checkmark SVG). The goal was to apply this styling consistently across all product descriptions.

Initial Solution:
A community member provided CSS code that:

  • Removes default list styling
  • Uses the ::before pseudo-element to insert a custom background image
  • Targets a specific custom liquid section class
  • Adjusts positioning and spacing for proper alignment

The code successfully replaced bullets with the desired checkmark image.

Extension Request:
The original poster then asked how to apply the same styling to multi-column elements (used for side-by-side layouts).

Final Solution:
The helper modified the CSS by changing the target class from the custom liquid section to .multicolumn-card__info, maintaining the same styling approach.

Outcome:
Both implementations worked successfully. The store owner can now use custom bullet point images in both product descriptions and multi-column layouts without manual customization for each product.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello!

Would like to be able to customize bullet point shape/size/color (or to an .svg/jpg image) for use in product descriptions.

We would like this to apply to all product descriptions so as we are writing the description and create a list we can set the correct bullet point design.

Website - www.danceddiction.com

This is what our current descriptions look like -

Bullet Points - Standard.png
Bullet Points - Standard.png1403Ă—340 40.1 KB

But we would like to change the bullet points to something larger and more similar to this:

Eo_circle_light-blue_checkmark.svg.png
Eo_circle_light-blue_checkmark.svg.png768Ă—768 10.9 KB

I have found some previous discussions and tried to implement but I haven’t been able to , as well this code
Previous Discussion

CSS Code

This would be for the PRODUCT DESCRIPTION - although I think I could adjust things if I needed to alter the product template page and insert a different custom liquid section. Please

1 Like
2

Hi @Danceddiction

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.section-template--18442698817791__custom_liquid_DRC3zf-padding .rte ul {
  list-style: none;
  padding-left: 1.5em; 
}

.section-template--18442698817791__custom_liquid_DRC3zf-padding .rte ul li {
  position: relative;
  padding-left: 2em; 
  margin-bottom: 0.5em;
}

.section-template--18442698817791__custom_liquid_DRC3zf-padding .rte ul li::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.25em; 
  height: 1.25em;
  background-image: url('https://community.shopify.com/c/image/serverpage/image-id/573011i5E8757C42D4041F3/image-dimensions/111x111?v=v2'); 
  background-size: contain;
  background-repeat: no-repeat;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

This worked thank you! Just doing some experimenting. What would I need to change in the code in order for it to occur on a list created on a multi-column element? Multi-column elements are great because they come up side to side and I don’t have to do as much customization.

Take a look at this image below - where the bullet point is made from dynamic sources in a multicolumn

multicolumn bullet point.png
multicolumn bullet point.png1575Ă—472 22.2 KB

This test is not done on a public page but on this template which we are building but not used yet - sample preview here

4

You just need to change the class for the multicolumn.

.multicolumn-card__info .rte ul {
  list-style: none;
  padding-left: 1.5em; 
}

.multicolumn-card__info .rte ul li {
  position: relative;
  padding-left: 2em; 
  margin-bottom: 0.5em;
}

.multicolumn-card__info .rte ul li::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.50em;
  width: 1.25em; 
  height: 1.25em;
  background-image: url('https://community.shopify.com/c/image/serverpage/image-id/573011i5E8757C42D4041F3/image-dimensions/111x111?v=v2'); 
  background-size: contain;
  background-repeat: no-repeat;
}

And Save.

Result:

Made4uoRibe_0-1746133947004.png
Made4uoRibe_0-1746133947004.png1197Ă—296 12.4 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Thank you this was perfect and worked out exactly as we need!