How to Control the Image Sizes in Your OpenCart 3

So, you’ve installed your new OpenCart 3 store and want to start building something unique. A great choice for a new beginning!

One of the steps towards creating your own style for the OpenCart store will be uploading images for your banners, products, categories and so on.

(Category design: Fawn & Forest)

Since you probably have a specific idea for the layout and design of your store, you’ve put some thought into how the images will look and how big they will be.

Well, in this post, we will show you how to find the place in your OpenCart 3 admin where you can adjust the image sizes in your store.

(Product page: Fawn & Forest)

Theme Image Sizes

To start editing your template’s image sizes go to your OpenCart 3 admin and click on Extensions > Extensions, select Themes from the dropdown and click Edit on your store.

Scroll down a bit and you will see the section with the image sizes in your store.

These are the default values of the containers that hold all of the images in your storefront.

You can use these fields to adjust the sizes of the containers.

Remember that the containers do have their limitations so you cannot go over certain limits.

Let’s give an example with a product.

We will open the Canon EOS 5D. This is how the image looks like with the default size.

Let’s go to the image size section and change it a bit.

We’ll enter 460 x 640 in the Product Image Thumb Size.

Let’s see what happens…

The main product image is now much bigger. Looks really good, right?

The visitor’s focus is concentrated on how great the product looks.

Let’s see another change.

For instance, the image size of the product in the cart.

First, let’s add the camera to the cart.

This is the default image size.

We go back to the image sizes field again and change the size in the Cart Image Size field to 120 x 120.

After going back to the storefront and refreshing, this is how the product image will look like in the cart.

How to Change the Main Banner Size?

One thing we didn’t notice so far was the slider in the storefront. Where to edit its size?

The banner setting are located in another place. It’s actually a part of the core OpenCart modules.

Go back to your admin and click on Extensions > Extensions. Select Modules from the dropdown and find the Banners field.

​When you click the Add New button, you will be able to create a new banner to assign to your slider.

Here’s where you enter the exact dimensions you want:

Why Do OpenCart Image Sizes Matter?

Although there are limitations to how much you can change the OpenCart image sizes, they do have another very critical purpose.

In theme development.

If you are planning to build your own OpenCart template, you will have the opportunity to play around with the images and their containers to a greater extent.

However, if you want to make some regular adjustments to the images you use in your storefront, then you can experiment with the image sizes in the admin panel section we showed you above.

Conclusion

To wrap up, we would advise you to always test your new image sizes on mobile devices to make sure that everything scales and looks good. Be sure to check this tutorial about the OpenCart Image Manager if you have questions about uploading images in your store.