Big Cartel Theme Support

How do I display full width product images on the product page?

How do I display full width product images on the product page?

Styling the default product area

The default product area is the standard main content of your product pages, i.e. your product images on the left and your product description and add to cart controls on the right. Full width product images will need to be inserted above or below this area. However, before we get to that, it is important to consider how you would like your default product area to appear after the full width images are in place.

Following are some options available for styling the default product area in preparation for the addition of full width product images:

1. Keep the default layout

You could leave the default layout as it is, but it is worth considering how the duplicate product images - i.e. the full width images you are about to add as well as the standard product images - may be confusing to potential customers.

2. Display one product image only

Using the same method detailed in our article How do I use an image for my thumbnails that will not be displayed on my product pages? you can hide all but one of the product images in the default product area by adding the following to your custom style coding area - see Where do I add custom style code?:

/* Remove all but first image from product page */
.single.product .images-wrap li.count-2,
.single.product .images-wrap li.count-3,
.single.product .images-wrap li.count-4,
.single.product .images-wrap li.count-5 {
	display: none;
}
/* Remove image thumbnail area from product page */
.single.product .images-nav {
	display: none;
}
.single.product .images-wrap > .inner {
	padding: 0;
}

Note the additional styles included above that remove the product image thumbnail navigation, as well as the padding underneath its location, allowing the single remaining image to take up the entire area of the default product image area.

The single image you choose to leave in place does not have to be the first image. By changing the count numbers in the above CSS you can have the 2nd, 3rd, 4th or 5th image display instead. For example, if we wanted the 2nd image to be the only remaining image, we leave li.count-2 out of the CSS instead of li.count-1:

/* Remove all but first image from product page */
.single.product .images-wrap li.count-1,
.single.product .images-wrap li.count-3,
.single.product .images-wrap li.count-4,
.single.product .images-wrap li.count-5 {
	display: none;
}
/* Remove image thumbnail area from product page */
.single.product .images-nav {
	display: none;
}
.single.product .images-wrap > .inner {
	padding: 0;
}

3. Remove the default product image area

The default product image area can be removed completely by adding the following to your custom style coding area - see Where do I add custom style code?:

/* Remove image area from product page */
.single.product .images-wrap {
	display: none;
}
.single.product .details-wrap {
	width: auto;
}

This will result in a full width product description and add to cart area. This will not look ideal in most cases, and it should also be considered that once text exceeds a certain width it becomes harder to read.

To address the full width description area, you can add a max-width attribute to the previous CSS as follows:

/* Remove image area from product page */
.single.product .images-wrap {
	display: none;
}
.single.product .details-wrap {
	width: auto;
	max-width: 600px;
}

You can adjust the max-width value as needed being sure to use a whole number followed by px; You could also add a margin attribute to move the description area to the middle of the page:

/* Remove image area from product page */
.single.product .images-wrap {
	display: none;
}
.single.product .details-wrap {
	width: auto;
	max-width: 600px;
	margin: 0 auto;
}

As an alternative to adding the max-width and the margin attributes shown above, you could keep the full width description area and split it into columns using the method detailed in the article Shortcodes - Product page specific shortcodes This is a good option when you have a lot of text in your product descriptions.

Adding the full width product images

To add the full width product images to the product page we use either an x-ic-before-product or x-ic-after-product insert content page, depending upon whether we want the images to appear before or after the default product area. Refer to Shortcodes - Product page specific shortcodes for details on these insert content methods and a general introduction to the insert content method if needed.

Note, if you already have a x-ic-before-product or x-ic-after-product page, do not create another one. Instead you add your full width product image code to the existing page of your choice.

For our example, let’s choose the x-ic-before-product insert content page to display the full width images before the default product area. We haven’t created an x-ic-before-product page in the past, so in this case we create a new page in our Big Cartel admin and title it x-ic-before-product.

Next we switch the page edit mode to HTML - see How do I switch to HTML edit mode? - and we add the following code:

[[gallery columns="1"]]
{% for image in product.images %}{{ image | product_image_url | constrain: '5000', '5000' }}
#link=none
{% endfor %}[[/gallery]]

Here we have used the [[gallery]] shortcode - see Shortcodes - Image galleries - with the columns option set to 1 to create full width images. You could change this columns option and add others for a different effect.

To populate the [[gallery]] shortcode with the product image URLs, we have used Big Cartel’s template code - see Big Cartel's Themes support article - to cycle through the product images and output the image URL.

Big Cartel’s template code also includes options that can be helpful in fine tuning your results. For example, let’s add an offset value to our {% for %} loop to skip the first image:

[[gallery columns="1"]]
{% for image in product.images offset:1 %}{{ image | product_image_url | constrain: '5000', '5000' }}
#link=none
{% endfor %}[[/gallery]]

[[clearspace height="40"]]

Note that we also added a [[clearspace]] shortcode - see Shortcodes - Add or remove space - after the images in this example. This is an easy way to create space between the full width images and the following default product area (since we are inserting the images before the default area in our example).

The more familiar you become with the shortcodes and other tools built into your Aarcade theme, the more options you will discover to further customise your full width product images. For example, if we wanted to ensure that our images stretch to the very edges of the browser window we might add a [[fullwidth]] shortcode wrapper:

[[fullwidth]]
[[gallery]]
{% for image in product.images %}{{ image | product_image_url | constrain: '5000', '5000' }}
#link=none
{% endfor %}[[/gallery]]
[[/fullwidth]]

[[clearspace height="40"]]

If we wanted to display a slideshow instead of a gallery, we would use the [[slideshow]] shortcode:

[[fullwidth]]
[[slideshow]]
{% for image in product.images %}{{ image | product_image_url | constrain: '5000', '5000' }}
{% endfor %}[[/slideshow]]
[[/fullwidth]]

[[clearspace height="40"]]

Don’t forget to click the Done and Save links to apply your changes in the Big Cartel admin area.

For instructions on all shortcodes, creating custom styles and more you can browse the relevant sections of this support site or use the search tool at the top of the page.

AarcadeHow do I display full width product images on the product page?