How can I add custom bullet points to my homepage?

Store Design
,
1

Hi there everyone,

I’m wanting to add custom bullet points to a section on my homepage that describes what my product is. Would someone please be able to help me/tell me where I can create my bullet points and what code I need to put in for them to show up on the homepage as I’m totally lost here!

Below is the style of bullet point I want to use:

Bullet Points

2

@wjgreen

About the bullet code, you can refer this snippet

https://codepen.io/hajududat/pen/mrxNXV

About where you can put code, then you paste it to theme.css or base.css files that hosted in your theme code

3

Thanks for the quick reply!

What side from the snippet you shared do I copy?

Also what do you recommend adding the code into. The theme.css or the base.css?

4

I don’t know which theme you are using, I guess that your theme has theme.css or base.css. You can put this code to one of 2 files

$main_font: 'Roboto';
$main_color: #ff6600;
ul {
      font-family: $main_font;
      font-size: 13px;
      line-height: 1.5em;
      margin: 5px 0 15px;
      padding: 0;
      li {
            list-style: none;
            position: relative;
            padding: 0 0 0 20px;
      }
}
ul.circle-checkmark {
      li {
            &::before {
      content: ""; 
      position: absolute; 
      left: 0; 
      top: 2px; 
      border: solid 8px $main_color;
      border-radius: 8px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
            }
    &::after {
      content: ""; 
      position: absolute; 
      left: .25%;
      top: 5px;
      width: 3px;
      height: 6px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
      }
}

And use HTML code where you want


	- Circle Checkmark Bullet

	- Circle Checkmark Bullet

	- Circle Checkmark Bullet
5

Sorry I don’t know what you mean by the HTML code. What is that and where do I put it?

6

@wjgreen
put below code into theme.liquid file before closing </body tag

and use below class in which paragraph you want to add

circle-checkmark