Hide First Image On Product Page (Dawn Theme)

Store Design

Topic summary

Goal: Hide the first product image (main media) only on product pages in Shopify’s Dawn theme, while keeping it visible on home and collection pages.

Key solutions shared:

  • Dawn 2.3.0 (global hide on product pages): Add to section-main-product.css: .product__media-item:first-child { display: none; }
  • Hide thumbnails (carousel): In base.css, hide first thumbnail with .thumbnail-list…:first-child { display: none !important; } Users noted arrows remained; switching to “stacked” was suggested.
  • Craft theme: Similar base.css thumbnail rule provided.

Per-user follow-ups and limits:

  • Requests to only show the first image (or hide the second) asked for store URLs; no posted final code.
  • Impact theme request not resolved publicly.
  • One user’s attempt hid the main image container instead of the thumbnail; no posted fix.

Collection-specific need:

  • A user wanted the hide applied to a single collection only. The generic CSS affected the whole store. The helper requested staff access and tested on a draft theme; no public code posted.

Latest development (most significant):

  • User implemented JavaScript to hide any product image whose alt equals “hide-on-product-page” on product pages. They now need to also hide that image on collection and cart pages; no solution posted yet.

Status: Partially solved with CSS/JS; collection- and cart-page targeting remains open.

Summarized with AI on December 23. AI used: gpt-5.
47

Hi there, i was able to add code and hide the first image only with the product images that has the alt text ‘hide-on-product-page’

Now when i add to cart, the first image that is hidden shows on the cart page? How can i hide the first image on cart page also?

Screenshot 2024-08-05 at 23.00.31.png
Screenshot 2024-08-05 at 23.00.31.png2880×1619 387 KB

Screenshot 2024-08-05 at 23.01.36.png
Screenshot 2024-08-05 at 23.01.36.png2880×1622 293 KB

Thank you in advance.