Customize ::marker -> Make the list dots smaller squares

Store Design
,

Topic summary

A user sought to customize list markers in their Shopify store by making the default dots appear as smaller squares.

Initial Solution:

  • Navigate to Online Store > Themes > Assets folder
  • Open the main CSS file (main.css, base.css, style.css, or theme.css)
  • Add CSS targeting the accordion content: list-style-type: square !important;

Size Reduction:
When asked about reducing the square size further, the solution involved using the ::marker pseudo-element:

.accordion__content ul li::marker {
    font-size: 8px;
    line-height: 1;
}

Outcome:
Both solutions successfully implemented. The discussion is resolved, with the user confirming the code worked as intended for their collapsible content sections.

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

Sorry wrong spelling. Check this one to reduce.

.accordion__content ul {
    list-style-type: square !important; 
}

.accordion__content ul li::marker {
    font-size: 8px; 
    line-height: 1;
}

And Save.

Result:

Made4uoRibe_0-1727009161347.png
Made4uoRibe_0-1727009161347.png360×268 4.62 KB

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

1 Like