1. Collection Landing Page

How to create a collection landing page

Go to Admin -> Products -> Collections -> Create collection

After input the common collection information, on Theme templates select one of 4 types of collection landing template:

collection.landing-default: When choosing this template, the layout of this collection will follow the layout on Theme Settings - Collection page (landing).
collection.landing-grid: the layout of this collection will be Grid layout.

3. collection.landing-lookbook: the layout of this collection will be Lookbook layout.

4. collection.landing-masonry: the layout of this collection will be Masonry layout.

How to edit settings of collection landing page

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Collection Page(Landing)

You can see the settings in here: Theme settings - Collection page(landing)

2. Collection Page

How to create a collection page using different layout

Go to Admin -> Products -> Collections -> Create collection

After input the common collection information, on Theme templates select one of 5 types of collection template:

collection: When choosing this template, the layout of this collection will follow the layout on Theme Settings - Collection page.
collection.1-column: the layout of this collection will be 1-column layout.

3. collection.2-columns-left/collection.2-columns-right: the layout of this collection will be 2-columns-left/2-columns-right layout.

4. collection.3-columns: the layout of this collection will be 3-columns layout.

How to edit default settings of collection page

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Collection Page

You can see the default settings for collection page in here: Theme settings - Collection page.

How to override settings on default settings of collection page for a specific collection’s layout

Go to Admin -> Online Store -> Themes -> Customize -> from the Preview frame redirect to a Collection Page (by clicking on collection link on the navigation or type it on browser URL bar).

Open the section which have name follow current layout of that collection. Eg:Sections - 1-column settings

On this section we can override the default settings by ticking on the checkbox Use these values instead of default values to enable it then edit the settings below.

How to setup collection filter

NOTE: We used product tag to filter so we need to add tag to each product first. If current collection doesn’t have any tag, the filter block will not show.

Go to Admin -> Online Store -> Themes -> Customize -> from the Preview frame redirect to a Collection Page (by clicking on collection link on the navigation or type it on browser URL bar).

Open the section Filters

We have 3 types of filter layout using product tag:

To add a filter block to collection page:

Define which tag will show as Swatch & Color Swatch. If you’ve already setup it, please skip this step.

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Product Details Page

Go to Product options layout and specify which product option will show as Swatch or Color swatch on website.

2. On section Filter, add new filter block.

3. Enter Title and Tag List, check the preview & save.

How to setup collection widget on sidebar like banner, static content…

Go to Admin -> Online Store -> Themes -> Customize -> from the Preview frame redirect to a Collection Page (by clicking on collection link on the navigation or type it on browser URL bar).

Open the section Filters or Additional column(for right sidebar of 3-columns layout).

We have 5 types of widget: Category tree, Featured products, Image, Image with content inside, Text content

To add a widget to collection page, click on Add content and select the type of block you want.

Category tree: Define title & the navigation that will show on page.

2. Featured products: Define title & the collection of products. We have 2 type of layout: List or Slider.

3. Image & Image with content inside: Same settings as Banner Section.

4. Text content: Define title & html content will show on page.

3. Product Details Page

How to create a product using different layout

Go to Admin -> Products -> All products -> Add product

After input the common product information, on Theme templates select one of 5 types of product template:

product: When choosing this template, the layout of this product will follow the layout on Theme Settings - Product details page.
product.1-column: the layout of this product will be 1-column layout.

3. product.2-columns-left/product.2-columns-right: the layout of this product will be 2-columns-left/2-columns-right layout.

4. product.3-columns: the layout of this product will be 3-columns layout.

How to edit default settings of product page

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Product Details Page

You can see the settings in here: Theme settings - Product Details Page

How to override settings on default settings of product page for a specific product’s layout

Go to Admin -> Online Store -> Themes -> Customize -> from the Preview frame redirect to a product Page (by clicking on product on the website or type it on browser URL bar).

Open the section which have name follow current layout of that collection. Eg:Sections - 1-column products

On this section we can override the default settings by ticking on the checkbox Use these values instead of default values to enable it then edit the settings below.

How to setup product widget on sidebar like banner, static content…

Go to Admin -> Online Store -> Themes -> Customize -> from the Preview frame redirect to a product Page (by clicking on product link on the website or type it on browser URL bar).

Open the section which have name follow current layout of that collection. Eg:Sections - 1-column products

We have 4 types of widget: Featured products, Image, Image with text, Text content

To add a widget to product page, click on Add content and select the type of block you want.

Featured products: Define title & the collection of products. We have 2 type of layout: List or Slider.

2. Image & Image with text: Same settings as Banner Section.

3. Text content: Define title & html content will show on page.

4. Blog Pages

Blog landing page

Go to Admin -> Online Store -> Themes -> Customize -> from the Preview frame redirect to a Blog landing page (by clicking on blog link on the website or type it on browser URL bar).

Open Sections - Blog landing, in here you can change the number of Articles per row & number of row per page.

Blog post page

Go to Admin -> Online Store -> Themes -> Customize -> from the Preview frame redirect to a Blog post page (by clicking on blog link on the website or type it on browser URL bar).

Open Sections - Posts, in here you can show or hide the Author name & publish Date.

5. Contact Us Page

To create a contact us page, please go to Admin -> Online Store -> Pages -> Add page.

Choose template page.contact

On the content of page you can modify the HTML as you want. We’re using Bootstrap Grid & some helper class:

Spacing & alignment classes: value is from 0 5 10 … 70. Eg: margin0, margin5, margin-left10, padding10, padding-top10…

margin[value]
margin-top[value]
margin-bottom[value]
margin-left[value]
margin-right[value]
padding[value]
padding-top[value]
padding-bottom[value]
padding-left[value]
padding-right[value]
text-[align-value]: align-value is left, center, right.

Button classes for a tag

rounded: Add this class to HTML a tag to make it bordered as a button instead of underline.
btn: Add this class to HTML a tag to make it same as a primary button instead of underline.
btn-2: Add this class to HTML a tag to make it same as a secondary button instead of underline.
line-before: Add this class to HTML a tag to make it have line before when hover.

6. About Us Page

To create a about us page, please go to Admin -> Online Store -> Pages -> Add page.

Choose template page.about-us

We have made a section for different type of content on about us page. To edit it, please go to Admin -> Online Store -> Themes -> Customize -> from the Preview frame redirect to About us page (by clicking on the website or type it on browser URL bar).

Open the Sections - About us section. Scroll to bottom & click on Add content to add new block. We have 3 types:

Text column with image: Define the icon, HTML text, position of icon & the alignment of this block.

Text: Define the HTML text & the alignment of this block.

Banner with text: Same settings as Banner Section.

On the content of page you still can modify the HTML as you want. It will show above the section’s content. We’re using Bootstrap Grid & some helper class: