View Categories

Shop the look slider

4 min read

The appearance of the “Shop the Look slider” #

Section title settings #

SettingsDescription
Page content widthFixed width (default): This section will display in the default container. (You also change the default layout page width from “Theme Settings“)
Full width: This section will be displayed full width in the browser.
Section headerRichText: This is the heading for the lookbook section. Learn more about RichText Editor
Heading sizeExtra Large: This is the large text size of the section heading. Desktop size: 90px, Mobile Size: 45px
Large: This is the large text size of the section heading. Desktop size: 79px, Mobile Size: 35px
Medium: This is the medium text size of the section heading. Desktop size: 52px, Mobile Size: 30px
Small (Default): This is the medium text size of the section heading. Desktop size: 35px, Mobile Size: 25px
Extra Small: This is the medium text size of the section heading. Desktop size: 30px, Mobile Size: 22px
SubheadingThis is the section subtitle.
Heading alignmentLeft: Aligns the content to the left.
Right:
 Aligns the content to the right.
Center: Aligns the content to the center.
Mobile heading alignmentLeft: Aligns the content to the left.
Right:
 Aligns the content to the right.
Center: Aligns the content to the center.
Desktop heading positionTop of the section: The heading will display top of the section.
Inside the column:
The heading will display inside the section.

Image settings #

SettingsDescription
ImageUpload the lookbook banner image here.
Image heightAdapt to image: Uses the aspect ratio of the lookbook image the other images are cropped.
Small: This is the smallest height of the lookbook. Desktop height: 478px, Mobile height: 195px
Medium: This is the medium height of the lookbook. Desktop height: 500px, Mobile height: 300px
Large: This is the maximum height of the lookbook. Desktop height: 695px, Mobile height: 435px
Desktop image widthSmall: This is the smallest width of the lookbook.
Medium: This is the medium width of the lookbook.
Large: This is the maximum width of the lookbook.
Desktop image placementImage first: Displays the image on the left.
Image second: Displays the text on the left.
Round cornerIf you enable it, the section corners will be rounded.
Product column offsetNone: No product column offset.
Small: 50px, product column offset.
Medium: 100px, product column offset.
Large: 150px, product column offset.

Product card #

SettingsDescription
Image ratioAdapt to image: The aspect ratio of the collection images is cropped.
Portrait: uses a 2:3 cropping ratio to the images.
Square: uses a 1:1 cropping ratio to the images.
Landscape:  uses a 3:2 cropping ratio to the images.
Round the cornersIf you enable it, the product image corners will be rounded.
Show second image on hoverDisplays the second product image if the customer hovers their cursor over the product image.
Show titleYou can change position by following the options.
– Top left (default)
– Top center
– Top right
– Bottom left
– Bottom center
– Bottom right

NOTE: Position is automatically optimized for mobile.
Show priceYou can display, show, or hide product titles for specific sections.
Show vendorYou can display, show, or hide product vendors for specific sections.
Show product ratingYou can display, show, or hide product ratings for specific sections.
Show badgesYou can display, show, or hide product badges for specific sections.
Badge position on desktopYou can change position by following the options.
– Top left
– Top center
– Top right
– Bottom left
– Bottom center
– Bottom right
 (default)
Enable action buttonsQuick shop button: You can enable/disable the quick shop button for the specific section.
Cart icon: You can enable/disable the add to cart icon for the specific section.
Countdown settings– You can enable/disable the countdown time.
IMPORTANT: You must need to configure a countdown metafield to display the countdown timer for a specific product. Learn more
– If you enable it, the countdown timer will be positioned over the product image. By default, the countdown time will be displayed below the product image.
– You can change the color of the countdown timer.

Colors #

SettingsDescription
Color schemeThis is a color scheme option to change the color of the section
Hotspot bullet active colorYou can change the color of the hotspot bullet.

Section padding #

SettingsDescription
Desktop: Padding topThe section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Desktop: Padding bottomThe section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Mobile: Padding topThe section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile
Mobile: Padding bottomThe section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.

Powered by BetterDocs

Leave a Reply

Your email address will not be published. Required fields are marked *