Slideshow

Written by Nelly

Last updated 6 days ago

47 views

On this page

The Slideshow section allows you to create the Slider with images, Customers can swipe to see the next images or they watch it autoplay. You also can add texts, call-out buttons for them.

It is usually located on Homepage. However, Shopify 2.0 allows you to add the Slideshow section to any pages that you wanna use.

1. How to access the Slideshow section?

Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Slideshow.

2. How to customize the Slideshow section?

2.1. Slide block

Click on Slideshow section > Add block > Slide block

On each block, you can configure:

2.1.1. Slide

Image: This option allows add main image for the slide
- Select: Choose or upload the main image for the slide.
- Explore free images: Browse a library of free images to use.
Mobile image: Choose or upload a separate image optimized for mobile devices.
Note: If no mobile image is set, the desktop image will be used.
Link URL: Add a link here to make the entire image clickable.
Note: The whole image becomes clickable.
Open in new tab: Toggle this on to open the link in a new browser tab; off means it opens in the same tab.
Color scheme: Choose a color and text scheme for the slide

2.1.2. Desktop

Content position: Select where the content appears on desktop view. Options include: Top left, Top, Top right, Center, Center left, Center right, Bottom right, Bottom left, Bottom
Text alignment: Choose how the text is aligned on desktop—left, center, or right.

2.1.3. Mobile

Content position: Set the position of content for mobile view independently from desktop.
Text alignment: Choose how the text is aligned on mobile devices—left, center, or right.

2.1.4. Content background

Background content: Toggle to show or hide a background behind text for better readability over the image.

Background color opacity: Adjust the transparency of the background color (0% = fully transparent, 100% = fully opaque).
Box content square: Toggle to force the background box into a perfect square shape.
Rounded full: Toggle to apply fully rounded corners to the content background box.
Use border content: Toggle to show or hide a border around the content box.
Border opacity: Adjust the transparency of the border around the content box.
Border style: Choose the style of the border (e.g. solid, dashed, dotted).

Desktop

Border padding: Set the space between the border and content (in pixels).
Padding vertical: Adjust the vertical padding (top and bottom spacing) inside the content box.
Padding horizontal: Adjust the horizontal padding (left and right spacing) inside the content box.
Content min width: Set the minimum width of the content area in pixels.

Mobile

Border padding: Set the border padding specifically for mobile view (in pixels).

2.2. Slideshow section

You can configure some general options for the section below:

2.2.1. Image height

Image height: Choose how the slideshow image height is set—either Fixed height or Adapt to image (auto adjusts to image's natural height).
Fixed height: Set a specific height in pixels for desktop slides.
Mobile image height: Same as above, but applied to mobile view.
Mobile fixed height: Set a specific height in pixels for mobile slides.

2.2.2. Carousel settings

Fade effect: Toggle to use a smooth fade transition between slides instead of a sliding motion.
Loop: Toggle to make the slideshow cycle continuously (it restarts automatically after the last slide).
Auto play: Set how many seconds each slide is shown before moving to the next automatically (set 0 to disable).
Pause on hover: Toggle to pause autoplay when the user hovers the mouse over the slideshow.

2.2.3. Prev/Next button

Use navigation: Toggle to show/hide previous/next arrows on the slideshow.
Visible: Choose whether arrows are Always shown or only on Hover.
Style: Set the button appearance — e.g., Outline, Solid, etc.
Shape: Define arrow shape — Rounded, Square, etc.
Size: Choose button size — Small, Medium, or Large.
Hide on mobile: Toggle to hide arrows on mobile devices.

2.2.4. Pagination

Use pagination: Toggle this on or off to show or hide the pagination dots.

Style: Select the visual style of the dots (e.g., Default, which may include solid, outline, etc., depending on the platform).
Position: Choose the position of the dots – Left, Center, or Right.
Rounded: Toggle this to make the dots rounded. If off, the dots may appear square or rectangular.
Space between dots: Adjust the spacing between each pagination dot (in pixels).
Space between pagination and content: Adjust the vertical spacing between the pagination dots and the slideshow content above (in pixels).
Hide on mobile: Enable this option to hide pagination on mobile devices.

2.2.5. Options for layout sections

Display colors by section: When enabled, each section can have its own distinct color settings.
Color scheme: Allows you to choose a predefined set of colors (e.g., Scheme 5) for text and background elements.
Background section overlay: Adjusts the opacity of the overlay color on top of the background (e.g., 0.4 = 40% opacity).
Make section full width: When enabled, the section stretches across the entire width of the screen, removing default margins or padding on the sides.

2.2.6. Section padding

Top padding: Sets the vertical spacing (in pixels) above the section.
Bottom padding: Sets the vertical spacing (in pixels) below the section.
Rate padding (mobile): Defines the vertical padding as a percentage for mobile devices, allowing responsive spacing.

2.2.7. Custom CSS

Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.