FOURCORE.DOCS
Esses docs menu

Product slideshow#

Put featured products on an animated stage with buying controls.

Add this section#

Select Add section > Product slideshow on the template you want to edit.

Settings#

The settings below follow the same order as the theme editor.

General settings#

  • Heading: Enter the text to show. Read by screen readers. It is not shown.

Layout#

  • Height: Choose Full screen, Large, Medium, or Adapt to content.
  • Specification card position: Choose End or Start. Mirrored in right-to-left languages.
  • Heading size: Choose Small, Medium, or Large.
  • Image size: Choose Small, Medium, or Large.

Details#

  • Show reflection: Turn this on or off.
  • Show product rating: Turn this on or off. From a product reviews app that fills Shopify's standard rating fields.
  • Show SKU behind the image: Turn this on or off. Set very large, as an outline. Taken from the variant SKU.
  • Highlight the last heading word: Turn this on or off.
  • Show slide counter: Turn this on or off.
  • Show arrows: Turn this on or off.
  • Enable drag to turn products: Turn this on or off. Shoppers can turn products with Turn to face and Flip around, and spin them with Roll in. With a mouse they also lean toward the pointer.

Auto-rotate#

  • Auto-rotate slides: Turn this on or off. Shoppers can pause it, and it stops once they move the slides themselves.
  • Change slides every: Use the slider from 4 to 12 s.

Colors#

  • Color scheme: Choose a color scheme from Theme settings > Colors.
  • Specification card color scheme: Choose a color scheme from Theme settings > Colors.
  • Background image blur: Use the slider from 0 to 24 px.
  • Overlay opacity: Use the slider from 0 to 90 %.

Mobile layout#

  • Height: Choose Adapt to content or Full screen.
  • Heading size: Choose Small, Medium, or Large.
  • Image size: Choose Small, Medium, or Large.
  • Specification card: Choose Full or Small. Small leaves out the specification rows.
  • Show text: Turn this on or off.
  • Show arrows: Turn this on or off. Shoppers can always swipe.

Blocks#

Slide#

General settings#

  • Product: Choose a product.
  • Subheading: Enter the text to show.
  • Heading: Enter the text to show. Leave empty to use the product title.
  • Text: Enter and format the text.

Images#

  • Image: Choose an image from your library. A picture of the product with a transparent background works best. Leave empty to use the product's first image. 1600 x 1600px recommended.
  • Animation: Choose Turn to face, Unzip, Swing in, Lower and settle, Lift from the floor, Slide in, Light up, Scan in, Twist on, Roll in, Sprint in, Drop and bounce, or Flip around. How the image arrives and leaves.
  • Background image: Choose an image from your library. For a clear result, use an image around 2400 x 1350px.

Specifications#

  • Show the top spec as a measurement line: Turn this on or off. Drawn under the image. Best for a measurement such as a diameter.

Top spec row#

  • Label: Enter the text to show.
  • Value: Enter the text to show.

Middle spec row#

  • Label: Enter the text to show.
  • Value: Enter the text to show.

Bottom spec row#

  • Label: Enter the text to show.
  • Value: Enter the text to show.

Button#

Used only when no product is chosen.

  • Button label: Enter the text to show.
  • Link: Choose the page or address to open.

Tips#

  • Add your real content before fine-tuning spacing and colors.
  • Check the section at both computer and phone widths. Use Mobile layout for the phone-specific choices.