Skip to main content

Slideshow v1

Combines images, text, and call-to-action buttons in your slideshow

A slideshow is a quick and interactive way to showcase content and information on your site. Slideshow lets you display your most popular products/collections or shout out about what's new with a call-to-action button.

slideshow demo

  1. In the theme editor (Customize), click Add section
  2. Locate Slideshow
  3. Save

Section settings​

1. Design settings​

-Social meida icon​

Add social media icons by pasting SVG code into the input fields and selecting the corresponding links.

slideshow demo

-General settings​

Section color scheme: lets you select a predefined color scheme for the section, which applies to the text and background.

Section Padding allows you to specify spacing before or after sections or both

general demo

Slide settings​

Customize each slide by adjusting its content, colors, and button styles to best showcase your product or message.

general demo

1. Image​

Upload or select an image to represent the slide. This image serves as the slide’s background or main visual element.

2. Content background color​

Choose a background color for the text and button overlay. This helps improve contrast and readability against the slide image.
Example: #7B6450

3. Title​

Enter a short headline for the slide.
Example: Click & Type Deals

4. Subtitle​

Use this field for a supporting message or description.
Example: Everything You Need for the Perfect Setup

Button Settings​

Customize the call-to-action button that appears on the slide.

5. Button text​

The label displayed on the button.
Example: ALL PRODUCTS

Link the button to a product, collection, or any internal/external URL.
Example: Linked to All Products

7. Button mode​

Choose the visual tone of the button:

  • Light – For dark backgrounds
  • Dark – For light backgrounds
  • Accent – Uses the theme's accent color
    Selected: Accent

8. Button style​

Select the button’s hierarchy or emphasis style:

  • Primary
  • Secondary
  • Tertiary
    Selected: Secondary

9. Button size​

Adjust the button size:

  • Small
  • Medium
  • Large
    Selected: Small

10. Button border radius​

Set the corner roundness of the button.
Example: 3rem for a pill-shaped appearance.

11. Button padding​

Control the spacing inside the button (top-bottom and left-right).
Example: 1.4rem