Image Background Colours

Add a background colour for images to align with your shop's colour scheme and company brand.


Background Colours for Images

Having a consistent or standard colour as a background for your product images means your product pages and lists will look much cleaner, more professional and potentially invoke a higher perceived value. Consistency and import clarity inspire confidence in your brand from the customer's point of view which is never a bad thing.

On top of that, a busy photo or background means a more distracted customer who may not be focussing on the product like we want them to. This is why the vast majority of large eCommerce brands have product pages with white background. It's an 'industry standard' for a reason; because it works.

But, that doesn't meant that every image you put on your shop front has to be boring. You can mix up the image background with a themed background, say for Christmas or Valentine's Day or Black Friday even. Do, however ensure that when the customer clicks on the image/product to see more that they can in fact see the image on a white background as well. Ideally from multiple angles to fully showcase your products.

Of course, if your products are white then you may need to mix it up. It's difficult (read: not impossible) to clearly showcase a white product with a white background but you need the focus to be on the product. We also don't want to make the customer search for the item in the picture, we want it to jump out at them and encourage them to 'Add to Basket'.

The best advise is to start with what you think works for your images, then test it. Change the background add images, change the angles or the lighting. Leave each test for a significant enough period, usually 3-4 weeks (depending upon site traffic) and see what the conversion rates are for each. Summarise at the end and replicate the winning combination.


Image Padding

When you're uploading images to your shop you may notice some difference between the background of your site and the background of the image. This may be intentional to highlight the product, however it may not be. For example, the two watches below have a white image background with black padding (the two lines top and bottom). The black padding in this instance takes away from the rest of the image and looks discordant. Consistency of the look and feel of your shop may not be front and center of your mind on starting up but it's certainly worth thinking about.

Let's compare this product list with images on white (or transparent) backgrounds and see what difference it makes.

The second version is much neater, clearer, and exudes quality and professionalism. It doesn't distract from the product and invites customers to click on them and dig deeper into whether this is the item they've been longing for.

Boring? Maybe. Does it work though? Absolutely.


Adding Padding

For PushCommerce customers adding padding to your images is really as simple as selecting the right colour. Head over to your Shop's Admin area and then click "Settings>Images".

Scroll down briefly to the "Image Background Colours" panel and you will see the following:

Then either enter the Hex Code for your required colour (White is #FFFFFF) or select the specific colour from the colour picker box.


If you have any questions on this or other topics simply drop the Support Team a message on our Live Chat or by email.