Store Decoration in OpenCart: Setting image properties

So far, we have modified lots of store properties. Now, we will set the image properties for our site. We can upload store logos and also, we can change the favicon for our store. We have already created our logo. Now, we will upload it and set it as our store logo. Here, we also change the dimension of different images.

1.  Getting started

For this recipe, we need to log in as admin using our stored credentials. We have already shown the admin login process.

2.  How to do it

1. We need to go to the System | Settings section and then select the Image This will show the following window:

We will now discuss the attributes:

2. Store Logo: We will replace the store logo using the Upload Let’s replace it with our logo that we created in the previous chapter. Click on the upload icon.

Then, it will open up the following window:

3. There is an Upload button on top of the This will lead to the following window:

4. We will choose our image, select it, and then click the Open If our image is uploaded successfully, we will be greeted with the following message:

5. Click Ok. Now, click Refresh on the top of the We will see our logo on the window, like this:

6. We will select our logo and double click And, it will be set as our store logo.

7. We need to save the changes to view our logo in Now, we will go to our store front by clicking on the store front tab on top of the admin panel.

8. Icon: We will upload the favicon image with this option. We will change our store favicon in the same way as we did with our store We will use the following image as our store favicon:

After uploading, we will see it like this:

9. Now double click it and then save So, our favicon is set and we have this view:

Also, when we go to our store front, we will see the changed favicon on our site, like this:

• Product Image Thumb Size: We will set the product image thumb size. Here, we can set the height and width of the thumbnail image. This image will be shown on the product detail page. We will leave it as it is.
• Product Image Popup Size: This will be the popup box image size. It is good to set it to a large size. For now, we will set it as default.
• Category List Size: We will define the category list size here. We will leave the dimension as it is. This image is for categories.
• Product List Size: This will set the product list dimension. This size will be applicable for the list view of products. The ‘list view’ refers to showing a list of products on the basis of some common properties like ‘category’.
• Additional Product Image Size: Here, we can set this dimension for additional images of a product.
• Related Product Image Size: We will set the image sizes for the related products under the product detail page.
• Cart Image Size: This will set the product image size in the cart page. We will leave it as it is.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.