Skip to main content

How to work with images

Broadly speaking, there are two types of images in your Instant Commerce store: product images and brand images. You need to upload product images to Shopify and brand images to Storyblok.

In this guide you can find tips for getting the most out of your images.

Product images

These are pictures of your products, meant to sell your products to your customers (often a product or model in front of a monochrome backdrop). You upload these to Shopify.

Product images are shown on Product detail and listing pages.

  • Use square images
    • The Product detail and listing pages work with square images. Uploading square product images means that they won't have to be cropped or stretched.
info

If you use square images, set the Thumbnail aspect ratio on the Product detail page and the Image aspect ratio to square on the Product card component (on the Cogwheel tab) to Square.

  • Use big images
    • Your images need to be at least 1280 by 1280 pixels.
  • Use high resolution images
    • We recommend an image resolution of 72 ppi as a minimum.
  • Leave space in the image between your product and the edge of the frame
    • This is called "padding". We recommend a minimum 12.5% padding. If you use the thumbnail gallery, we recommend least 20% padding.

Example of square, high resolution image

Brand images

Brand images are all other pictures you use to show your brand's identity. They can be pictures of products situated in flattering decors or models posing in more day-to-day settings. You upload these to Storyblok.

Because brand images are used in all kinds of sections, the guidelines for them are less specific.

  • Check if you can upload a narrower mobile version and a wider desktop version of each brand image
    • Brand images are scaled and cropped to fit your customer's display. However, mobile devices don't support as wide images as desktop devices do. This can lead to the image not being displayed properly on either mobile or desktop.
      In Storyblok, some sections (like hero sections) allow you to add two images. For these sections, you can upload to images to the assets and then add one for desktop and one for mobile viewing.
  • When using full width images, match the height of the section
    • When you use the Hero section or a single image set to full width, match your image to the height of the selected section and try to keep the width at least 1920 pixels for widescreen users.
  • Make sure the focus of images are in the center
    • Because of cropping, the edges of your brand images may be cut off. Make sure all of the important aspects of your images are near the center.
  • Use big images
    • Horizontally oriented pictures are wider than they are long; vice versa for vertically oriented pictures. You don't want to crop a horizontally oriented image width-wise or a vertically oriented-picture length-wise. Therefore, make sure the orientational dimension is at least 1280 pixels.
  • Use high resolution images
    • We recommend an image resolution of 72 ppi.