We know that you want to have the best images represented on your website. This article will show you a guideline of image sizes to display perfectly on your site.
On this page
Image sizes for different sections & blocks
On Be Yours theme, we recommend you to apply the particular image sizes to different sections as follows:
-
Bundle products: 1000 x 1100 pixels.
-
Blog post featured image:
You can choose images with square, wide, or landscape ratios to have the best look. The recommended sizes in these cases are:
- Square: at least 2000 x 2000 pixels
- Landscape: at least 2400 x 1600 pixels
- Wide: at least 2400 x 1350 pixels
To set the blog post featured image, you go to Online stores > Blog posts in your Shopify admin dashboard. Then click on the post and locate the Featured image box in the right-hand column to add the image.
On your website, the blog post featured image is displayed in two places which include a post thumbnail image on the blog page and a top banner on the post page.
-
Post’s thumbnail image:
-
Post’s top banner:
-
Collection featured image:
The recommended image pixel-sizes are similar to the blog post featured image.
To set the collection featured image, you go to Products > Collections in your Shopify admin dashboard. Then click on the collection and locate the Collection image box in the right-hand column to add the image.
-
Image comparison: 1920 x 960 pixels.
-
Image with text overlay: 1920 x 1280 pixels.
-
Layered images with text: 1000 x 1100 pixels.
- Lookbook: 1500 x 750 pixels.
-
Promotion image in the mega menu (Header section):
The recommended size depends on your chosen image ratio such as:
- Square: at least 2000 x 2000 pixels
- Portrait: at least 2000 x 2500 pixels
- Landscape: at least 2400 x 1600 pixels
- Wide: at least 2400 x 1350 pixels
-
Reveal banner: 1920 x 1280 pixels.
-
Shop the look: 1000 x 1000 pixels.
-
Slideshow: 2048 x 1365 pixels.
For the Slideshow, we strongly recommend you insert separate images for desktop and mobile versions to have the best image representation on different devices.
In case you apply the same images for both versions, the default crop is from the center of images when displaying on mobile. To avoid losing your images’ important details and focus on different display devices, you can apply one of these ways:
- Try to keep the most compelling and relevant parts in the center of the image when designing or photographing.
- Or, you remain the original image when loading on desktop or mobile by choosing the option Adapt to first image in Slideshow > Desktop height or Slideshow > Mobile layout > Mobile height dropdown list.
-
Tab collage: 1200 x 1200 pixels.
-
Slideshow
-
Desktop: 1920 x 1280 pixels.
-
Mobile: 1028 x 1540 pixels.
-
Image sizes for products
From the tab Products on your Shopify Admin dashboard, you can add new products with their images. These products and images will display in the product-related sections on your Beyours-theme website such as the Featured collection, Featured product, or Recently viewed products. In these sections, the options of image ratio comprising Adapt to image, Square, Portrait, Landscape, and Wide are available for displaying product images of your choice.
We recommend the product image sizes based on these image ratios as follows:
- Square: at least 2000 x 2000 pixels
- Portrait: at least 2000 x 2500 pixels
- Landscape: at least 2400 x 1600 pixels
- Wide: at least 2400 x 1350 pixels
That is all our recommendations for the best image sizes used on Be Yours theme.
It is also important to note that you should apply consistent size for images in similar blocks under the same section. For example, you add a Slideshow section having 4 images, so make sure these four images have the same size.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, don't hesitate to reach out to Roartheme's support team for expert guidance.
Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp
