Why are my bullet points appearing above the text in product descriptions?

Store Design

Topic summary

A Shopify store owner encountered a formatting issue where bullet points in product descriptions appeared above their associated text instead of beside it. The problem was visible on the storefront but not in the product description editor.

Root Cause:
The issue stemmed from CSS styling that controlled list item positioning.

Solution Provided:
Adding custom CSS code to the theme’s base.css file resolved the problem:

.rte ul, .rte ol {
   list-style-position: outside;
}

Implementation Steps:

  • Navigate to Online Store > Themes > Edit code
  • Open the base.css file in the Assets folder
  • Add the CSS snippet at the bottom
  • Save changes

Multiple users confirmed this fix successfully corrected bullet point alignment in both product descriptions and blog posts. The solution applies globally across the store once implemented.

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

Most bullet points in the product description are appearing above the text that they should be next to.

Link to store preview: https://74mcqh2zikrc34fw-79473279284.shopifypreview.com/products_preview?preview_key=80b90a2f0e37ea0b9083f70e727b5707

I’ve attached images of how it looks on the store, and how it looks in the product description editor

editor.png
editor.png599×654 77.9 KB

bullet.png
bullet.png582×323 10.6 KB

2

Hello, can you click the code icon of your description editor. And paste send it to me?

Si in the top right corner.

dannyelo_1-1689098543517.png

3

Revolutionize the way you clean your tech.

Introducing the NanoCleaner™ Multi-tool Cleaner Kit – the ultimate all-in-one cleaning solution. With a high-density soft brush, small spray bottle, keycap puller, fiber fleece strip, and cleaning pen, this compact device tackles dirt and grime with ease. Its eco-friendly design, made from recyclable materials, ensures long-lasting performance while reducing waste. Experience versatile, convenient, and sustainable cleaning with the NanoCleaner™.

  • Maximize the lifespan of your treasured accessories.

  • Recover precious hours by discarding conventional cleaning approaches.
  • Reduce environmental impact with a reusable and eco-friendly solution that eliminates the disposal of plastic or paper after every cleaning.

The microfiber cloth is safe to use on any screen.

4

This fixed my problem

.rte ul, .rte ol {
   list-style-position: outside;
}
3 Likes
5

Could you assist me with finding this button and how to correct the same error as the original post with the bullet points being above the sentence once on the actual storefront please

6

To apply this fix to all your blogs:

  • In your Shopify Admin, go to Online Store > Themes.
  • Under the Current theme, click the Actions dropdown and select Edit code.
  • In the Assets folder, locate and open the base.css file.
  • Scroll to the bottom of the base.css file.
  • Add the following code:
.rte ul, .rte ol {
   list-style-position: outside;
}
  1. Click Save in the top-right corner.
2 Likes
7

This worked to fix the weird intending of bullets on my Shopify blog, and made the bullets align with the text, thank you so much!

8

What was the solution that fixed your bullet points?