How to remove full details on featured product on shopify home page

Store Design
, ,

Topic summary

A user working with Shopify’s Debut theme wants to remove detailed product descriptions from the featured product section on their homepage, as it appears too wordy.

Two CSS solutions were provided:

  1. Via theme.scss.liquid file:

    • Navigate to Online Store > Themes > Edit code > Assets
    • Open theme.scss.liquid
    • Add CSS code targeting .featured-product .product-single__description with display: none !important;

  2. Via base.css/style.css/theme.css:

    • Access the same theme editor path
    • Locate the appropriate CSS file in the Assets folder
    • Add similar CSS code at the bottom, specifically targeting the product description element
    • Save changes

Both solutions use CSS to hide the description element while keeping the featured product visible. The issue remains open with no confirmation of which solution worked.

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

I am using the debut theme

I have my “featured product” on my homepage but it lists all the details and looks very wordy. Is there a way to remove all the details from the featured product on the home page in the debut theme?

my website is: www.thefuzzysprout.com

Thank you!

1 Like
2

Hi @FS1949

Go to your Online store > Themes > Edit code > Assets > open theme.scss.liquid file, add this code at the bottom

.index-section--featured-product .product-single__description { display: none !important; }

Screenshot_7.jpg
Screenshot_7.jpg1179×904 56.2 KB

3

Hi @FS1949

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#shopify-section-1628823367e26e0417 .product-single__description.rte {
    display: none !important;
}

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