Modular documentation
Support
Modular 3.1
Modular 3.1
  • Modular Theme Documentation
  • Sections
    • How to use sections
      • Section settings
      • Adding sections
      • Hiding sections
      • Reordering sections
      • Theme Settings
    • Modular sections
      • Blog posts
      • Collections list
      • Contact form
      • Custom HTML
      • FAQ
      • Featured collection
      • Featured product
      • Icons row
      • Image with text
      • Image with text overlay
      • Logo list
      • Mosaic
      • Newsletter
      • Product features
      • Rich text
      • Slideshow
      • Split hero
      • Tabs
      • Testimonials
      • Video
    • Recommended Image Sizes
      • Product Images
      • Blog Images
      • Slideshow Section Images
      • Catalog Banner Images
      • Product Feature Images
  • Announcement
    • Announcement bar section
  • Header
    • Transparent header
    • Logo and store name
    • Mega Menu
  • Products
    • Product Pages
    • Creating new Product page templates
    • Pre-Order
    • Product ratings
  • Collections
    • Collection Pages
    • Creating more Collection page templates
    • Customizing the Collection List page
    • Badges
  • Pages
    • Pages
  • Online Store 2.0
    • The new experience
  • Theme Settings
    • Theme Settings Intro
      • Colors
      • Typography
      • Appearance
      • Search
      • Products
      • Cart
      • Breadcrumbs
      • Favicon
      • Social media
      • Checkout
  • Blogs
    • Blog Pages
    • Creating new Blog page templates
  • Footer
    • Blocks and settings
      • Logo
      • Menu
      • Text
      • Newsletter
    • How to remove the Shopify credit
  • Popups
    • Popup section
  • Updates
    • Checking your theme version
    • Downloading the latest version
  • Support
    • Contacting support
    • Sharing a preview link
    • Updating your theme
  • Custom
    • How to add Custom Color Swatches
    • How to make CSS customizations
    • How to set up custom filtering options
    • How to add Custom Fonts
Powered by GitBook
On this page
  • Image width
  • image height
Export as PDF
  1. Sections
  2. Recommended Image Sizes

Slideshow Section Images

The Slideshow section allows you to specify desktop and mobile images as well as specify the slide height.

Image width

Desktop: We recommend using images 1920px in width.

Mobile: We recommend using images 1080px in width.

Remember: Mobile devices are tall. You need to use an image that has a bigger height than it does width in order to fill the vertical aspect ratio.

image height

Modular provides an option to specify various slide height sizes: Full Screen Height, Image Height, 750px, 650px, 550px,450px.

Static sizes: If you want to use a static slide height (750px, 650px, 550px, or 450px), make sure your image height is around that size.

For example, if you'd like to use a slide image height of 750px, you'll want to save your image around this same size. This will prevent image cropping both towards the top and bottom. This applies to the other slide height sizes (650px, 550px, and 450px).

Note: Because these settings keep the height static across all devices, the width will change. Your images may be cut off from the side so make sure that the focal point is in the center.

Full-screen height: This option will fit the images to the entire height of the browser window. This option is recommended for images with medium height sizes and not for images with large height sizes, as these will be cropped at the bottom of the image.

Image height: Setting this option will have the images displayed in the original height as uploaded. This option is quite useful if you want to have the full image displayed as there will be no cropping of the images.

For the best result on mobile view, we recommend using images that have a taller, or square, aspect ratio. Anything from 600px by 600px to 1200px by 600px (that's height to width) would fit the mobile aspect ratio the best.

Note: It's important to use equal-sized images in terms of height for this option to maintain consistency in the slide height as the slideshow advances.

PreviousBlog ImagesNextCatalog Banner Images