MultipurposeSupport

Multipurpose theme documentation

Multipurpose Fashion Theme

Image Optional Slides

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Help Center > Sections & Blocks > Hero & Banner Sections > Image (Optional Slides)

Overview

The Image (optional slides) section displays an image-only carousel. Each slide shows a full-width image (optionally with a separate mobile image). Use it for lookbooks, campaigns, or minimal hero content without text overlay. Supports autoplay, swipe on mobile, and multiple transition styles. Ideal when visuals speak for themselves.

Where to Add This Section

  1. Go to Online Store > Themes > Customize.
  2. Select Homepage or the desired template.
  3. Click Add section.
  4. Choose Image (optional slides).
  5. Position at the top for hero use, or elsewhere for carousel content.
  6. Click Save.

📷 Image placeholder: Add a screenshot of Image (optional slides) on the storefront.

Placeholder: Image optional slides carousel

Quick Setup (3 Steps)

  1. Add slide blocks: Click Add block > Overlaid Image Slide. Add one block per slide.
  2. Add images: Upload Image and optionally Mobile image for each block.
  3. Configure the section: Set full width, height, autoplay, animation, and navigation style.

Section Settings

Setting Description Default
Full width Stretch the carousel to the viewport edges. Off
Desktop height adjustment Adjust slide height on desktop (px). Use small values to fine-tune spacing without distortion. 0
Mobile height adjustment Adjust slide height on mobile (px). Useful if the hero looks too tall or too short on phones. 0
Animation type Transition between slides (example: Horizontal slide, Fade). Horizontal slide
Navigation style How customers move between slides (Dots, Arrows, Minimal). Dots
Auto play Automatically rotate slides. Recommended only when you have 2+ slides. Off
Auto interval Seconds between slides when Auto play is enabled. 5
Enable drag Allow swipe and drag to change slides, especially important for mobile. On
Border radius Rounded corners for the carousel container (px). Match your theme card radius for consistency. 0
Pause on hover Pause autoplay while the cursor is over the carousel (desktop). Off
Pause on interaction Pause autoplay when the customer interacts (click, swipe, keyboard navigation). Off
  • Dots: Shows dots under the carousel. Customers can click a dot to jump to a slide.
  • Arrows: Shows previous and next arrows. Best for hero placement and desktop browsing.
  • Minimal: Reduced UI footprint. Use when you want the images to feel more editorial.

Blocks: Overlaid Image Slide

Each slide is an Overlaid Image Slide block. For image-only use, add the image. Text overlay is optional and can be left blank.

Setting Description
Image Slide background image (required).
Mobile image Optional separate image for mobile. Recommended when the desktop crop looks awkward on phones.
Slide link Optional URL. Makes the entire slide clickable. If you also add buttons in the overlay, avoid linking both to prevent nested link conflicts.
Subheading Optional text overlay.
Heading Optional text overlay.
Text Optional text overlay.
Slide link / Link text Optional overlay button(s). Leave blank for pure image-only slides.
  • Desktop: 1800 to 2400px wide. Common hero sizes: 1920×800 or 2000×900.
  • Mobile: Use a taller crop like 1200×1500 or 1080×1350 to avoid cutting off faces and products.
  • File format: Prefer WebP (or AVIF if supported by your theme pipeline).
  • File size target: Aim for under 300 to 500KB per slide for fast loading.
  • Safe area: Keep important content away from the extreme edges to prevent cropping on different screens.

Step-by-Step Setup

Step 1: Add the section

Add Image (optional slides) to your template. Place it at the top for a hero, or mid-page for a lookbook carousel.

Step 2: Add slide blocks

  1. Click Add block > Overlaid Image Slide.
  2. Upload Image (required) for each slide.
  3. Optionally upload Mobile image for better mobile cropping.
  4. Add a Slide link if the slide should open a page (example: a collection or product).
  5. Repeat until you have all slides.

Step 3: Configure the section

  1. Enable Full width for edge-to-edge display.
  2. Choose Animation type (example: Horizontal slide or Fade).
  3. Enable Auto play and set Auto interval if needed (commonly 5 to 8 seconds).
  4. Select Navigation style (Dots, Arrows, or Minimal).
  5. Keep Enable drag On for mobile swipe.
  6. Optionally enable Pause on hover and Pause on interaction for better usability.
  7. Click Save.

Use cases

  • Lookbook: Full-width fashion or lifestyle imagery.
  • Campaign banners: Promotional images without text clutter.
  • Brand visuals: Rotating brand imagery for seasonal mood and identity.
  • Category highlights: Image carousel linking to collections.

