How do I increase the size of the thumbnails on the home page?

How do I increase the size of the thumbnails on the home page?

• Issue
  Thumnbail images on the Home Page appear too small
• Cause
  The thumbnail is physically too small for your selected theme

When you upload a main image to your product, the Shift4Shop software will automatically create a thumbnail image for it. The thumbnail image itself is created to conform to a set size that is specified in your store's settings. The default for this size is 150px which is usually fine for most themes.

However, some of our responsive themes are tailored to showcase products on the home page with a larger area for thumbnail. Therefore, the default thumbnail size will appear small when using these themes.

Here are a couple of things you can do to correct this.

Change the default Thumbnail Image size

The first suggestion would be to change your store's default thumbnail image size to something a little bigger. Then, use the store software to re-create your thumbnail images and see if that looks better on your theme with a larger size.

1. Log into your Shift4Shop Online Store Manager
2. Using the left hand navigation menu, go to Settings >General >Store Settings
3. Then, click on the "Product Display" tab located along the top of the page.

Within the "Products" section you will see two fields under "Thumbnail Image Size." Typically, these will both be set to 150.

4. Change the 150 to 250 on both fields
5. Click "Save" at the top right to commit your settings.

This setting will make it so that - as you upload images for your products - their respective thumbnails will be created within these dimensions. However, we still have to deal with your current thumbnails so let's quickly resize those.

From your Online Store Manager:

6. Go to Products >Product List
7. Locate the item you'd like to edit and click on its name to open it up.
8. Next, click on the Images tab located along the top of the page
9. Finally, hover over your product's Thumbnail Image and click on the "Create from Main Image" link that appears.

This will recreate the thumbnail, but this time it will use the dimensions you specified in the previous steps.

Repeat this for each item on your home page and check to see if your results are satisfactory. Feel free to alternate the sizes on the thumbnails larger or smaller as needed to get the look you desire for the home page.

Changing the site's HTML coding

In some cases the size of the thumbnail is determined byt the store's HTML coding. If following the steps above still doesn't change the size of your images, then you may need to add some coding to your store's frame file to correct this further.

From your Shift4Shop Online Store Manager:

1. Go to Settings >Design >Themes & Styles
2. Look towards the top right of the screen and click on "Edit Template (HTML)"
3. This will take you to your store's template folder.
4. Click on the "frame.html" file to view the raw HTML code
5. Look for the following line of code near the top of the page

6. And add this code immediately after it

As with the general store setting, feel free to edit the 250px to meet your needs.

7. Click "Save" at the top right to commit your changes
8. Then click on View Store to see how the new image sizes appear on your store.