Setting Thumbnail Size and Removing Image Cropping

Aarcade themes include custom options to select the product image size used for your shop’s home and products pages. Different themes will have a different size option set by default, however all Aarcade themes include the same range of options for their size settings. You can use these settings to:

1. Increase the size of your thumbnail images, and therefore decrease the number of columns in your image grids, and vice versa.
2. Remove automatic cropping. – Some image settings, e.g. ‘portrait’, will crop your product images and this may create an undesirable appearance depending upon how your products are framed in your images. In this case, you can change the thumbnail size to a different setting that does not crop your product image, e.g. ‘large’.
3. Scale and crop product images to the same thumbnail size. – We strongly recommend establishing a “preferred image size” as explained in the following sections of this article. However, if your product images must be different sizes – i.e different width to height ratios – yet it is still important to your shop appearance to have all images appear to be the same size on your home and products pages, you can use this option. However, be aware that this may result in a minor drop in image quality for some of your product images, depending upon the calibre of the viewer’s web browser image scaling.

To edit your product image size settings refer to the support article How do I change my Product image size and number of columns?

The Importance of Product Image Quality and Size

Your product images are the most important element in your shop appearance and product presentation. We can not stress enough the impact that the following elements have on the sale of your products and the success of your shop:

1. Product Image Quality

Your product images are the first item a customer will focus on, and they will be used to gauge both the quality of your product and the professionalism of your business. Always consider the following when creating your product images:

• Use actual photographs (as opposed to Photoshop mock-ups, for example) whenever possible. This not only confirms the legitimacy and quality of your products, but helps your customer envision them in a real life setting.
• Take original photos in high definition and commit to finding the ideal camera settings and lighting. Refer to online tutorials and invest in a new camera if necessary.
• Consider the staging / background of your product shots and ensure that it compliments your product.
• Keep images consistent between products; establish standard camera settings, lighting and staging.

2. Preferred Product Image Size

Setting a preferred product image size ensures a consistent layout for both your product grid view and product detail pages. It is standard practice for online stores and is an important factor in creating a professional shop appearance (see following section).

Establishing a Preferred Image Size

You can set your preferred image size at any width and height value to suit your product images or choose from one of the sizes used in our theme previews (see section Theme preview image sizes at the end of this article).

Applying a preferred 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.

Product Page Image Zoom

It is important that you consider the following points in relation to your preferred image size and its affect upon your product page pop-up image zoom.

• The zoom will only be enabled for images with an original width or height greater than 400px.
• The zoom will display images at full size or scaled smaller to fit the viewer’s browser window if necessary. Therefore, if you want your zoom images to be smaller then you need to decrease your preferred image size accordingly.
• The zoom will never display images larger than full size, i.e. never greater than 100% zoom.

Testing Your Preferred Image Size

Depending upon your custom option settings (see first section of this article), your preferred image size can have a significant affect on the appearance of your shop. For example, applying a portrait preferred size will increase the white space between image grid columns on Home and Products pages.

Before you size all of your product images, upload the images for just one or two products to ensure that you are happy with how your preferred image size looks in your shop. You should also decide which thumbnail size (see first section of this article) you wish to permanently apply at this stage.

Image Editing Tool

To edit your images before uploading them, 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 Picasa, Phoenix, FotoFlexer or Photobucket (see Photobucket > edit photos) - these options are all free!

Not Sure How To Edit Images?

If you are not sure how to use your preferred image editing tool to resize and prepare your images, refer to the help resources provided by your tool or use Google - e.g. search "resize image with Photoshop tutorial" - to find online tutorials.

If following our support articles and reviewing online tutorials is still not allowing you to achieve the results you desire, consider using a photo editing service to prepare your images. These services can be easily located online - Google "photo editing service" - and can be relatively inexpensive when you consider how important image quality is to the appearance of your shop.

Image Preparation

Before uploading images, it is important to ensure that they are formatted correctly for upload by reviewing the following items and using your image editing tool to correct the images as required.

1. Ensure your image type is appropriate for upload. Your image must be in the file format .png, .jpg, .jpeg or .gif.
2. Ensure your image data size is appropriate for upload. Most editing tools will allow you to optimise the size of your image, e.g. PhotoShop’s File > Save for Web & Devices… menu item.
3. Ensure your image is saved in RGB colour mode and not CMYK. CMYK colour mode is not web safe.
4. Finally ensure your image is scaled and cropped to the exact width and height value of your preferred image size.

Once you have reviewed and applied the above items, you’re ready to upload your product images. This is done via your Big Cartel Products admin area.

Theme preview image sizes

The following table lists the preferred image sizes used for our theme previews:

Additional Reference

• How do I change my Product image size and number of columns?
• Big Cartel’s support article How do images work?