Best practices

  • Use 2 to 5 slides: Too many slides reduces engagement and increases load time.
  • Autoplay interval: Keep it readable and comfortable, usually 5 to 8 seconds.
  • Mobile image: Provide a mobile-specific crop when your desktop hero crops poorly on phones.
  • Consistent aspect ratio: Use similar dimensions across slides to avoid layout shifts.
  • Keep overlays minimal: If you add text, keep it short so the visual remains dominant.

Performance notes

  • Compress images before uploading. Large hero images are the most common cause of slow homepages.
  • If your theme supports it, lazy load non-first slides and preload only the first slide for faster first paint.
  • Prefer modern formats (WebP, AVIF) to reduce file size without visible quality loss.

Accessibility notes

  • Carousel containers should use aria-roledescription="carousel" and slides should have clear labels (example: "Slide 1 of 3").
  • Navigation controls must be keyboard accessible (Tab focus, Enter or Space to activate).
  • If autoplay is enabled, provide a way to pause via hover and interaction settings, and respect reduced-motion preferences where possible.
  • If your implementation uses <img> tags, ensure meaningful alt text for each slide image. If purely decorative, use empty alt (alt="").

Example configurations

  • Minimal Lookbook: Full width On, Minimal navigation, Autoplay Off.
  • Campaign Hero: Full width On, Arrows, Autoplay On (6s interval).
  • Editorial Style: Fade animation, Border radius 12px, Dots navigation.

Limitations

  • Not intended for complex multi-column hero layouts.
  • Heavy image files may affect homepage load speed.
  • Autoplay should be used carefully on accessibility-sensitive stores.

Best practices

  • Use 2–5 slides maximum.
  • Keep autoplay intervals between 5–8 seconds.
  • Provide a dedicated mobile image for best results.
  • Maintain consistent aspect ratios across slides.

For merchants

  • Use high-quality images (example: 1920×800px or similar).
  • Image-only slides work well for lookbooks and campaigns.
  • Add Slide link to make slides clickable (example: link to a collection).
  • Use Mobile image when the desktop image crops poorly on phones.

Common mistakes

Mistake Fix
No image on slide Upload Image in each Overlaid Image Slide block.
Poor mobile crop Add a Mobile image with a taller aspect ratio.
Autoplay feels too fast Set Auto interval to 5 to 8 seconds.
Slides not clickable Add Slide link in block settings.
Carousel height looks wrong Adjust Desktop height adjustment and Mobile height adjustment in small increments (example: 40 to 120px).
Mobile image does not appear Confirm Mobile image is uploaded in the slide block and that your theme’s breakpoint logic is working.
Swipe does not work Enable Enable drag and test on a real device. Some desktop browsers do not simulate touch drag correctly.

FAQs

Yes. You can leave all overlay fields empty and use only images. This section works well for minimal, visual-first hero layouts.

We recommend 2 to 5 slides. Adding too many slides may reduce engagement and increase page load time.

Autoplay is optional. For homepage hero banners, many merchants prefer manual navigation. If enabled, use an interval between 5 and 8 seconds and enable pause on interaction for better usability.

Desktop images often use wide aspect ratios. Upload a dedicated Mobile image with a taller ratio such as 1080×1350 for better results.

Large image files can impact Largest Contentful Paint (LCP). Compress images before uploading and use WebP format when possible. Keep each image under 500KB when feasible.

You must add a Slide link inside each slide block. Without this setting, the slide functions as a visual-only element.

Yes. You can use the optional overlay link fields to create buttons. Avoid adding both a full-slide link and button links to prevent nested link conflicts.

Yes. Navigation controls are keyboard accessible and include visible focus states. Users can navigate slides using standard keyboard interaction.

Yes. The carousel includes proper ARIA roles, accessible slide labels, and respects reduced motion preferences when autoplay is enabled.

Use consistent image dimensions across slides. Avoid mixing very different aspect ratios, as that may cause layout shift (CLS).

Yes. Use the Animation type setting in the section configuration to switch between available transitions such as Horizontal slide or Fade.

If you need complex text positioning, layered content, or structured call-to-action layouts, use a standard Hero Banner section instead.

Yes. It is fully responsive and supports swipe gestures on touch devices, pointer interaction on desktop, and keyboard accessibility.

If Pause on interaction is enabled, autoplay will stop after a user interacts with the carousel. This behavior improves accessibility and usability.

Yes. Use the Border radius setting in the section configuration to apply rounded corners.

← Previous: Hero (Optional Slides) Next: Large Image with Text Box →

Questions? Chat with us.

Ask questions about the theme docs

Hi! I'm your theme documentation assistant. Ask me anything about the Multipurpose theme setup, sections, or settings.

AI answers from theme docs