Create a new Lookbook
In the previous post, you learned about the Nitro Lookbook app. Now, let's create your own lookbook!
There are two ways to create a new Lookbook:
1. In app dashboard, click Create new Lookbook button
1. Choose layout
Select a layout for your lookbook, enter Lookbook title
2. Customize
In this step, we go to add images and manage items for lookbook
- Add images: Select images from media, products, collections, or your uploaded files. Additionally, you can add images from instagram (please connect). Search or filter to add images faster
- Manage items: Click on an image you want to configure the hotspot and display the tooltip on the Lookbook, this is the most important part of our app. Click here to learn how to customize
General settings: you can config item information such as: change image, title, alt, item link, description
3. Display
With Grid, Masonry, List & Slider layout. You can add hotspot types such as product, image, text, link
Now, let's adjust the layout. All 4 Lookbook layouts have common options such as:
With slider layout, there will be some additional options:
- Slider group: a group of sequential images that may be moved back and forth through when click next/previous slider.
- Type: choose a type for slider
- Show navigation: show button prev/next
- Show pagination: show dots on slider
- Speed (ms): adjust the time interval for the next slide
- Rewind slider: creates a seamless loop
- Autoplay: automatically advance through slides at a predefined interval, without requiring user interaction
And Shop the look grid, Shop the look slider layout, you can only add product hotspot
With Shop the look grid layout & Shop the look slider layout there will be options (you can adjust for Desktop/Tablet/Mobile)
* General
- Always show hotspot style draw: you can enable show hotspot style draw here
- Column number: display column per row
- Image width (not working with mobile): Adjust the width of images for optimal display on Desktop & Tablet
- Gap item: Set the space between items in the lookbook
- Gap image with product: Adjust the spacing between product images and their corresponding product descriptions to enhance visual clarity and prevent clutter.
- Gap product: Manage the spacing between individual products in the lookbook to create a seamless and aesthetically pleasing presentation.
- Hide Variant: Choose to hide product variants in the lookbook display if not necessary. This helps streamline the appearance, making the layout more minimal and focused.
- Preset product: Use product presets to define uniform styles
* Product side:
- Background color: quick background color configuration
- Width: adjust width for product section
- Border radius: config border-radius for product section
- Horizontal align: good for Shop the look Grid layout
- Vertical align: good for Shop the look Slider layout
- Spacing: adjust padding & margin
* Ordering: Order variations in your lookbook in a logical flow
* Custom css
