C: Lookbook Product Gallery App User Guide

• App Version: 1.0.0
• Our Support Email: supportshpfy@capacitywebsolutions.com

Thank you for purchasing C: Lookbook Product Gallery Shopify App. If you have any difficulty with this App or you find an issue, please feel free to send us a message: supportshpfy@capacitywebsolutions.com

Below you will find the detailed documentation on how to use our App and we wish you have a great experience with our Shopify App.

App Installation

1. Visit our Shopify App page: C: Lookbook Product Gallery.

2. Click on the Install button to begin installation.

3. Pricing: $3.99/month with a 7-day free trial.

Enable App Embeds

>> Go to Online Store >> Themes >> Current Theme >> Theme Customize >> App Embeds Section then please follow below screenshot OR watch video guide by (click here)

Add app block

Step 1: >> Go to Online Store >> Themes >> Current Theme >> Theme Customize >> Sections then please follow below screenshot OR watch video guide by (click here)

Step 2: >> Go to Online Store >> Themes >> Current Theme >> Theme Customize >> Sections then please follow below screenshot.

• Select App Block: In the left sidebar, go to Apps → C: Lookbook Gallery.
• Enter Lookbook ID: Paste the ID from your app into the Lookbook ID field.
• Add Heading: Enable heading, enter text, and adjust size, alignment, and color.
• Add Description: Enable description, enter text.

• Description Style:
  • Choose Subtitle or Body.
  • Adjust Description Color.
• Section Customization:
  • Set Background Color (or keep Transparent).
  • Adjust Top / Bottom / Left / Right Padding.
• Save Changes: Click Save (top right) to apply updates.

Manage Lookbook

>> To access the Manage Lookbook, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Lookbooks.

Below are the key actions you can perform for manage lookbook:

1. Filter Lookbook: Filter lookbook by given tabs and search bar, Sort lookbook by given options
2. Edit, delete and copy id: Edit lookbook by clicking edit button, delete lookbook by cliking delete button and copy unique id by clicking copy button.
3. Bundle Actions: Change status of lookbook & and delete lookbook by selecting lookbook and click delete or change status button.
4. Create a New lookbook: Click here to learn how.

Create Lookbook

Step 1: Navigate to Admin >> Apps >> C: Lookbook Product Gallery and click the Create new lookbook button.

Step 2: On the next screen, fill in the required details in the form and click the Save button.

Below are the key actions you can perform for create lookbook:

1. Choose layout: Click here to learn how.
2. Gallery: Click here to learn how.
3. Custom CSS: Click here to learn how.
4. Display: Click here to learn how.
5. Save & Publish: Click here to learn how.
6. Preview: Click here to learn how.

Choose layout

Step 1: Select Choose layout tab

This form help you to create new lookbook by entering or selecting the required fields as shown in the image above.

• Lookbook Title: Enter the name for Lookbook. This text will be displayed as title for lookbook.
• Layout type: Choose a Layout type. This will help to show images in selected layout.
• Image size: Select Image size. It shows image in Square, landscape, portrait or adapt to image, according to selected image size.
• Column spacing:Select Column spacing. It's add gap between images and it's values dicide with selected Column spacing.
• Thumbnail width:Enter Thumbnail width. It increase image sharpness.

Select hotspot

Step 1: Click a Select hotspot from Hotspot tab.

Step 2: select hotspot from list of hotspot.

Select skin effect

Step 1: Click a Select skin effect from Hotspot tab.

Step 2: select skin effect from list of skin effect.

Select visibility

Step 1: Select checkbox in which device you want to hide lookbook.

Gallery

Step 1: Select Gallery tab

Add images: Select images or videos from media, products, collections, or your uploaded files. Use search or filters to find and add them faster.

Manage images

• Setting button: Click Setting button for config image information such as: title, alt text, description, show button, item link, change window, second image( hover image ).
• Replace button: Click Replace button for replace current image by slecting image from same model that use for select image.
• Hotspot button: Click Hotspot button, it open hotspot container and this container use for manageing hotspots.
• Remove button: Click Remove button, it delete image from image list.

Manage Hotspots

Step 1: Click a Select skin effect from Hotspot tab.

• Add hotspot by click on add text, image or product button according to your need and add hotspot.
• If you want to edit already added hotspot then just click edit button that show on hotspot.
• If you want to remove already added hotspot then just click remove button that show on hotspot.
• Drage number that have on hotspot's image for set position of hotspots.

Custom CSS

Override our styles to make the gallery match the rest of your site.

Display

Override our styles to make the gallery match the rest of your site.

• Number of columns: Adjust the number of columns on desktop, tablet, mobile.
• With Grid, Row, Masonry & Slider layout Number of columns is changeable but in List layout it’s disable.
• With Grid layout there will be some additional options:
  • Adjust width and height according to user need using arrows that have given on image.

