How is image compression handled?
The theme will request the appropriately sized and compressed image, given the screen size of the user.
The actual compression of the image is handled by Shopify. Read Image compression and file format selection for more.
What image size should I use?
Upload the largest version possible of the image. The theme will automatically use an appropriately sized version of the image, based on the width of the screen.
It's more important to upload an image with the appropriate dimensions. For example, if your Slideshow section is sized to be landscape, don't upload a portrait image.
Another example, if the image shape of your product cards is set to be portrait, but the product images are actually landscape - a good portion of the image will still be loaded, but not displayed.
Always upload an image roughly in the dimensions that they will be displayed in the store - or at least shape your sections to be roughly the appropriate size for the image.
Should I upload a separate image for mobile?
Yes, if the section allows it.
Mobile devices are typically held in portrait mode and desktop screens are typically landscape. This means that if a mobile image isn't specified - although the image loaded will be scaled down in size, it will still be a landscape image within a portrait container. This means a lot of the image is loaded unnecessarily.
Mobile images with the theme usually includes tablets, so we find it's best to upload square images for mobile.
Why do some sections crop the background image?
Several sections allow you to specify the height of the section. When you do this, the image will be set to grow and shrink as much as is necessary to cover the entire background of the section.
Taking the Slideshow section as an example, by its nature it contains several different images, all of which are shown in the same sized space. You may find that you can set up your slideshow such that the first image displays perfectly, but if subsequent images have different dimensions - parts of the images will be cropped.
This is best illustrated below:
The best way to avoid this is to set the Image height setting, use the Height of first image/Adapt to first image option (the setting name depends on theme). Refer to the steps below for more tips.
To avoid background image cropping in slideshows:
- Ensure the Height of first image/Adapt to first image setting is set.
- Ensure all the images in the slideshow have the exact same dimensions.
- Ensure the text content of each slide doesn't cause the height of that slide to grow.
To read more about aspect ratios, refer to the Shopify Understanding image aspect ratio guide.
Another reason why your image may be cropped is because you're using Focal points. Focal points allow you to choose the part of the image which should remain in view, no matter what the screen size. This means that the rest of the image may be cropped to ensure that the focal point remains central. Read Shopify's Focal points guide for more on this.
Why is the text within my image cut off?
By their nature, background images are intended to be in the background and to supplement the text which overlays them. They will resize to cover all the available space of their container and subsequently parts of the image may be cut off. See the previous FAQ for more.
Text should never be embedded within images for this reason and many more, such as:
- The legibility of the text is like to be poor due to image compression
- Search engines will be unable to read the text within images, and therefore it won't count as a ranking factor
- Screen readers won't be able to read the text within images
Where can I find the favicon settings?
The favicon settings for all Clean Canvas themes can be found in Theme Settings > Favicon
What format should my favicon be?
Favicon images should be in PNG file format.
What's the best file format to use for images?
Shopify provides support for various image formats, but it's worth noting that certain file formats can be quite large, which may affect the speed of your website, even with lazy loading. For optimal results, we recommend utilizing JPG or HEIC formats as they offer excellent quality while maintaining a small file size compared to other formats.
How do I keep a particular point of my image in view?
Focal points have been introduced by Shopify and we have updated our themes to provide support for this feature. With focal points, you can designate specific points on your images to center on. If your image is cropped and the primary subject is not fully displayed, you have the option to insert a focal point, and Shopify will ensure that attention is drawn to it.
What are Focal points?
The color of my image looks wrong. What's going on?
Some images can store data known as a colour profile which Shopify may strip out because some devices may not support it. This is not something that the theme has any control over this is again controlled by Shopify.
For more, read the Color profiles guide on the Shopify site.
What is the largest image I could upload?
20mb. This is controlled by Shopify. Read File upload size limits for more.
How do I change the gift card image?
Most of our themes have the ability to change the gift card image in the Theme Editor.
Follow the steps below to do this.
- Open the Theme Editor, and from the dropdown at the top select Others > Gift card.
- Click on the Gift card section on the left.
- Upload the gift card image in the Gift card image setting.
If your theme doesn't have this option, refer to How to change the gift card image Shopify guide for more.
What are 3D models and where can I find support for them?
A 3D model is a three-dimensional representation of an object. In our themes, they are featured as a media type on our product pages and are functional on both desktop and mobile. Refer to Shopify's 3D model guide for more information.