Change Bullet list type - Multirow section

Store Design

Topic summary

A Shopify store owner wants to replace default bullet points with custom checkmark images in a multirow section on their homepage.

Initial Approach:

  • Added CSS code to the multirow section’s “Custom CSS” field
  • Used ul li:before pseudo-element with a background image
  • The visual result appears correct in preview

Problem:

  • When attempting to save, an error occurs preventing the changes from being applied
  • The user tried adding the code to the “style” section of multirow.liquid but it didn’t work

Proposed Solution:

  • Another user (ehammer33) suggested alternative CSS targeting ul li directly instead of using :before
  • The revised approach uses background-image on the list items themselves with specific positioning and sizing properties

Status: The discussion remains open, awaiting confirmation whether the suggested CSS modification resolves the save error.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hey Shopify experts,

On my homepage, I have a multirow section. What I would like is change the type of custom bullets for this section only.

I have added the following code in the “Custom CSS” part of the multirow section.

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

ul li:before {
  content: "";
  display: inline-block;
  height: 20px;
  width: 20px;
  background-image: url(https://cdn.shopify.com/s/files/1/0743/1051/7048/files/check-mark.png?v=1679800148);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 1rem;
}

Capture.PNG
Capture.PNG1870×654 170 KB

It gives the right result (see image above) but when I try to save it, it gives me the following error :

Capture.PNG
Capture.PNG553×175 11.7 KB

I would need help to correct the css code so that it would let me save it or another solution like putting the code somewhere else (I have tried to add in the “style” section of the multirow.liquid but is does not work).

Thanks a lot for your help,

Fred

2

Try the changes here:

ul {
  display: inline-block;
  list-style-type: none;
  padding-left: 0;
}
ul li {
  background-image: url("https://cdn.shopify.com/s/files/1/0743/1051/7048/files/check-mark.png?v=1679800148");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 0 50%;
  padding-left: 30px;
  background-repeat: no-repeat;
}