I need help to set up bullet points for my webpage

Shopify Discussion

Topic summary

A Shopify store owner requested help customizing bullet points in their website’s second rich text section. They wanted to replace standard bullets with green Roman numeral icons (I-IV) from UXWing and align the text to the left.

Solution provided:

  • Add custom CSS code to the theme’s CSS file (theme.css or base.css)
  • Use CSS pseudo-elements (::before) to display custom icon images
  • Target specific list items with nth-child selectors

Issue encountered:
The initial code affected both rich text sections instead of just the second one.

Resolution:
The helper provided updated CSS with a more specific selector (.section-template--19273389670629__rich_text_CD47dF-padding) that targets only the second rich text block. This successfully resolved the issue.

The original poster confirmed the solution worked and was advised to mark the answer as solved. They also mentioned receiving contact from scammers after posting.

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

This is my site (https://psykologihjemmet.no/)/) I want other bullet points under the second rich text. I also want the text to be aligned to the left.
These are the bullet points I want in order from 1-4:
1 Roman Number One Round Green icon SVG Vector & PNG Free Download | UXWing
2 Roman Number Two Round Green icon SVG Vector & PNG Free Download | UXWing
3 Roman Number Three Round Green icon SVG Vector & PNG Free Download | UXWing
4 Roman Number Four Round Green icon SVG Vector & PNG Free Download | UXWing

1 Like
2

Hi @Robmaster ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.rich-text__text {
  text-align: left;
}

.rich-text__text ul {
  list-style-type: none;
  padding-left: 0;
}

.rich-text__text ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.rich-text__text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.rich-text__text ul li:nth-child(1)::before {
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/education-school/roman-number-one-round-green-icon.png');
}

.rich-text__text ul li:nth-child(2)::before {
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/education-school/roman-number-two-round-green-icon.png');
}

.rich-text__text ul li:nth-child(3)::before {
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/education-school/roman-number-three-round-green-icon.png');
}

.rich-text__text ul li:nth-child(4)::before {
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/education-school/roman-number-four-round-green-icon.png');
}

Thanks!

image
image531Ă—366 11.8 KB

1 Like
3

It worked, but it also messed up my first rich text

4

I only want it on my seond rich text, not the first :innocent:

5

On the second rich text, sorry for not spelling right

6

Hi @Robmaster ,

Replace the above code with this code.

.section-template--19273389670629__rich_text_CD47dF-padding .rich-text__text {
  text-align: left;
}

.section-template--19273389670629__rich_text_CD47dF-padding .rich-text__text ul {
  list-style-type: none;
  padding-left: 0;
}

.section-template--19273389670629__rich_text_CD47dF-padding .rich-text__text ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.section-template--19273389670629__rich_text_CD47dF-padding .rich-text__text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.section-template--19273389670629__rich_text_CD47dF-padding .rich-text__text ul li:nth-child(1)::before {
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/education-school/roman-number-one-round-green-icon.png');
}

.section-template--19273389670629__rich_text_CD47dF-padding .rich-text__text ul li:nth-child(2)::before {
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/education-school/roman-number-two-round-green-icon.png');
}

.section-template--19273389670629__rich_text_CD47dF-padding .rich-text__text ul li:nth-child(3)::before {
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/education-school/roman-number-three-round-green-icon.png');
}

.section-template--19273389670629__rich_text_CD47dF-padding .rich-text__text ul li:nth-child(4)::before {
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/education-school/roman-number-four-round-green-icon.png');
}

Thanks!

1 Like
7

Super! It worked! Thank you so much

1 Like
9

@Robmaster

Please mark it as Solution.

Thanks!

10

(post deleted by author)

11

What have you been doing to get traffic on your store?

12

How do I mark it? I am pretty new to this. I also noticed that a lot of scammers have contacted me after writing here. Got any advice?

1 Like
13

@Robmaster here is the little step to complete your set up my friend i will keep it up from where your partner stop now are you ready to mark it ?

14

@Robmaster
You want to place 4 custom bullet points under the second rich text block on your homepage using green Roman numeral icons (I, II, III, IV).

15

Hello @Robmaster ,

The solution I provided should have an “Accept as Solution” button below or beside it, please mark it.

Thank you!