AARFIE SUPPORT

If your Big Cartel theme has a recommended image size, it will be detailed in your theme’s readme file. If your theme does not have a recommended image size, it was not designed around a specific image size.

While Aarfie themes are designed to accommodate varying product image sizes, using the recommended product image size will ensure that your design and layout appearance is at its best.

Regardless of whether your theme has a recommended image size, we strongly suggest that you establish a preferred image size for your product images for optimum design and layout appearance.

Working to your theme’s recommended product image size means that you will need to scale and crop your original product image dimensions before uploading the image to your Big Cartel store.

Note that when we discuss the impact of product image size upon a theme layout, we are generally talking about the products pages (i.e. pages listing multiple products in a grid, such as a category or home page). Product image size has little to no affect upon a theme’s singular product pages.

Image Editing Tool

To edit your images before uploading them to your store, you will need an image editing tool such as Preview or iPhoto for Apple, Paint for Windows, a professional level editing tool such as PhotoShop or an online image editor such as picnik.

Large Images

If your product image size exceeds 1000 pixels wide and / or 1000 pixels high it will be re-sized when you upload it to your store. Working with images outside of these dimensions is therefore pointless and will make editing a longer process due to the additional time it takes your computer to process these larger images.

Your first step should be to re-size your image so that the width and height are no more than 1000 pixels.

Your Recommended Image Size and Width/Height Ratio

To get the best results for your theme, you should re-size and crop your images to the exact dimensions quoted in your theme’s readme file. However, in some cases you may wish to make your images larger than the recommended size; this is useful to activate the automatic zoom function on the single product page, allowing your customer to click an image to see the full-size version.

If you choose to upload an image larger or smaller than the recommended image size, then you should still maintain the same width/height ratio as the recommended image size.

Read Example

What if I Use a Different Image Width/Height Ratio?

Using product image width/height ratios different to the recommended will not break your theme layout. However, in some cases, it may result in undesirable cropping of images and/or excessive spacing between each image and its surrounding elements (i.e. title, price, other images, etc.).

Aarfie themes include a custom option in the Home and Products page to switch between image sizes for the display of products. This is offered as a solution when the recommended width/height ratio does not suit your product images or preference. For example:

Uptown default - marked square images have been cropped to the theme's image ratio

The same product images with 'small' images enabled - square images are not cropped

Additionally, the same Home and Products page custom options will allow you to change the number of product images displayed per row. Please refer to the notes provided in your Home and Products page custom options section for more details.

Landscape Format

Landscape product images, or images with greater width than height, may cause spacing issues with some themes because themes are generally designed and developed based upon the more popular portrait or square product image format.

If you only have a few landscape product images, the spacing issues will not typically subtract from the look of a theme’s layout as adjacent product images will help establish the correct gridlines for the product thumbnail and text spacing.

If, on the other hand, you have predominantly landscape product images, you may wish to globally decrease the height of your product thumbnails for your shop.

To do this, copy the code from the box below and paste it into your custom style code area:

/* - - - - - - - - - - - - - - - - Adjust Height of Product Image Thumbnails */
.shop_thumb_img_holder,
.sml_thumb .shop_thumb_img_holder {
	height: 175px;
	overflow: hidden;
	}

then change the height value to suit your images, for example:

/* - - - - - - - - - - - - - - - - Adjust Height of Product Image Thumbnails */
.shop_thumb_img_holder,
.sml_thumb .shop_thumb_img_holder {
	height: 120px;
	overflow: hidden;
	}

The default value for the height will be 175px for small thumbnails and 300px for large thumbnails.

Some themes may have featured thumbnails on the home page that may not respond to the height adjustment with the above code. In this case, paste the additional code below (i.e. in addition to the above code) into your custom style code area.

/* - - - - - - - - - - - - - - - - Adjust Height of Featured Product Image Thumbnails */
#featured .shop_thumb_img_holder,
.three_col_products .shop_thumb_img_holder {
	height: 220px;
	overflow: hidden;
	}

Click the Save button once you have finished editing your custom style code.

Additional Reference

• Big Cartel’s support article How do images work?