Shopify Themes: Slideshow image size best practices || Shopify Help Center 2018

February 26, 2020 posted by

This video covers best practices with image
size when using a slideshow in your theme. Full-width images, such as slideshows and
images with text overlays are common sections in Shopify themes. In this example, you see the slideshow of
the free theme called Brooklyn. The slideshow is a chance to grab the customer’s
attention! It should help build your brand identity,
so the image should always relate to your business. Start by clicking on the slideshow section
on the left-hand side of your theme customizer, and see what editing options are available. It is important to note, that slideshow customization
options in the Brooklyn theme, might not be the same as the slideshow customization options
in any other theme you choose. The size of the slideshow area is quite large,
particularly in the theme Brooklyn, and requires a high resolution image. If the image is blurry, low quality or unrelated
to the business, the potential customer may leave the online store entirely. Do not to fill the slideshow with any images
“just because”; make sure the image relates to your business. If you’re selling beachwear, then an image
of someone at the beach or examples of the bathing suits is a great idea for the slideshow. You are also not required to have multiple
images in your slideshow. This example shows one image uploaded, which
will be the only image that displays on the online store slideshow. Aspect ratio plays a big role in how images
are cropped. Aspect ratio is the height and width dimensions
of the image uploaded. If the image is blurry or stretched out, then
a new image with the accurate dimensions will need to be uploaded. Most themes have different recommendations
on the image size, so make sure to read the theme documentation to find the optimal size
for your theme. The Brooklyn theme slideshow recommends an
image size of 3840 X 2160 pixel or larger. For Shopify themes, you can find these details
by using the link in the description below. Finally, a crucial factor of a well-done slideshow
is understanding the difference in how the image is portrayed on different devices. Shopify Themes are developed in regards to
mobile, desktop, and everything in between. You can preview what the slideshow looks on
different devices by selecting one of the device icons at the top of the page. Each of these devices automatically adjusts
the image for its screen. On full-width images, the picture will often
crop on the sides. For this reason, make sure to test your images
on mobile as well as desktop when designing your storefront. For more tutorials on navigating Shopify themes,
subscribe to the Shopify Help Center Youtube channel for weekly updates. Feel free to comment below, Shopify would
love to hear from you!


13 Replies to “Shopify Themes: Slideshow image size best practices || Shopify Help Center 2018”

  1. Dipankar Bhuyan says:

    hi, my question is regarding facebook ad, suppose I am running a facebook PPE ad and the ad is performing well now wanted to scale the ad, can I scale the PPE ad? or I have to duplicate the PPE ad to conversion ad for scaling. Also wanted to know that after duplicating the facebook PPE ad to conversion ad should I have to delete the PPE ad?

  2. NAMRO says:

    hi, getting different size on web and mobile devices, how to rectify those?

  3. David Milburn says:

    Hey im using the minimal theme and would like my slideshow to cover the max width of the device it is being used on. At present the background is showing around the slideshow images. How could I change this so it is like the brooklyn theme above? Thanks

  4. Nasir Muhammad says:

    Hi, what size do the slideshow images fro simple need to be so that it does not crop the image?

  5. zero krad says:

    Hello, how can I have the slideshow take all over the top of the page where I can blend it with the store logo? Thanks

  6. Hasan says:

    My customers only see the big banner, and they won't see the products below until they scroll down. How would I change the size of the banner so it does not take up the entire screen?. I am using the "Simple" theme. thanks.

  7. _Galaxia_ says:

    I'm using the Brooklyn theme and got a problem which I don't know if there is a true solution for. I got a very good image which fits perfectly on desktop but when seen in mobile the image cuts a very important part on the right side. It has a person that stands on the right side of the image and mostly gets cut off on mobile devices which looks unprofessional on mobile devices because of that. Is there a way to edit the position of the image on mobile while maintaining it the way it is shown on the desktop? I really am not able to find the solution my self.

  8. Brandon Mason says:

    Hi, I have an image that fits fine on the mobile version but doesn’t work so well on the desktop. The Image size is: 2161 (width), 3840 (height). Should I change the size of the image? I tried changing the aspect ratio to 1:3 but that didn’t work. I am also using pxlr by the way. This won’t degrade the quality of the image will it?

  9. VideoTenerife.EU says:

    Do you know what is the resolution for pictures of icon collection to Venture theme?

  10. Chandan Pradhan says:

    How can I get Indian Kurtis related slideshow image for my Shopify store??
    Pls help me out

  11. vaskos trendafkos says:

    Thats video is absolutely useless

  12. Daniel Lee says:

    3840*2160px 1:44

  13. joão Ferreira says:

    Hello, how can i resize the heigth of slideshow in the venture theme, for like half size?
    Thank you.

Leave a Comment

Your email address will not be published. Required fields are marked *