Save & Publish

Notice:

• Status must be Active for the lookbook to be displayed
• App Embeds code must be Active our App Embeds code Click here to learn how.

Way:1 Select Page and template where lookbook you want to add and click “Go to Customize Theme” button.

Paste Lookbook ID that copied automatically when you click “Go to Customize Theme” button.

Way:2 In the Theme Editor (Online Store → Themes → Customize), open your desired page, click Add block → Apps → C: Lookbook Gallery, set the Lookbook ID and other options, then Save Click here to learn how.

Customize App Block

• Lookbook ID:
  • Enter a unique identifier for your gallery (useful if you create multiple lookbooks).
• Heading & Description:
  • Enable Heading: Toggle the main title on/off.
  • Heading: Add your section title.
  • Enable Description: Toggle description text on/off.
  • Description: Write a short description about your gallery.
• Styling Options:
  • Heading Size: Choose Small / Medium / Large.
  • Heading Alignment: Left / Center / Right.
  • Heading Color: Set a custom color.
  • Description Style: Choose Subtitle or Body text.
  • Description Color: Customize text color.
• Section Customization:
  • Background Color: Set section background (solid or transparent).
  • Padding Controls: Adjust top, bottom, left & right spacing.

Notice:

• Status must be Active for the lookbook to be displayed
• App Embeds code must be Active our App Embeds code Click here to learn how.

Preview

• Layout type: This will help to show images in selected layout.
• Image size: It shows image in Square, landscape, portrait or adapt to image, according to selected image size.
• Column spacing: It's add gap between images and it's values dicide with selected Column spacing.
• Thumbnail width: It increase image sharpness.
• Hotspot: It shows tag hotspot in diffrent style layout. Click here to learn more.
• Tooltip: It shows tag tooltip in diffrent style layout. Click here to learn more.
• Skin Effect: It shows images in diffrent style layout. Click here to learn more.

Global presets

To access the Global presets, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Global presets.

1. Customize Colors: Click here to learn how.
2. Customize Hotspots: Click here to learn how.
3. Customize Tooltips: Click here to learn how.

Customize Colors

To access the Customize Colors, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Global presets >> Colors.

• From the Color list page, click the Add new color button for adding new Color.
• In the settings, you can customize the title & color.
• After configuring the settings, click the Save button to save all colors changes. You can also discard all color changes from contextual save bar.
• After configuring the settings, click the Save button to save particular color changes. You can also duplicate it, or delete it as needed.

Customize Hotspots

To access the Customize Hotspots, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Global presets >> Hotspot.

• From the Hotspot list page, click the Add new Hotspot button for adding new Hotspot.
• In the settings, you can customize the Title, Icon & other hotspot info:
  • Hotspot icon: choose an icon for the hotspot.
  • Hotspot effect: choose a type effect.
  • Config Icon Size, Width, Height, Border radius, background, border, & icon color for the hotspot.
• After configuring the settings, click the Save button to save all hotspots changes. You can also discard all hotspot changes from contextual save bar.
• After configuring the settings, click the Save button to save particular hotspot changes. You can also duplicate it, or delete it as needed.

Customize Tooltips

To access the Customize Tooltips, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Global presets >> Tooltips.

• From the Tooltips list page, click the Add new Tooltip button for adding new Tooltip.
• In the settings, you can customize the Title, General & Design
• General settings:
  • Placement: Select display position for tooltip .
  • Spacing: Adjust the distance between the image and text.
  • Padding: Adjust padding for item.
  • Style: There are 2 styles (vertical & horizontal) .
  • Image size: Change the size of the image.
• Design settings:
  • Border radius: Tooltip rounding.
  • Gap: Distance between image and content.
  • Width: Adjust tooltip width.
  • Background color: Config Tooltip background color.
  • title, price, description: Adjust color and font size for all
• After configuring the settings, click the Save button to save all tooltips changes. You can also discard all tooltips changes from contextual save bar.
• After configuring the settings, click the Save button to save particular tooltip changes. You can also duplicate it, or delete it as needed.
• Note: For the Image and Text, you can also perform similar actions as with the Product.

App settings

To access the App settings, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> App settings.

1. Account: Click here to learn how.
2. General: Click here to learn how.

General

To access the General, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> App settings >> General.

• Product interface:
  • Product pricing: Price of the products in the tooltip can be the Final price or their compare at price (if there was).
• Product badge:
  • Sale badge style: Border Radius, Sale text color & Sale background color.
  • Sold out badge style: Border Radius, sold out text color, Sold out background color.

Account

To access the Account, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> App settings >> Account.

• Account details:
  • Show App active status.
  • Show Account active plan.
  • Change pricing plan by clicking change plan button
