In this article, you will learn how to upload the right images and use Loft tools in order to create a responsive design in the slideshow with promotions section.
- Upload images
- Loft tools
1. Upload images
In general, the key to creating a responsive design for your store is to have images with the essential elements in the center. This is because the images are being cropped in the mobile view from the two sides (left and right).
Notice that the key in the above example is the happy child and its face. So, when the image is being cropped it's still in the center and creates a beautiful layout!
Image sizing tends to be one of the most difficult aspects of modern web design to deal with. Below are general guidelines. These are not bullet proof, and depend entirely on the content in the images you're uploading, and how that content is placed.
1. Slideshow Images
The ideal size for your slideshow/hero image depends on whether you have your "Slide" block placed above, or next to your featured links. In all cases, it's best to upload a .png file. Be careful of the image size - Shopify will often overly compress large images, so we always recommend first uploading your image files to tinypng.com for compression, before uploading them to Shopify.
- Position: Beside
- 700 x 900px. If you choose to use a different image on mobile with the "Display mobile hero" option then the recommended dimensions for this image are 760 x 1250px with a .png file format.
- Position: Above
- When the slideshow is set to above, you have a few more options for image sizing. In general we recommend image width of 1920px, 1480px, or 1280px. Much of this depends on the "height" you have set inside the section.
Note: If any of your images utilize text, or you notice that your images appear fuzzy, we recommend doubling the size of your image. For instance, for an area with an optimal image size of 700 x 900px, we'd recommend a final image size of 1400 x 1800px.
2. Content Images
Choose the right size for the content images based on the position of your slideshow and the amount of the blocks (content & promotion).
- Position: Above
- 6-blocks -> 1280x550px .png format for 1,3,4,6 content blocks, 1280x365px .png format for 2 content block and 1280x765px .png format for 5 content block
- 5-blocks -> 1280x565px .png format for 1,2,3 content blocks and 1280x365px .png format for 4,5 content blocks
- 4-blocks -> 1280x365 .png format for 1,2,3,4 content blocks
- 3-blocks -> 1280x410 .png format for 1,2,3 content blocks
- 2-blocks -> 1280x635 .png format for 1,2 content blocks
- 1-block -> 1280x170 .png format for 1 contents
- Position: Beside
- 6-blocks -> 1280x1010px .png format for 1,3,4,6 content blocks, 1280x620px .png format for 2 content block and 1280x1335px .png format for 5 content block
- 5-blocks -> 1280x1010px .png format for 1,2,3 content blocks and 1280x650px .png format for 4,5 content blocks
- 4-blocks -> 1280x645 .png format for 1,2,3,4 content blocks
- 3-blocks -> 1280x700 .png format for 1,2,3 content blocks
- 2-blocks -> 1280x1095 .png format for 1,2 content blocks
- 1-block -> 1280x590 .png format for 1 content block
Note: The numbers indicate the position of each content block inside the section. (i.e. 1,2,3 contents -> the content blocks in positions 1,2,3)
To have high quality images you need to:
- Save your images with double size in px (based on the above examples)
- Upload to tinypng.com and compress them
- Upload them to your store
2. Loft tools
Use a variety of tools in the slideshow with promotions section that will help you adjust your images in order to have an appropriate style on multiple devices.
If you choose to have the image above the collections you can use two settings:
- Image vertical position
Use the "Height" setting of the section to adjust your slideshow's image height with 3 options (Large-960px, Medium-600px, Small-400px).
Use the Image vertical position setting in each block to adjust your slide's position with 3 options (Top, Center, Bottom).
No matter what option you choose for your slideshow's position you can use one very helpful setting:
- Image horizontal position
Use the "Image horizontal position" setting in each block to adjust your image's horizontal position with 3 options(Left, Center, Right).
This is a great tool to use because it gives you the ability to center your image's essential visual elements even they aren't centered and implement a mobile-friendly style!
Image with Left option