Mastering Your Product Gallery: How to Hide the First Image on Shopify

Hey there, fellow store owners!

I recently stumbled upon a really interesting discussion in the Shopify community that I just had to share. It started with JustinasR asking a pretty common question: "How do I hide the first main product image in the product photo gallery?"

It sounds simple, right? But as the thread unfolded, it became clear there are a few nuances and different ways to approach this, depending on why you want to hide that first image. Our awesome community members, like Ploqo, DiegoCosta2428, Priyasha, and others, jumped in with some fantastic insights and solutions. Let's break down what we learned, because chances are, you might face this exact dilemma too!

Why Would You Want to Hide the First Product Image?

Before diving into the "how," it's worth considering the "why." JosephTran from DitalTek brought up a great point, asking JustinasR to clarify their expectations. Sometimes, that first image is meant for something specific – maybe it's a lifestyle shot perfect for collection pages, but not ideal as the main hero image on the product page itself. Or perhaps you've got a specific variant image you want to feature prominently without it being the "first" in the gallery order.

Solution 1: The Easiest Fix (No Code Needed!)

This is often the best starting point, and it's what DiegoCosta2428 and Priyasha highlighted first. If you simply don't want that particular image to be the first one seen in your product gallery (or anywhere else), you don't need any code at all!

1. Go to your Shopify admin.
2. Navigate to Products and select the product you want to edit.
3. Scroll down to the Media section.
4. You can either:
   • Drag and drop: Simply click and drag a different image to the first position. This will make it the new default main image.
   • Delete it: If you don't need that image at all, tick its checkbox and click "Remove."

Why this is great: This method is super clean because it updates the image across your entire store – not just the product page gallery. It'll change what shows on collection pages, in search results, and even in social media previews. It’s a complete fix if the image genuinely shouldn't be the primary one.

Solution 2: Hiding with Custom CSS (When the Image Needs to Stay)

What if you need that first image to exist in your product media (maybe it's tied to a variant, or you're using it elsewhere via Liquid), but you just don't want it visible in the main product gallery? This is where CSS comes in handy. However, as Sam_Expertise001 and DiegoCosta2428 pointed out, CSS selectors are often theme-specific, so a snippet that works for one theme might not work for another.

For Roam Theme Users (and a general approach for others):

JustinasR was using the Roam 5.0.0 theme, and Ploqo and jowel-66 provided a fantastic, tested CSS solution for it. This code hides both the main image and its corresponding thumbnail in the gallery strip, making the second image appear as the first.

Here's the code and steps:

1. Go to your Shopify admin.
2. Navigate to Online Store > Themes.
3. Next to your current theme, click the three dots (...) and select Edit code. (Ploqo's images show "Edit theme" but it's usually "Edit code" or "Customize" then "Edit code" from the dots).
   
4. Click Theme settings (the gear icon on the left sidebar in the Customizer).
   
5. Scroll down and click Custom CSS.
   
6. Paste the following code into the Custom CSS box:
   

   [data-product-gallery-figure="0"],
   [data-product-gallery-thumbnail="0"] {
     display: none !important;
   }

   
   
7. Click Save.
   

Before:

After:

Important considerations for CSS:

• The image is still loaded in the page's HTML; it's just hidden visually. This means it still contributes to page load size, albeit minimally.
• The first image will still appear on collection pages, in the cart, and as social media previews, because Shopify treats it as the product's featured image. If you want to change that, you'll need to use Solution 1 (reorder/delete).
• If you're not on the Roam theme, you'll need to find the correct CSS selectors for your theme. Right-clicking the image and selecting "Inspect" in your browser's developer tools is your best friend here! Look for classes or data attributes related to the product media list or individual media items.

Solution 3: Skipping with Liquid (For the Code-Savvy)

For those comfortable with diving into theme code, DiegoCosta2428 mentioned a cleaner approach: using Liquid to prevent the first image from being output in the HTML at all. This is more efficient than CSS because the image isn't even loaded by the browser for the gallery. You'd typically find the product gallery loop in files like sections/main-product.liquid or a snippet like snippets/product-media-gallery.liquid, depending on your theme.

You'd look for a loop that iterates through product.media and add an offset: 1 to it. For example, a common loop might look something like this:

{% for media in product.media offset: 1 %}
  
{% endfor %}

Why this is more advanced: It requires identifying the correct file and loop in your theme, and a small mistake could affect your store's display. Always duplicate your theme before making Liquid changes!

Final Thoughts & Best Practices

The community thread really highlighted that there's no single "right" way to hide an image; it really depends on your goal. If you want to completely remove an image from the "first spot" across your entire store, the no-code reordering method is your best bet. If you need it present in the backend but hidden on the product page gallery, CSS is a viable option (just be mindful of its limitations). And for a truly clean, efficient removal from the gallery's HTML output, Liquid is the way to go for developers.

Remember, before making any code changes, it's always smart to duplicate your theme. That way, you've got a safe rollback point if anything goes sideways. And hey, if you're just starting your journey with building your own Shopify store, don't be afraid to experiment! The community is always there to help, and learning these little tweaks can make a big difference in how your store looks and functions.

Happy customizing!