Emoll Theme Documentation

Lookbook

The Lookbook section creates a stylish, animated storytelling experience using a smooth sticky scroll effect. As customers scroll, images and text transition beautifully, offering a magazine-like visual journey. Perfect for showcasing brand stories, lifestyle imagery, campaigns, or creative visuals in an engaging way.

Lookbook Preview

1. How to Add the Lookbook Section

Feature pages, collections, brands, or products on your homepage or other pages. Follow these steps to add the Lookbook section:

  • Go to Shopify Admin ? Online Store ? Themes.
  • Click Customize on the Emoll-Apario theme.
  • Use the page selector to choose the page where you want to add or edit the Lookbook section.
  • Click Add Section (or select an existing Lookbook section if already added).
  • Click Save to apply your changes.

2. Lookbook Section Settings

Lookbook Settings Preview
  • Color Scheme: Choose a color scheme (e.g., Scheme 4) for background, text, and overall tone.
  • Heading: Enter the primary title for strong visual impact.
  • Heading Size:
    • H1: Large and bold, ideal for hero banners.
    • H2/H3: Smaller options for subtle layouts.
  • Heading Display: Choose how the heading appears:
    • Default: Shows the heading in its original style.
    • Uppercase: Converts the heading text to all capital letters.
  • Text: Add descriptive content for the promotion, collection, or story.

3. Configure Lookbook Blocks

Lookbook Block Settings
  • Adding a New Block: Click Add Lookbook Block to create a new block in the Lookbook List section.
  • Select Image 01:
    • Click Upload images to add the first image from your computer.
    • Or choose Explore free images to browse Shopify's free library.
  • Image Link 01: Enter a link directing the first image to a collection or page.
  • Select Image 02:
    • Upload the second image or select from free images.
    • This optional second image creates a dynamic, magazine-style layout.
  • Image Link 02: Add a link for the second image if needed.
  • Image Alignment: Position images on the Left or Right side of the block.
  • Image Width: Adjust the maximum width (e.g., 95) for layout control.
  • Heading: Add a block title (e.g., "INSPIRE") for the visual story.
  • Heading Size: Set heading size (e.g., H5) to match your design.
  • Text: Add descriptive or storytelling content for the block.
  • Text Position:
    • Top: Text appears above images.
    • Center: Text aligns vertically in the middle.
    • Bottom: Text appears below images.
  • Text Alignment:
    • Left: Align text to the left.
    • Center: Center the text.
    • Right: Align text to the right.
  • Removing a Block: Select an existing block and click Remove Block.