Changing Bullet Point Shape (or to Image)

[Danceddiction]

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 - 

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


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

[Made4uo-Ribe]

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

• And Save.
• Result:
• 

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

[Danceddiction]

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

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

[Made4uo-Ribe · Accepted solution]

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:

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

[Danceddiction]

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