How can I hide variant images on Debutify theme?

Technical Q&A

Topic summary

A user seeks code to hide variant images on a Debutify Shopify theme, wanting only the primary image visible on product pages.

Proposed Solution:

  • Navigate to Online Store → Theme → Edit code
  • Open Asset → theme.scss.liquid
  • Add CSS code at the bottom to hide variant thumbnails

Issue with Solution:
Another user tested the provided code but reports it hides bottom thumbnails entirely rather than selectively hiding images not associated with the currently selected variant. They want to:

  • Keep bottom thumbnails visible
  • Only hide images that don’t correspond to the active variant selection

Current Status:
The discussion remains unresolved, with one participant asking if a working solution was found. The original code snippet appears corrupted/reversed in the thread, making implementation unclear.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
2

@checkoutfirst

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.product-single__thumbnails .grid__item {
    display: none;
}

.product-single__thumbnails .grid__item:first-child {
    d: block;
}
1 Like