Taiga
documentation

Slideshow

Slideshow section enhances the visual impact of your website by allowing multiple hero banners to be displayed sequentially in a slider format. Typically positioned at the top of the homepage, this section effectively showcases a series of images, each overlaid with titles, body text, and one or more call-to-action (CTA) buttons.

✅ Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Slideshow Section.
    Click on 'Add section' and select 'Slideshow' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Slideshow section, click 'Save' to implement your adjustments.

Section Settings:

General:

Color Scheme: Customize the color palette to match your branding. This setting affects the background color of the slider and also to the arrows. 
Autoplay: Enable or disable the autoplay feature. If enabled, adjust the autoplay interval with a slider that offers choices ranging from 2 to 8 seconds.

 Desktop Layout:

Show Arrows: Toggle to display navigation arrows.
Full Width: Set the slideshow to span the full width of the viewport.
Section Height: Choose between a full screen (relative) height or a custom height Set by pixels, adjustable via a slider from 200px to 1200px.
Margins: Set the top and bottom margins to ensure the slideshow fits neatly within the site’s layout.

Mobile Layout:

Show Arrows: Option to display navigation arrows.
Section Height: Similar to desktop, with pixel height adjustable from 200px to 800px.
Margins: Configure top and bottom margins to optimize the slideshow’s appearance on mobile devices.

Customize Blocks:

Slide Block:

Image Selector: Choose an image for the desktop view; landscape orientation is recommended. For mobile, a different image can be selected, preferably in portrait orientation to suit smaller screens.
Rich Text Editor: Add a heading and body text. Selecting a heading style will affect SEO and accessibility due to changes in the heading hierarchy.
Banner Link (optional): If not using buttons, the entire slide can link to a designated URL, turning the slide into a clickable area.
First Button and Second Button:
Label: Set the text for the button.
Link: Specify the URL where the button will redirect.
Button Style: Choose from primary, secondary, or link styles.
Color Scheme Overlay Opacity: Adjust the transparency of a color overlay to enhance text visibility against the background image.

Style Settings:

Desktop Layout:
Size Modifier (for text): Adjust the text size from tiny to outrageous.
Text Content Max Width: Choose how much of the slide's width the text occupies, with options ranging from 1/12 to 12/12 of the width of the slider.
Content Position and Text Alignment: Customize where and how the text appears within the slide.


Mobile Layout:

Size Modifier (for text): Similar options as desktop for adjusting text size.
Text Alignment: Choose left, center, or right alignment.
Content Position: Select whether the text appears at the top, middle, or bottom of the slide.