Spark 1.0

Slideshow

The Slideshow section adds an auto-playing slideshow to your home page. Adjust the height and time between slides, and add a mobile-only image to ensure the best experience across devices.

Set up a Slideshow on the home page

To add a Slideshow section:

STEPS

  1. From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

  2. Scroll to the bottom of the home page sections and choose Add section.

  3. Choose Slideshow from the list of sections.

    This opens the Slideshow section settings.

  4. Adjust the Height and Mobile Height.

Set the slide image between 50% to 100% of its maximum height.

  1. Choose the Time between slides between 2 and 10 seconds.

  2. Adjust the Text shadow ammount to add more of a contrast with the slide image.

  3. Change the Text, Button text, Button background, and Overlay colors.

  4. Use the slider to choose how opaque the overlay color should be.

    Setting the opacity to 0% will turn the overlay color off and 100% will make the color completely opaque so the image will not be visible.

  5. Return to the list of Home page sections to find your new Slideshow section.

Use the drag handles to rearrange the order of you Home page sections:

  1. Add some slides using the Add slide button.

    For more information about the settings for each slide, see the Add slides to a Slideshow section.

  2. Click Save.

Settings reference

The Slideshow section has the following settings:

Height

Use the slider to set the height of the slide as a perecentage of the maximum height.

Mobile height

Use the slider to set the height of the slide on mobile as a perecentage of the maximum height.

Time between slides

Use the slider to choose how many seconds Spark should wait before switching slides.

Choose between 0 seconds and 10 seconds.

Heading size

Change the title heading of the slides between 48px to 72px.

Text shadow amount

Change the shadow to all slide text to add more of a contrast with the slide image.

Text color

Choose the text color for the entire slide.

Button text color

Choose the button text color.

Button background color

Choose the button background color of the button.

Overlay color

Choose the color of the overlay that will cover the entire slide.

Overlay opacity

Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.

Add a slide

To add a slide to a Slideshow section:

STEPS

  1. Make sure you are already editing the Slideshow section you want to change.

  2. Use the Add slide button to add a new slide.

  3. Use the Select image button to select or upload a slide Image.

  4. Use the Select image button to select or upload a Mobile image.

  5. Add a Heading.

  6. Add Subheading text to be displayed below the heading.

  7. You can choose how wide the heading and subheading appear with the Text max width slider.

  8. Add a Button label and Button link to be displayed as a call to action button on the slide.

  9. Choose the Text alignment for this content block.

    There are lots of options. For more information about them, see Text alignment in slideshows.

  10. Return to the list of Home page sections to find your Inline features section.

  11. Repeat this process until you've added all the features you need.

  12. You can change the order of the blocks by using the drag handles:

You can also use the Remove block button to remove a slide from this section entirely.

  1. Click Save.

Settings reference

Each slide has the following settings:

Image

Select or upload a image for the slide.

We recommend adding an image with the dimensions 3000px by 2000px.

Mobile Image

Select or upload an alternate image to display on mobile.

We recommend adding an image with the dimensions 1000px by 1500px.

Heading

Add heading text to be used above the list of featured products.

We recommend keeping this to just a few words long.

Subheading

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Text max width

Change how wide the subheading text can be at a maximum.

Button label

Add custom text for your call to action button.

We recommend keeping this between 1 and 3 words.

Button link

Choose a link for the call to action button.

Text alignment

Choose how the slide text should be aligned.

For more information about each option, see Text alignment in slideshows

Text alignment

In the Slidehow section, you can change how text is aligned in each slide.

The following Text alignment settings are available:

In the following diagram, you can see where of these settings would place your text::

  • Typography

  • Home page