Style guide

General rules

• All images must be .jpg
• Shopify will crop the images down but use a little compression
• Image naming:
  • Name files without capitals or spaces
  • Name files for seo
  • ie gails-breakfast-soho-buns-front-view
• Icons and graphics to be provided as .svg files
• The fewer aspect ratios used the easier it is to maintain
• It's important for SEO to add ALT tags to all images

Banners desktop

2:1 - 2560 x 1280 pixels

Short banners desktop

For blogs, bakery pages and on the home page where images need to sit above the fold. In certain cases it may be worth experimenting with 3:1 (2560 x 853)

4:1 - 2560 x 640 pixels

Banners mobile and in-content half-width

1:1 (square) - 2560 x 2560 pixels

In-content full-width

3:2 - 2560 x 1707 pixels

PLP & PDP

3:4 - 1920 x 2560 pixels

Blog thumbnails

3:4 - 1920 x 2560 pixels

3:2 - 2560 x 1707 pixels

1:1 (square) - 2560 x 2560 pixels

Aspect ratios (widest first)

• 4:1 - 2560 x 640 pixels
• 3:1 - 2560 x 853 pixels
• 2:1 - 2560 x 1280 pixels
• 16:9 - 2560 x 1440 pixels
• 3:2 - 2560 x 1707 pixels
• 4:3 - 2560 x 1920 pixels
• 5:4 - 2560 x 2048 pixels
• 1:1 (square) - 2560 x 2560 pixels
• 4:5 - 2048 x 2560 pixels
• 3:4 - 1920 x 2560 pixels
• 2:3 - 1707 x 2560 pixels
• 1:2 - 1280 x 2560 pixels

General notes

• The click through rate can vary depending on the image background. It has been found in some cases that white has a higher click through rate. This will vary across context but it's always worth doing a test comparsion.
• Conversely, lifestyle photography, which showcases a product being used in a real-life setting, can be effective in increasing conversion rates.
• Shopify PDP pages should focus on taking the best product imagery possible and including 3-5 Sets for each of their products, drastically increasing conversion rates.