Truly fine

Documentation.

Slideshow section

Last update:

The slideshow section is a powerful section that gives you the ability to showcase any kind of content in a slideshow format.

Section settings

Make section fullwidth: Setting the section to fullwidth will make it span across the entire browser viewport.

Slide height: Controls the height of the slideshow. Using Adapt to first image will make the slideshow height equal to the height of the first image (regardless of other images’ heights). Small (320px), Medium (480px), and Large (560px), are predefined, fixed heights that the theme dictates. Note that in mobile the height is adjusted automatically for best appearance.

Auto-rotate slides: Turning this on will make the slideshow play automatically.

Change slides every: If Auto-rotate slides is turned on, this settings controls the speed at which slides will be alternating (in seconds).

Slideshow description: This field will add a description on the slideshow for screen readers. It is highly recommended you fill this in to improve your shop’s accessibility.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.

Image slide block

This section consists of multiple “Image slide” blocks with the following settings:

  1. Image: The image of the slide.
  2. Overlay background: Optional gradient background to be used as an overlay (over the image and under the content).
  3. Heading: The title of the slide.
  4. Heading size: The size of the slide’s title.
  5. Subheading: A brief description or subtitle of the slide.
  6. Primary button label: Filling this in will display a button under the heading and subheading of the slide.
  7. Display primary button as text link: Optionally make the button appear as a textual link.
  8. Primary button color scheme: Choose the color of the primary button.
  9. Primary link: Set a link for your primary button (page, collection, product, external link, etc).
  10. Secondary button label: Filling this in will display a secondary button under the heading and subheading of the slide, next to the primary button.
  11. Display secondary button as text link: Optionally make the button appear as a textual link.
  12. Secondary button color scheme: Choose the color of the secondary button.
  13. Secondary link: Set a link for your secondary button (page, collection, product, external link, etc).
  14. Content position: Position the content (heading, subheading, button) anywhere you want on the slide.
  15. Content width percentage: Control the maximum allowed width (relative to the slide) that the slide’s content can span. Ignored on mobile.
  16. Mobile layout – Image: Optional secondary image to be displayed on smaller screen sizes only.
  17. Mobile layout – Heading size: The slide’s title size in mobile devices.
  18. Mobile layout – Content position: The slide’s content position in mobile devices.

Can't find what you are looking for? Feel free to submit a request.