Optimize product images for web

Optimize product images for web

— The size of product images can determine the speed of your website. If file sizes are too large, your website will be slower to use. If you use stock photos or photos with transparent backgrounds, this often occurs. But how can you optimize these product images?

The file size of your photos is the biggest factor determining the loading time of your pages. As a file format, we therefore recommend using only .jpg in a ratio of 1400px / 1MB / 60% jpg quality for a fullscreen width photo on desktop. The difference in jpg quality between 60% and 100% is almost invisible in most cases but it means that your image can be saved with a file size 4 times smaller and will therefore load 4 times faster.

Based on the full width rule 1400px wide / max 1MB file size, you can derive proportionally what is the ideal format to optimally save a photo for display on web. For example, if a photo is only half of your screen width, we recommend saving it at 700px wide with a maximum file size of 0.5MB or 500KB.

Below are some examples of how this translates proportionally to a grid of product photos:

product thumbnail for product overview in case of 4 columns : 350px header image maximum file size: 250KB or 0.25MB

product thumbnail for product overview in case of 3 columns : 450px header image maximum file size: 350KB or 0.35MB

product thumbnail for product overview in case of 2 columns: 700px header image maximum file size: 500KB or 0.5MB

PhotoBulk

Download the PhotoBulk application at the app store:

 

With the PhotoBulk application you can efficiently edit and save the width and size of several images together with just one click.

  1. Drag all the images you want to edit into the right screen
  2. Check ‘resize’, here you can set the dimensions
  3. Check ‘format’, here you choose format JPEG and the JPEG quality 60%
  4. Check ‘keep original quality’
  5. Start and save.

Tips 'n tricks

Save the preset for next time.


How do I setup stock management with low stock notifications?

How do I setup stock management with low stock notifications?

— Learn everything about stock notifications

Go to Woocommerce > settings > tab ‘products’ > inventory

Tips 'n tricks

Don't forget to save your changes!


How to create or change the top bar message?

Changing or adding a fixed top bar for promotion notifications or other messages

  1. Go to Wordpress by Popeye Cloud > theme options
  2. Click open ‘additionals’
  3. Enable the top bar text (on)
  4. Enable on mobile if you prefer this
  5. Choose alignment of the text
  6. Choose the background color of the bar
  7. Choose the height: mostly 30px is fine
  8. Scroll until you see the ‘Top bar text’
  9. You can fill in the field for your text
  10. Click save changes
  11. Clear your cache if you don’t see any changes

Tips 'n tricks

Explore with it and you'll get away with it quickly!


How do I setup product filter?

Using the product filter

— Learn everything about setting up your own filter for your webshop

Configure product filter

Go to the page where you want to setup the filter. If there isn’t a content block or page yet click ‘add new’

  1. Add a new element by clicking the ‘+’ symbol and add the ‘product filters’ element
  2. Click the second tab ‘filter’
  3. Click the ‘+’ plus button to add a new section in the filter
  4. A new line will appear (width 12/12, filter type, search)

5. Click the dropdown arrow so that the first line will open

6. Filter label: fill in the name of the type you want for example sizes

7. Width: decide the width of this size column most used is 2/12

8. Filter type: it’s now set to search, but we want to show sizes so we choose another option. This could be anything, but we will go for checkbox.

9. Filter content by: choose attribute because to display the sizes you made attributes. If you want to filter categories or tags you choose that option

10. Choose attribute: pick the attribute group you already made with the correct sizes. If you don’t know how to make these attributes (sizes) you can read this article

11. Filter options: select the different selective attributes within your size attribute group for example ‘small’ ‘medium’. But if you want to show all attributes from the size group you leave it empty.

12. Save changes and click update in the top right corner

Tips 'n tricks

Don't forget to save your changes!


Using product image, secondary image and product gallery

Using product image, secondary image and product gallery

— When editing products you'll notice there's several ways to add images, but what are they used for?

Product image

Go to products and select the product you want to change

  1. In the right column or side of the page you can see the frame with the title ‘product image’
  2. Click ‘set product image’ and upload the image you want
  3. Save changes

The product image will appear in the shop overview as thumbnail

The product image will also appear in the shop detail view as first big image

Secondary image

Go to products and select the product you want to change

  1. In the right column or side of the page you can see the frame with the title ‘secondary image’
  2. Click ‘set secondary image’ and upload the image you want
  3. Save changes

The product image will appear in the shop overview as thumbnail when you hover over the product image

The product image will NOT appear in the shop detail view

Product gallery

Go to products and select the product you want to change

  1. In the right column or side of the page you can see the frame with the title ‘product gallery’
  2. Click ‘set gallery image’ and upload the images you want
  3. Save changes

The product gallery are all the other images you want to show of your product. They appear under the main product image on the shop detail view.

They will NOT be shown in the shop overview

Tips 'n tricks

Don't forget to save your changes!


How do I add size attributes?

Adding sizes to your webshop

— Learn everything about adding sizes to specific products

Adding size attributes

Go to products > attributes

If you want to add colors we first start by making a new attribute.

  1. On the left side of the page you can fill in the name of your new attributes group for example ‘size’
  2. By slug you fill in the same word as name
  3. Then click the button ‘add attribute’

