HTML List Style Does Not Display (Theme)

The instructions in the section apply to you if you are implementing themes and you are implementing a theme created using the SuiteCommerce Base Theme (2018.1 release) as a baseline.

This topic explains how to correct the theme manually using the theme developer tools. Because you cannot patch a theme and you cannot make changes to a published theme, you have three options, depending on your implementation.

• If the theme exhibiting this behavior is a published theme and you want to make the changes yourself, you must create a new theme using the theme developer tools, applying the new code as described in this section.

• If the theme is owned by you, you can make changes to your theme using the theme developer tools as described in this section.

• If this is a published theme and you do not want to make this change manually, you must wait until the theme publisher provides an update or use a different theme.

This fix requires adding some code to the theme’s existing Sass files. This step is the same if you own the theme or not. If you do not own the theme, the developer tools prompt you to create a new one when you deploy your changes.

You can download the code samples described in this procedure here: HtmlListStyleNotDisplaying-Themes.zip

Note:

Any themes created using the SuiteCommerce Base Theme (2018.2 release and later) already include this fix.

Step 1: Fetch the Active Theme

To make the change, the first step is to fetch the theme files from NetSuite and place them in your local developer environment. This step assumes that you have already set up your local developer environment and are using the applicable theme developer tools. See Set Up the Commerce Developer Environment for more details.

To fetch the theme:

1. Ensure that the theme exhibiting this behavior is activated on a domain associated with your site. See Manage Themes and Extensions for details.

2. Open a command line or terminal.

3. Access the top-level theme development directory you created when you downloaded the developer tools.

4. Enter the following command:

   gulp theme:fetch

5. Follow the prompts to access your account, website, and the domain that currently has the theme activated.

Step 2: Customize the Theme

The next step is to customize your theme by editing two .scss files.

To customize the theme:

1. In your theme development source code, navigate to the following location:

   <THEME_DEV_TOOLS_DIRECTORY>/Workspace/<THEME_NAME>/Modules/BaseSassStyles@X.Y.Z/Sass/base

   In this example, X.Y.Z represents the version of the BaseSassStyles module in your theme.

2. Open _base.scss and add the following lines to the end of file:

                     .cms-content ul, .cms-content ol {
      margin-left: $sc-margin-lv4;
   }
   
   .cms-content ul li {
      list-style: circle;
   }
   
   .cms-content ol li {
      list-style: decimal;
   } 
   
                   

3. Save the file.

4. Navigate to the following location:

   ../Modules/ProductDetails@X.Y.Z/Sass

   In this example, X.Y.Z represents the version of the ProductDetails module in your theme.

5. Open _product-details-information.scss and add the following lines to the end of file:

                     .product-details-information-tab-content-container ul,
   .product-details-information-tab-content-container ol  {
      margin-left: $sc-margin-lv4;
   }
   
   .product-details-information-tab-content-container ul li {
      list-style: outside;
   }
   
   .product-details-information-tab-content-container ol li {
      list-style: decimal;
   } 
   
                   

6. Save the file.

Step 3: Deploy Your Changes

This step involves deploying your changes to a NetSuite account and activating on a domain. The steps are the same, regardless of the state of your theme, but the developer tools perform different actions, as described below:

• If you own the theme, the developer tools prompt you to include a new revision number. You can later update any bundles that include the theme for publication.

• If you do not own the theme, the developer tools prompt you to create a new one. This process results in a new theme that is based on the original, but includes your customizations. These changes do not affect the existing theme.

Important:

After you deploy the theme, you must activate the update to apply your changes to a domain.

To deploy changes:

1. In your local developer environment, open a command line or terminal and access the top-level theme directory.

2. Run the following command:

   gulp theme:deploy

3. Follow the prompts to confirm your account, website, and other information about your theme, as required.

   If you are customizing a published theme, the developer tools prompt you to create a new theme.

4. After deployment is completed, activate the theme on a domain. See Manage Themes and Extensions for details.

5. Confirm your results.

   Upon successful deployment, the HTML list (<li> and <ul>) styles should display on your webstore.

   For more information:

   • To use theme developer tools, see Develop Themes.

   • To create bundles for a theme, see Bundle Themes and Extensions as SuiteApps.

Related Topics

HTML List Styles Do Not Display

General Notices