Home page sections

Slideshow

Full-width slides with text, buttons, product cards and hotspots. Autoplay, arrows and dots are all optional.

Tips

Upload a separate mobile image for each slide when the desktop picture is wide. Tall phone images make a much better first impression.
While you edit a slide in the theme editor, the slideshow stays on that slide and pauses autoplay.
Three to four slides is plenty. The first slide does most of the work.

Settings

Section width

Setting	What it does
WidthDropdown	Full widthCustom width

Display and height

Setting	What it does
Desktop heightDropdown	Full screenExtra largeLargeMediumSmallOriginal (image height)
Mobile heightDropdown	Full screenExtra largeLargeMediumSmallOriginal (image height)

Setting	What it does
Show dots on desktopToggle	Toggle
Show dots on mobileToggle	Toggle
Dot colorColour	Shown only when it applies to the options chosen above.
Show arrows on desktopToggle	Toggle
Show arrows on mobileToggle	Toggle
Arrow shapeDropdown	CircleSquare Shown only when it applies to the options chosen above.
Arrow icon colorColour	Shown only when it applies to the options chosen above.
Arrow background colorColour	Shown only when it applies to the options chosen above.
Background opacitySlider	Shown only when it applies to the options chosen above.

Autoplay

Setting	What it does
Enable autoplayToggle	Toggle
Autoplay speed (seconds)Slider	Shown only when it applies to the options chosen above.
Pause on hoverToggle	Shown only when it applies to the options chosen above.
Transition effectDropdown	SlideFade
Loop slidesToggle	Toggle

Hotspot slides

Setting	What it does
Icon styleDropdown	Plus iconDot
AnimationDropdown	PulseBlinkStatic
Name tagsDropdown	Shows the name beside each marker. All screensDesktop onlyOff

Spacing

Setting	What it does
Top paddingSlider	Slider
Bottom paddingSlider	Slider

Blocks

Blocks are the pieces you add, remove and reorder inside the section, under Add block.

Slide

Media

Setting	What it does
Desktop imageImage	Image
Mobile imageImage	Image
Video URLText	Paste a YouTube, Vimeo, or direct .mp4 URL
Mobile fallback imageImage	Shown on mobile instead of video (YouTube/Vimeo only)

Content

Setting	What it does
SubheadingText	Text
HeadingText	Text
DescriptionRich text	Rich text
Heading sizeDropdown	H1 — largestH2 — mediumH3 — small
Content positionDropdown	Top leftTop centerTop rightMiddle leftMiddle centerMiddle rightBottom leftBottom centerBottom right
Text alignmentAlignment	Alignment

Button 1

Setting	What it does
LabelText	Text
LinkLink	Link
StyleDropdown	PrimaryOutlineText only

Button 2

Setting	What it does
LabelText	Text
LinkLink	Link
StyleDropdown	PrimaryOutlineText only

Button size

Setting	What it does
Button sizeDropdown	Large makes it one step bigger than the store's button size. StandardLarge

Color scheme

Setting	What it does
Color schemeColour scheme	Colour scheme

Overlay

Setting	What it does
Enable overlayToggle	Toggle
Overlay colorColour	Shown only when it applies to the options chosen above.
Overlay opacitySlider	Shown only when it applies to the options chosen above.

Content box background

Setting	What it does
Enable backgroundToggle	Toggle
Background colorColour	Shown only when it applies to the options chosen above.
Background opacitySlider	Shown only when it applies to the options chosen above.

Tagged product

Setting	What it does
ProductProduct	Shows a small product card on this slide.
Card positionDropdown	Bottom leftBottom centerBottom right Shown only when it applies to the options chosen above.
Color schemeColour scheme	Shown only when it applies to the options chosen above.
Small label above the titleDropdown	NoneProduct typeVendor Shown only when it applies to the options chosen above.
Show priceToggle	Shown only when it applies to the options chosen above.
Show add to cart buttonToggle	Products with more than one variant link to the product page instead.Shown only when it applies to the options chosen above.
On mobileDropdown	On a phone the card sits under the slide's buttons. Full cardCompact stripHidden Shown only when it applies to the options chosen above.

Hotspot slide

Setting	What it does
Desktop imageImage	Image
Mobile imageImage	Optional. Falls back to the desktop image if not set.
Show hotspots on mobileToggle	Toggle
Move hotspots on mobileToggle	Set separate positions for phones.Shown only when it applies to the options chosen above.

Content

Setting	What it does
SubheadingText	Text
HeadingText	Text
DescriptionRich text	Rich text
Heading sizeDropdown	H1 — largestH2 — mediumH3 — small
Content positionDropdown	Top leftTop centerTop rightMiddle leftMiddle centerMiddle rightBottom leftBottom centerBottom right
Content position on mobileDropdown	Same as desktopTop leftTop centerTop rightMiddle leftMiddle centerMiddle rightBottom leftBottom centerBottom right
Text alignmentAlignment	Alignment

Button label

Setting	What it does
LabelText	Text
LinkLink	Link
StyleDropdown	PrimaryOutlineText only
Button sizeDropdown	Large makes it one step bigger than the store's button size. StandardLarge

Color scheme

Setting	What it does
Color schemeColour scheme	Colour scheme

Overlay

Setting	What it does
Enable overlayToggle	Toggle
Overlay colorColour	Shown only when it applies to the options chosen above.
Overlay opacitySlider	Shown only when it applies to the options chosen above.

Hotspot 1

Setting	What it does
ProductProduct	Product
Horizontal positionSlider	Shown only when it applies to the options chosen above.
Vertical positionSlider	Shown only when it applies to the options chosen above.
Horizontal position on mobileSlider	Shown only when it applies to the options chosen above.
Vertical position on mobileSlider	Shown only when it applies to the options chosen above.

Hotspot 2

Setting	What it does
ProductProduct	Product
Horizontal positionSlider	Shown only when it applies to the options chosen above.
Vertical positionSlider	Shown only when it applies to the options chosen above.
Horizontal position on mobileSlider	Shown only when it applies to the options chosen above.
Vertical position on mobileSlider	Shown only when it applies to the options chosen above.

Hotspot 3

Setting	What it does
ProductProduct	Product
Horizontal positionSlider	Shown only when it applies to the options chosen above.
Vertical positionSlider	Shown only when it applies to the options chosen above.
Horizontal position on mobileSlider	Shown only when it applies to the options chosen above.
Vertical position on mobileSlider	Shown only when it applies to the options chosen above.

Hotspot 4

Setting	What it does
ProductProduct	Product
Horizontal positionSlider	Shown only when it applies to the options chosen above.
Vertical positionSlider	Shown only when it applies to the options chosen above.
Horizontal position on mobileSlider	Shown only when it applies to the options chosen above.
Vertical position on mobileSlider	Shown only when it applies to the options chosen above.

Hotspot 5

Setting	What it does
ProductProduct	Product
Horizontal positionSlider	Shown only when it applies to the options chosen above.
Vertical positionSlider	Shown only when it applies to the options chosen above.
Horizontal position on mobileSlider	Shown only when it applies to the options chosen above.
Vertical position on mobileSlider	Shown only when it applies to the options chosen above.