As of 28th May 2016, only the most current version of Aarcade themes will receive personal support and updates – read more…

  Back to Top

How do I change my Product image size and number of columns?

Filed in Home and products pages

The product image size and images-per-row settings for your theme are controlled via Custom Options. It is therefore important that you first read and understand the article How do I use the Custom Options for my Big Cartel theme? before referring to the following details.

As with all custom options:

  • Refer to the referenced notes to find the available values and additional information for the custom option
  • Always click the Save link when you have finished editing your custom options

Home Page

To change your Home page image size and images-per-row setting, review your Customize design > Advanced (advanced) – Home page custom options:

{% assign product_image_thumbnail_size = 'small' %}
{% assign scale_crop_to_fit_height = '' %}
{% assign scale_crop_to_fit_position = 'middle' %}

Refer to Custom Option Notes for a list of available values and recommendations on setting these options.

Products Pages

To change the image size and images-per-row setting for all other Products pages, e.g. all products, categories, search results, etc., review your Customize design > Advanced (advanced) – Products – plural, not singular – page custom options:

{% assign product_image_thumbnail_size = 'small' %}
{% assign scale_crop_to_fit_height = '' %}
{% assign scale_crop_to_fit_position = 'middle' %}

Refer to Custom Option Notes for a list of available values and recommendations on setting these options.

Collapsing Thumbnail Heights

Aarcade themes will automatically adjust the height of each row in product thumbnail grids to the minimum possible, while still fitting to the largest image in that row. Product titles and pricing are then displayed in line.

If your product image width/height ratio varies (although we recommend that it does not), this will cause varying white space between the product titles and the bottom of the thumbnail images. If this applies to your shop, you can collapse your thumbnails so that titles are directly under the thumbnails instead of all in line.

To collapse your thumbnails, review your Customize design > Advanced (advanced) – Layout custom option:

{% assign collapse_thumbnail_heights = 'no' %}

Product Page

To change the Product page image size, review your Customize design > Advanced (advanced) – Product – singular, not plural – page custom option:

{% assign product_image_size = 'small' %}

Refer to Custom Option Notes for a list of available values and more information on setting this option.

Please refer to the article Big Cartel theme product image preparation and size for more important information about working with your product images.

Your preferred image size (as explained in this article) will also have a direct affect on the size and/or dimensions of your images on the Home, Products and Product page. For example, applying a portrait preferred size will increase the white space between image grid columns.

Related articles...