You’ll see it’s added to the right column. Next thing: click ‘configure items’

  1. Add all the sizes you need in your webshop follow next steps
  2. Fill in the name and slug with the size (left column)
  3. For example “36, 38, 40…”
  4. Click on the button ‘add new size’
  5. The sizes will be added in the right column
  6. If you accidentally put in the wrong name you can click on ‘edit’ for that item and change the name, then click update

Tips 'n tricks

Don't forget to save your changes!


How do I add color attributes and color swatches?

Adding color attributes and color swatches for your shop

— Learn everything about adding colors to your products

Adding color attributes

Go to products > attributes

If you want to add colors we first start by making a new attribute.

  1. On the left side of the page you can fill in the name of your new attributes group for example ‘color’
  2. By slug you fill in the same word as name
  3. Default sort order: choose color picker if you want to use the swatches if not just go for select
  4. Then click the button ‘add attribute’

You’ll see it’s added to the right column. Next thing: click ‘configure items’

  1. Add all the colors you need in your webshop
  2. Fill in the name and slug with the color name
  3. For example red
  4. Click on the button ‘add new colors’
  5. The color will be added in the right column
  6. To give the color red the correct color swatch click on ‘edit’

Adding color swatches

7. Click on ‘select color’ to define the correct color for your swatch

8. Click update

Tips 'n tricks

Don't forget to save your changes!


How do I add/edit a variable product?

Editing or adding a variable product

— Learn everything about editing and managing products

Follow the next steps to edit products

  1. In the menubar on your left click the button ‘products’
  2. An overview with all products will open
  3. If you want to edit a certain product click ‘edit’
  4. If you want to add a new product click ‘add new’

! Important: it’s probably a better idea to duplicate a product so that you only have to change the text and photos. But this way you’ll know what to fill in in the fields. If you add a fully new product all the fields will be empty.

Next, we will add a variable product, not a simple product! A variable product is a product that contains different colors or sizes. A simple product on the other hand has no sizes or colors.

First thing you’ll see when you add a new product or duplicated one is this screen below.

  1. Fill in the title of the product. If you have for example multiple clothing brands you should add the name of the brand in this title, otherwise your search page won’t find this product
  2. Permalink: decide the permalink this is the URL of your product
  3. Categories: link your product to the correct category. If you use it.

Don’t forget to save your changes by clicking ‘update’ or ‘publish’

4. You can add tags for this product

5. If you have the waiting list plugin and this product is out of stock you can see if someone has signed up for it

6. If you have a currency pro plugin you can specify per currency your price

7. Product image: setup the main front image of the product

7. Product image: setup the main front image of the product

8. Product gallery: select all other photos for this product

9. Product data: important! that you select variable product instead of simple product. Tab attributes and variations are used for colors and sizes. Click here for more information about using variations and attributes.

10. Product short description: fill in the short description for your product

11. Long description: same as above if you have a long description on your product detail pages

Tips 'n tricks

Don't forget to save your changes!


How do I setup shipping methods?

Setting up shipping methods for your webshop

— Decide to which countries your webshop ships and which not.

Go to Woocommerce > settings > go to the tab ‘shipping’

You now find yourself in the shipping zones. A shipping zone is a geographic region where a certain set of shipping methods are offered. Your webshop will match a customer to a single zone using their shipping address and present the shipping methods within that zone to them.

If you want to add a shipping zone > click add shipping zone

Zone name: fill in the name of the specific zone you are adding. In this case it’s Belgium.

Zone regions: if you want to set the shipping methods for Belgium only choose the right country, in this case Belgium.

Shipping methods: choose which options the customers within Belgium have for shipping in Belgium. In this case we have free shipping, shipping (flat rate), local pickup. If you want to add another shipping method click the button ‘add shipping method’.

Tips 'n tricks

Explore with it and you'll get away with it quickly!


How do I setup taxes

Setting up taxes for your webshop

— Where do I configure my taxes in Woocommerce?

Go to Woocommerce > settings > go to the tab ‘tax’

You now find yourself in the tax options

Important to enable the taxes!

  1. Prices entered with tax: choose whether you will enter your prices with or without tax. This option is important as it will affect how you input prices. Changing it will not update existing products!
  2. Calculate tax based on: this option determines which address is used to calculate tax.
  3. Shipping tax class: optionally control which tax class shipping gets, or leave it so shipping tax is based on the cart items themselves.
  4. Additional tax classes: list additional tax classes you need below (1 per line, e.g. Reduced Rates). These are in addition to “Standard rate” which exists by default.
  5. Display prices in the shop: choose if you want to display them with or without tax
  6. Display prices during cart and checkout: same as above
  7. Price display suffix: Define text to show after your product prices. This could be, for example, “inc. Vat” to explain your pricing. You can also have prices substituted here using one of the following: {price_including_tax}, {price_excluding_tax}.

Ideally your tax settings should look like this, for example: (only if you have one VAT rate) if you have more for example 6% and 21% please contact us and we will setup the taxes together.

Tips 'n tricks

Explore with it and you'll get away with it quickly!