• Store details:
  • Show store domain
  • Show store email

Skin Effect

To access the Skin Effect, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Skin Effect.

• Show all skin effect that have created by you or provided by app preview in list.
• Edit, clone and delete skin effect that you created by clicking edit, clone and delete button.
• Clone and edit global skin effect that provided by C: Lookbook Product Gallery app.

• Customize skin effect: Click here to learn how.

Customize skin effect

To access the Customize Skin Effect, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Skin Effect.

Open edit skin effect page by clicking edit or clone and edit button for edit skin effect.

• Customize General: Click here to learn how.
• Customize Layout: Click here to learn how.
• Customize Media: Click here to learn how.
• Customize Layers: Click here to learn how.

Customize General

To access the Customize General, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Skin Effect >> Edit button / clone & edit button >> General tab.

• Edit skin effect title.
• Add image link for see preview image you want.
• Select other tabs for other Customize.

Customize Layout

To access the Customize Layout, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Skin Effect >> Edit button / clone & edit button >> Layout tab.

Layout is use for change style of main container that contain whole skin effect.

Design:

• Background: Change background color of main container.
• Spacing: Change Margin & Padding of main container.
• Border: Change Border’s width, style, color, and radius of main container.
• You can change all this on normal & hover state.

Animation:

• Change Transition Duration (ms), Transition Delay (ms), Transition Easing & Transform Origin of main container.

Customize Media

To access the Customize Media, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Skin Effect >> Edit button / clone & edit button >> Media tab.

Media is use for change style of image that place in skin effect.

• Design:
  • Background: Change background color of image.
  • Spacing: Change Margin & Padding of image.
  • Border: Change Border’s width, style, color, and radius of image.
  • Sizing: Change width, height, max-width, max- height of image.
  • You can change all this on normal & hover state.
• Animation:
  • Animation: Change Animation Type, Transition Duration (ms), Transition Delay (ms), Transition Easing & Transform Origin of image.
  • Effect: Change Opacity, Scale, Translate X, Translate Y & Rotate (deg) of image.
  • You can change Effect on normal & hover state.

Customize Layers

To access the Customize Layers, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Skin Effect >> Edit button / clone & edit button >> Layers tab.

Layers is use for Add content & style of container and layers that place on skin effect.

• Content:
  • Content: Change Wrapping Tag, Content & Title of layer or container.
  • Title: Change Title of layer or container.
  • Attribute: Change CSS classes & CSS style of layer or container.
  • Action: Change Action of layer or container.
• Design:
  • Display: Change Display & Position of layer or container.
  • Background: Change background color of layer or container.
  • Spacing: Change Margin & Padding of layer or container.
  • Border: Change Border’s width, style, color, and radius of layer or container.
  • Sizing: Change width, height, max-width, max- height of layer or container.
  • Typography: Change Font Family, Font Size, Text Align, Font Weight, Text Align, Text Decoration & Letter spacing of layer or container.
  • You can change all this on normal & hover state.
• Animation:
  • Animation: Change Animation Type, Transition Duration (ms), Transition Delay (ms), Transition Easing & Transform Origin of layer or container.
  • Effect: Change Opacity, Scale, Translate X, Translate Y & Rotate (deg) of layer or container.
  • You can change Effect on normal & hover state.

Manage Translation

To access the Manage Translation, navigate to Admin >> Apps >> C: Lookbook Product Gallery >> Translation.

Below are the key actions you can perform for Manage Translation:

1. List of all language that added by users.
2. Translate lookbooks: Click here to learn how.
3. Translate Skin effects: Click here to learn how.

Translation Lookbooks

Below are the key actions you can perform for Translation lookbooks:

• Select lookbook from list of lookbooks in which you want to translate the lookbook data.
• Select the language in which you want to translate the data.
• Edit or add translation of all lookbook data and save it.

Translation Skin effects

Below are the key actions you can perform for Translation Skin effects:

Notice: Not remove or translate {{title}}, {{alt}}, {{desc}}, {{desc:words:10}}, {{desc:chars:10}}, {{alt}} & {{link}}.

• Select Skin effect from list of Skin effects in which you want to translate the Skin effect data.
• Select the language in which you want to translate the data.
• Edit or add translation of all Skin effect data and save it.

Customer Support

If you have any questions, please do not hesitate to contact us at supportshpfy@capacitywebsolutions.com.We are happy to help!

Please add our email: supportshpfy@capacitywebsolutions.com to your address book to ensure our response email isn’t marked as spam mail.

We will try our best to reply your emails as soon as possible , except weekends and National Holidays.

Thank you.
Capacity Web Solutions Team

Credits

• PHP
• Mysqli
• React JS
• Swiper js Library
• Shopify API
• Shopify Polaris
• Shopify Theme Liquid