Ecomus Pages & Homepage Sections Main Sections

Slideshow section

The theme includes three slideshow sections:

Slideshow
Slideshow Center
Slideshow Split

They display promotional images with optional text, buttons, navigation, and autoplay.

1. Purpose

Creates an image slider for promotions, featured collections, campaigns, or brand messages. Customers can navigate manually or view slides automatically.

2. Common use cases

Homepage hero banner
Promotional campaigns
Featured collections
Product launches
Brand storytelling

3. How to add

Shopify Admin → Online Store → Themes → Customize → Add section → Select a Slideshow section

Slideshow and Slideshow Center

4. Main blocks

Slide: Adds desktop and mobile images, links, and banner content.
Content blocks: Adds headings, text, buttons, and supporting content.

5. Key settings

5.1. Slide block

Setting	Description
Desktop image	Uploads the main slide image.
Mobile image	Uploads a separate image for mobile devices.
Image link	Makes the slide clickable.
Color scheme	Controls the slide text and background colors.
Content position	Positions content separately on desktop and mobile.
Text alignment	Aligns slide content separately on desktop and mobile.
Content background	Adds a background behind the slide content.
Content border	Adds a border around the content area.
Content padding	Controls spacing inside the content area.

5.2. Section settings

Setting	Description
Image height	Sets slide height on desktop and mobile.
Fade effect	Uses a fade transition instead of horizontal sliding.
Enable loop	Restarts the slideshow after the final slide.
Autoplay	Changes slides automatically.
Use prev/next button	Displays navigation arrows.
Use dots	Displays slide indicators.
Color scheme	Controls the section colors.
Make section full width	Expands the slideshow across the browser width.

6. Difference between Slideshow and Slideshow Center

Slideshow: Supports flexible content positioning across the image.
Slideshow Center: Designed primarily for centered slide content.

Slideshow Split

7. Purpose

Creates a split slideshow where the image and content are displayed in separate areas. Suitable for layouts that need clearer separation between visual media and promotional text.

8. Main blocks

Slide split item: Adds desktop and mobile images, links, and content.

9. Key settings

9.1. Slide split item

Setting	Description
Desktop image	Uploads the desktop slide image.
Mobile image	Uploads a separate mobile image.
Image link	Makes the slide clickable.
Color scheme	Controls the slide colors.
Content position	Positions content on desktop and mobile.
Text alignment	Aligns content on desktop and mobile.

9.2. Section settings

Setting	Description
Image height	Sets slide height on desktop and mobile.
Use prev/next button	Displays navigation arrows.
Use dots	Displays slide indicators.
Autoplay	Changes slides automatically.
Pause on hover	Stops autoplay while the cursor is over the section.
Image first	Controls whether the image or content appears first on desktop and mobile.
Section padding	Adjusts spacing above and below the section.

10. Best practices

Upload separate mobile images when desktop images crop poorly.
Keep slide headings and descriptions short.
Use one clear call-to-action per slide.
Ensure text contrasts clearly with the image.
Avoid very fast autoplay.
Keep the number of slides limited to important content.
Use Slideshow Split when the image makes overlaid text difficult to read.

11. Common issues

Issue	Solution
Mobile image looks cropped	Upload a separate mobile image or adjust mobile height.
Autoplay is not working	Enable Autoplay and add more than one slide.
Navigation is missing	Enable arrows or dots and add multiple slides.
Text is difficult to read	Adjust the color scheme or enable a content background.
Slideshow stops unexpectedly	Check whether Pause on hover is enabled.
Split layout order is incorrect	Change the Image first setting for the relevant device.