Bullet Points in Product Description Not Displaying

Store Design
,
1

I cannot for the life of me figure out why the bullet points aren’t showing up under the product description tabs. They show up in the editor when I’m creating the description. I have tried other solutions given to other users that suggested pasting a code into the “theme.scss.liquid” section in the edit code area under “assets” but I don’t appear to have a theme.scss.liquid page under the assets section.

Please help!

What I’m entering:

Sarrahhlee_0-1728076811526.png
Sarrahhlee_0-1728076811526.png612×367 13.7 KB

What I’m getting:

Sarrahhlee_1-1728076875186.png
Sarrahhlee_1-1728076875186.png1002×480 13.2 KB

2

Hi @Sarrahhlee :waving_hand: It’s probably the themes styling.

Always remember other people we cannot see what you see or just know what you know.

Provide inspectable publicly-accessible urls https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408

3

hi @Sarrahhlee ,

To display bullet points in the product description on the storefront when you write the product descriptions in Shopify Admin, you need to use proper HTML formatting, as Shopify uses HTML to render the content.

Here are the specific steps:

Step 1: Use HTML formatting in the product description

When editing the product description in Shopify Admin, you can insert bullet points by using HTML tags.

  1. Go to Shopify Admin.
  2. Navigate to Products and select the product you want to edit.
  3. In the Description section, switch to the HTML editing mode by clicking the <> or Show HTML button (if available).
  4. Paste the following HTML code to create a bullet point list:
  • The
      tag is used to start an unordered list.
    • The
    • tag is used to create each bullet point item.
    Description of your product...

   - Content of row 1

   - Content of row 2

   - Content of row 3

Description of your product...

   - Content of row 4

   - Content of row 5

   - Content of row 6

    Step 2: Ensure CSS displays the bullet points

    If the HTML code is correct but the bullet points still don’t appear on the storefront, it might be due to your theme’s CSS not properly formatting the list. You can add the following CSS to make sure the bullet points show up correctly.

    1. Go to Online Store > Themes > Edit Code.
    2. Find the main CSS file of your theme. Depending on the theme, this might be named theme.css, styles.scss.liquid, or something similar.
    3. Open the file and add the following CSS code at the bottom:
    .product-description ul {
   list-style-type: disc; /* Ensure bullet points are used */
   margin-left: 20px; /* Add space to the left */
}

.product-description li {
   margin-bottom: 10px; /* Add space between list items */
}

    Step 3: Check the storefront

    After adding the HTML code to the description and updating the CSS, check your storefront to see if the bullet points are displaying correctly.

    If you encounter any issues, let me know which theme you’re using, and I can provide more specific assistance!

    Hope it helps!!