Big Cartel Theme Support

How do I use an image for my thumbnails that will not be displayed on my product pages?

How do I use an image for my thumbnails that will not be displayed on my product pages?

In some cases you may wish to use product images you have styled and cropped for the best appearance in the thumbnail grid, yet you do not want these images to be displayed on the product page.

Upload your thumbnail image

The first product image - as well as the second image, if you have enabled second image display in your theme options - will always be used for the thumbnail grid. Once you have created your thumbnail image(s), upload them to your products in the standard manner per Big Cartel's product support article.

Once the images are uploaded, you can click and drag them to the first (and second, if applicable) position. Save your product changes as you go.

Once complete, your thumbnail specific images should be displayed in the thumbnail grid as expected.

Removing the thumbnail images from the product pages

To remove the thumbnail images from your product pages, navigate to your custom style coding area - see Where do I add custom style code?

To remove just the first image, add the following custom CSS:

/* Remove first image from product page */
.single.product .images-wrap li.count-1 {
	display: none; 
}

To remove the first and second image, add the following custom CSS:

/* Remove first and second image from product page */
.single.product .images-wrap li.count-1,
.single.product .images-wrap li.count-2 {
	display: none; 
}

Click the Done button and then the Save link when you have finished editing your CSS.

Targeting specific categories or products

In some cases you might not want to hide the first product images for every product in your shop. Using your web inspector to view the .single.product tag on a product page..

<article id="big-colourful-print" class="single product category-prints category-prints-screen-printed zoom-type-modal" itemscope itemtype="http://schema.org/Product">

..we see that we can target specific product names via the id or specific categories via the classes.

So, in this example, if we wanted to target only the product named Big Colourful Print, we would add the id to our CSS style as follows:

/* Remove first image from product page */
#big-colourful-print.single.product .images-wrap li.count-1 {
	display: none; 
}

If, instead, we wanted to target all of the products in the Prints product category, we would add the relevant class to our CSS style as follows:

/* Remove first image from product page */
.single.product.category-prints .images-wrap li.count-1 {
	display: none; 
}

For more info on creating custom CSS see How do I create custom style code?

AarcadeHow do I use an image for my thumbnails that will not be displayed on my product pages?