How to Show a Featured Image on Collection Pages and Hide It on Product Pages

By default in Shopify, the first product media you upload becomes the featured image on collection pages and the homepage. The second image is usually shown on hover. In some cases, you may want to change the featured image but avoid displaying it on the product page itself. Since Shopify does not allow you to set a separate featured image for products, and because these are always tied to the first two images in the product media, achieving this without an app is not possible. This is where Rubik Variant Images comes in to help. In this guide, I’ll show you the fastest and simplest way to get it done, and you can apply it seamlessly on any Shopify theme, including Dawn, Horizon, and Premium themes.

First, install Rubik Variant Images & Swatch from the Shopify App Store. While our app is primarily built for multiple variant images and swatches, it also comes with additional features you can take advantage of. After installing, complete the onboarding process and move on to setting up your first product.

At this stage, assign all product images to their corresponding variant options, but leave the images you want to use as featured images unassigned. (If you have hover enabled, leave 2 images unassigned; if not, 1 image is enough.) Also, make sure that you assign all common images and don’t leave any images that you want to show on the product page unassigned, because we will hide the unassigned images.

Next, scroll down to the Advanced Settings section. Here, disable the second option called “Overwrite image orders in Admin (recommended)”. Since you will manually arrange the order of images, you need to turn off Rubik’s automatic order logic.

Once done, save your settings and follow the Activate Theme steps to enable Rubik Variant Images on your Shopify theme.

Next, open the Variant Image Settings panel on the left and set “Hide unassigned images” to Yes. Once this feature is enabled, the two images you left unassigned will be hidden from the product page.

Finally, although these images are now hidden on the product page, we still need to make sure they are used as the featured image. As mentioned earlier, Shopify automatically sets the first image in your product media as the featured image, and in some cases, the second image is used for hover.

To finalize this setup, go to your Shopify Admin, open the product you are working on, and scroll down to the Product Media section (where you upload product images). Simply reorder your images so that the hidden ones are placed first in the sequence. After saving, Shopify will use these images as your featured (and hover) images on collection pages and the homepage, while keeping them hidden on the product page.

That’s it! From now on, your featured images will display on collection pages and the homepage exactly as you want, while staying hidden on the product page. This gives you full control over how your products are presented across your store without any coding required.

You can also use our app to show only relevant variant images on the product gallery and customize your variant selector with color/image swatches.

FAQ