How to remove the sku from being listed on the product grid page debut theme

Store Design
, , , , ,

Topic summary

Goal: remove the SKU text from product tiles on collection (grid) pages in the Shopify Debut theme.

Key suggestions:

  • Template-level approach: Edit the product item Liquid template, wrap the SKU in a new unique class/id, then hide it via CSS. Rationale: the SKU doesn’t have a unique selector by default.
  • CSS-only (most recent): Online Store > Themes > Edit code, open theme.scss.css, and append:
    dl:has(.product-price) { color: transparent; pointer-events: none; margin-top: -24px !important; }
    This hides the targeted content visually and adjusts spacing; a screenshot shows the SKU removed.

Context/terms:

  • Liquid: Shopify’s templating language for theme files.
  • theme.scss.css: the Debut theme’s main stylesheet file.

Media/attachments: Images are included to show the SKU on the grid and the result after applying the CSS.

Status: No confirmation from the original poster and no accepted solution indicated; discussion appears open.

Summarized with AI on December 26. AI used: gpt-5.
1

I am looking to remove the sku from my collection grid pages, I don’t rember if this was something that I had added so if anyone knows the name of the file and what code to look to remove that would be great. I am using debut theme

see the following image from this page to see a visual representation of what im looking to remove

https://chelseasbeads.com/collections/new-products

remove.jpg
remove.jpg1174×828 139 KB

2

@Matt_Dubinsky - sku do not have any unique class or id, I recommend to go to product item liquid file, add some unique class / id to sku and then using css we can hide it

3

Hi @Matt_Dubinsky

You should try following the instructions below

Step 1: Go to Admin → Online store → Theme > Edit code

BSSCommerceB2B_0-1719028386318.png
BSSCommerceB2B_0-1719028386318.png400×195 26.3 KB

Step 2: Search for the file theme.scss.css and add this code snippet to the end of the file

BSSCommerceB2B_1-1719028395978.png
BSSCommerceB2B_1-1719028395978.png399×133 19.5 KB

dl:has(.product-price) {
    color: transparent;
    pointer-events: none;
    margin-top: -24px !important;
}

Result

BSSCommerceB2B_2-1719028463046.png
BSSCommerceB2B_2-1719028463046.png1455×739 209 KB

If it’s helpful, please like and mark it as a solution, thank you