Lookbook slider

Learn how to use a Lookbook slider to show off products for your store

Lookbook slider provides an interactive and engaging user experience, leading to higher levels of user engagement and interaction.

How to add a Lookbook slider

Steps

  1. In the theme editor (Customize), click Add section.

  2. Locate Lookbook slider.

  3. Make necessary changes.

  4. Save.

How to edit a Lookbook slider

Section settings

General

Enable the Use color scheme in container checkbox to apply this color scheme for the container.

Section header

Use the provided text fields to add a suitable Heading.

  • Leave it blank if you do not want to display it

You can also change the Heading size to:

  • Heading xs

  • Heading sm

  • Heading md

  • Heading lg

  • Heading xl

  • Heading 2xl

  • Display md

  • Display lg

  • Display xl

Highlight text

How to apply Highlight text to the section heading and block headings?

Use the provided text fields to add a suitable Subheading and Description.

  • Leave them blank if you do not want to display them

Image settings

  • Image: Select/upload an image to the lookbook.

  • Image ratio: Adapt to image/ Square/ Potrait/ Landscape.

  • Desktop image position: Set where the image is displayed on desktop - Left/ Right.

  • Hotspot color: Set the color of the hotspot - Light/ Dark.

Product cards

Set how the product cards are displayed in the slider.

  • Image ratio: Set the image ratio of the product cards.

  • Products per row: 1-2 products

Block settings

You can add multiple Product blocks to the Lookbook slider section.

To tag product blocks on the item image, you must add the chosen Product. Then, use the Vertical alignment and Horizontal alignment to adjust the annotation icon.

Last updated