Amely Documentation

1. Overview

Amely Shopify Documentation v1.0

ArrowTheme has achieved more than 3 years of experience working on Shopify commerce and completed 500+ Shopify projects so far. Thanks to our rich experience in the realm, our proficient team of Shopify developers and managers have designed and developed a lot of useful sections exploiting great features of Shopify.

2. Install Theme

If you haven't got a Shopify store yet, you will have to create a store first from here.

To install Amely theme, please follow these steps:

STEP 1: Upload theme to your Shopify store

From Admin Dashboard of your Shopify store, go to Online Store -> Themes, click on Upload theme button.
Select the zip file from theme folder & upload it.
After installing theme successfully, choose Actions -> Publish to publish the theme or choose Customize to customize the settings.

STEP 2: Enable customer (for new store)

If you've already enabled customer on your store, please skip this step.

You can enable customer on your store following these steps:

From Admin Dashboard, go to Settings -> Checkout
Tick on option that you want to use.

3. Install Demo

STEP 1: Init the demo settings.

From theme folder, open folder Demo Setting JSON, you can see txt files which store demo settings for each homepage. Open the file of store you want and copy all content of it.
Paste the copied content to settings_data.json file of current theme (or unpublic theme if you want to test it first). You can find it on Admin - Online Store - Themes - Actions - Edit code - settings_data.json

STEP 2: Import the images & products.

To import all demo images, Go to Admin - Settings - Files
Click on Upload files and upload all images from Theme folder - Demo Images.
To import all demo products, Go to Admin - Products, click on Import and upload the csv file from Theme folder - Demo Products.
Click on Start import then wait a minute for importing products.

STEP 3: Create navigation & blog post.

After 2 steps above, the home page is nearly same with the demo homepage, it still missing some navigations for megamenu dropdown & footer links (and blog posts for Full Width demo).

The demo's using the demo navigation of Shopify: main-menu for megamenu dropdown & footer links. You can follow these guide to create your own navigation & change it

Shopify - Menus and links
Scroll to Amely - Megamenu section
Scroll to Amely - Footer section

NOTE: You can see the guide for other pages like collection & collection landing page, product page, about us, contact, 404 page by clicking on section from 36. to 41. on the left sidebar of this guide.

4. Theme settings - General

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> General

Within General, you can config:

Width: Container width for all site wide.
Favicon: Favicon of website.
Display back to top icon: Display the back to top icon or not.
Settings on Body Background: Config background color, image, position, size.
Settings on Page title: Config background color, image, color of title, breadcrumb.

5. Theme settings - Color

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Color

Within Color, you can config the color of these elements:

Text & link: Color of text, link, product name & price.
Primary button: Color & border radius of primary button.
Secondary button: Color & border radius of secondary button.
Form field: Color & border radius of input, label in a form.
Form message: Color of the success & error message (such as account form's message, subscribe newsletter's message).

6. Theme settings - Typography

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Typography

Within Typography, you can config the font of these elements included font family, font size, font weight, font style:

Body Text: Normal text on website.
Headings Text: Heading include h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6.
Main menu links: Font on main menu item.
Form field: Included label & input text.
Buttons: Included primary & secondary buttons.
Custom element: To setting font for some specific elements. Eg: some Class, ID or some HTML tags.

7. Theme settings - Social

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Social

Within Social, you can config:

Social links: Social link of facebook, instagram, twitter...
Snapppt embed code: The embed code of Snapppt to make Instagram Shop section.

8. Theme settings - Header

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Header

Within Header, you can config:

Header version: We have 7 types of header for you.
Header absolute: To make header absolute or not.

Header absolute:

Header not absolute:
Sticky header: Enable sticky menu on desktop.
Sticky header on mobile: Enable sticky menu on mobile.
Announcement bar: Config announcement bar that show above the header.
Logo settings: Settings for logo desktop & mobile.
Elements: Show or hide currency dropdown, social links, newsletter subscription & custom HTML content such as phone number.
Settings on Search: We have 2 types of search layout: always show search box & toggle on click the search icon.
Settings on Background: Settings for background of header.
Settings on Border: Settings for border of header.
Background settings for each part of header: We separated the header to 3 parts: top, middle & bottom header. We can change the background, text, links & icons color of each part. Each version of header will have some parts or all of 3 parts.

Eg: Header version 6 has 3 parts

Eg: Header version 4 has 2 parts

9. Theme settings - Mini Cart

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Mini Cart

Within Mini Cart, you can config:

Type: Dropdown or Slide out cart.
Settings for Color: Color of text, icon, background of child elements.
Dropdown cart

Slide out cart

10. Theme settings - Collection page(landing)

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

Within Collection landing, you can config:

Default landing layout: We have 3 types of layout: Grid, Masonry & Lookbook.

With Amely you can use 3 types of layout at the same time for collection landing page. It means we can have collection A using Grid, collection B using Masonry & collection C using Lookbook at the same time. Please check 32.Collection landing page to see how to setup it.
Category-tree navigation: Choose the navigation will be the category-tree for all collection landing page on website. Each collection landing page will get it's sub categories follow this navigation.
Settings on For Grid & Masonry collections: Number of item per row for 2 type of layout: Grid & Masonry.
Settings on Container width for each type of layout: Settings the container width for each type of layout. Choosing Default to make it inherit from General - Width.
Layout Grid

Layout Masonry

Layout Lookbook

11. Theme settings - Collection page

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

Within Collection page, you can config default settings for all type of collection layout:

If you want to setup collection filter & settings for specific layout, please check 33.Collection page

Default page layout: We have 4 types of layout: 1 column, 2 columns left, 2 columns right & 3 columns.

With Amely you can use 4 types of layout at the same time for collection page. It means we can have collection A using 1 column, collection B using 2 columns left & collection C using 2 columns right & collection D using 3 columns at the same time.
View mode: Default view mode: Grid, List, Grid(default)/List & List(default)/Grid.
Category description position: Above or below the products.
Pagination type: Pagination or Load more button.
Settings on Page width: Settings width of container for each layout.
Settings on Number of products & rows per page: Number of product per page will be calculated by Number of product per row * Number of row per page.
If you choose View mode: List, it will automatically show 1 product per row.
Settings on Product badge: Setup text, color for product badge that show on product in homepage & collection page.
Settings on Product elements: Show or hide review, buttons on product in homepage & collection page.
Layout 1 column

Layout 2 columns

Layout 3 columns

12. Theme settings - Search page

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

Within Search page, you can config:

View mode: Grid or List.
Number of products & rows per page.
Layout Grid

Layout List

13. Theme settings - Product details page

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

Within Product Details Page, you can config default settings for all type of product page layout:

If you want to setup sidebar column & settings for specific layout, please check 34.Product details page

Default page layout: We have 4 types of layout: 1 column, 2 columns left, 2 columns right & 3 columns.

With Amely you can use 4 types of layout at the same time for collection page. It means we can have collection A using 1 column, collection B using 2 columns left & collection C using 2 columns right & collection D using 3 columns at the same time.
Default template: Gallery list, Vertical thumbnail, Horizontal thumbnail, No thumbnail & Full screen multiple slide.
Zoom: Light box, Hover zoom & No zoom. This is zoom mode for main product image.
Pagination type: Pagination or Load more button.
Settings hide or show buttons: Hide or show wishlist, compare & payment button.
Static content: Custom content that show below the add to cart button. It can be text, HTML, image...
Related product position: Sidebar (for 2 & 3 columns layout), Main content or No display.
Settings for Additional tab: Title & content of additional tab.
Settings on Page width: Settings width of container for each layout.
Product options layout: To specify which product option will show as Swatch or Color swatch on website.
You can choose different template for each product layout. Eg:

Layout 1 column with template Vertical thumbnail

Layout 2 columns left with template Horizontal thumbnail

Layout 3 columns with template Full screen multiple slide

14. Theme settings - 404 page

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

Within 404 Page, you can config:

Content: Content of 404 page. Leave blank to use default 404 page of Shopify.
Settings for Alignment & color of content: Content alignment, text alignment, color of heading, text & link.
Settings for Background: Background for 404 page.

15. Theme settings - Newsletter Popup

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Newsletter Popup

Within Newsletter Popup, you can config:

Enable: Enable or disable newsletter popup.
Display on mobile: Enable or disable newsletter popup on mobile.
Settings for Content: Title & text.
Settings for Background: Background image desktop & mobile.
Popup width: Width of popup in px.
Delay time to show popup: Popup will show after X seconds after visit website.

16. Theme settings - Currency

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Currency

Within Currency, you can config:

Enable currency conversion: Enable or disable currency conversion.
Format: Choose the format of currency.
Supported currencies: List of currency you want to show on website. Separate your currency codes with a space.
Default currency: Default currency code.

17. Sections - Megamenu

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Megamenu

Section settings:

Settings for Level 1: Color for main navigation links of megamenu.
Settings for Dropdown: Menu dropdown's background, text & link color.

Block settings: Each block will be a main navigation link & it's dropdown. We have 4 type of dropdown.

Normal menu item:

Title: Title of main navigation link.
URL: URL of main navigation link.
Menu: Choose the navigation will be show on dropdown.
Settings for Label: Text & background of main menu item's badge.

Advanced menu item:

Title: Title of main navigation link.
URL: URL of main navigation link.
Menu: Choose the navigation will be show on dropdown.
Fullwidth dropdown: The width of dropdown will have 100% width of megamenu if this option is enabled.

Fullwidth

Not Fullwidth
Dropdown columns: Number of columns will show inside of the dropdown.
Settings for Static content: Text & width of the static content inside of the dropdown, includes: top, right, bottom, left static content.
Settings for Label: Text & background of main menu item's badge.

Static content menu item:

Title: Title of main navigation link.
URL: URL of main navigation link.
Menu: Choose the navigation will be show on dropdown.
Fullwidth dropdown: The width of dropdown will have 100% width of megamenu if this option is enabled.
Dropdown columns: Number of columns will show inside of the dropdown.
Static content: HTML content will show on dropdown.
Settings for Label: Text & background of main menu item's badge.

Text link menu item: No dropdown, it's just main menu item.

Title: Title of main navigation link.
URL: URL of main navigation link.
Settings for Label: Text & background of main menu item's badge.

18. Sections - Footer

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Footer

Section settings:

Footer width: Default (follow setting Width on Theme Settings - General) or Full width.
Settings for Background: Settings for footer's background.
Settings for Border & Spacing: Settings for footer's border & margin, padding.
Settings for Top, middle & bottom footer: We've separated the footer to 3 parts: top, middle & bottom footer. We can change the background, text, links & icons color of each part. Each version of footer will have some parts or all 3 parts.

Block settings: We have 7 types of block so you can modify the layout of footer as you want.

Text column with image:

Image: Image that will show on block.
Image position: Above or below, left or right of the HTML content.
Image alignment: Setting the alignment of image on this block. Left, center or right.
Image width (optional): Setting the width of image on this block. This is optional.
Content: HTML content will show on block.
Content alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Newsletter subscribe:

Heading content: Heading HTML content.
Show social links: Show social links below the form.
Content alignment: Define the alignment of content on this block.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Vertical link list:

Heading content: Heading HTML content.
Choose Navigation: Define the Navigation that will show on this block.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Horizontal link list:

Heading content: Heading HTML content.
Choose Navigation: Define the Navigation that will show on this block.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Text:

Content: Define content of this block.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Banner with text:

Image: Define content of this block.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.
Other settings of this block are same as block of section Banner.

Socials:

Heading content: Heading HTML content.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

19. Sections - Slideshow

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Slideshow

Section settings:

Auto rotate slide: The slider will go to the next slide after X seconds.
Settings for Navigation & Dots: Define the layout & color of Navigation & Dots of slider.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Image: Define the slide's image.
Mobile image: Define the slide's image on mobile.
Action URL: When click on slide it will redirect to this URL.
Content: Define the HTML content of slide.

Animation on slide's element: We can make the animation for each element on slide content by adding classes to it. You can preview the class and animation from this link: Animate.css.

Customize the spacing between elements & layout of a tag: We have defined some helper class for you:

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.
Settings for Text & link color: Define the color of text & link of slide's content.
Width: Custom width of slide's content.
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There're 9 fixed positions & 3 custom positions.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom vertical, middle Horizontal, the content will be aligned center of the slide & you need to define the vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom horizontal, middle Vertical, the content will be aligned middle of the slide & you need to define the horizontal alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

20. Sections - Banner

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Banner

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Image with content inside:

Columns: Define the width of this banner by X columns / 12 columns total.
Image: Banner image.
Action URL: When click on this banner it will redirect to this URL.
Content: HTML content.

Customize the spacing between elements & layout of a tag: We have defined some helper class for you:

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.
Settings for Text & link color: Define the color of text & link of banner's content.
Width: Define the width of banner's content (optional).
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There're 9 fixed positions & 3 custom positions. It's same as position of slide's content on Slideshow section.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom vertical, middle Horizontal, the content will be aligned center of the slide & you need to define the vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom horizontal, middle Vertical, the content will be aligned middle of the slide & you need to define the horizontal alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.
Hover effect: We have 10+ hover effect for you inlucded: zoom, hover & zoom, flashed, ...

Image: Same as above but don't have content inside. Just image & link.

Columns: Define the width of this banner by X columns / 12 columns total.
Image: Banner image.
Action URL: When click on this banner it will redirect to this URL.
Hover effect: We have 10+ hover effect for you inlucded: zoom, hover & zoom, flashed, ...

21. Sections - Banner with side text

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Banner with side text

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width, background... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Banner: Same as Banner Section - Image with content inside

Image: Banner image.
Action URL: When click on this banner it will redirect to this URL.
Content: HTML content.
Settings for Text & link color: Define the color of text & link of banner's content.
Width: Define the width of banner's content (optional).
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There're 9 fixed positions & 3 custom positions.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom vertical, middle Horizontal, the content will be aligned center of the slide & you need to define the vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom horizontal, middle Vertical, the content will be aligned middle of the slide & you need to define the horizontal alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.
Hover effect: We have 10+ hover effect for you inlucded: zoom, hover & zoom, flashed, ...
Columns: Define the width of this banner by X columns / 12 columns total.

Text:

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.
Columns: Define the width of this banner by X columns / 12 columns total.

22. Sections - Parallax banner

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Parallax banner

Section settings:

This section will have parallax scrolling effect and always have full width & full height of the screen.
Common settings: Margin top & bottom for this section.

Block settings: Same as Banner Section - Image with content inside.

Image: Banner image.
Image (mobile): Banner image on mobile.
Action URL: When click on this banner it will redirect to this URL.
Content: HTML content.
Settings for Text & link color: Define the color of text & link of banner's content.
Width: Define the width of banner's content (optional).
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There're 9 fixed positions & 3 custom positions.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom vertical, middle Horizontal, the content will be aligned center of the slide & you need to define the vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom horizontal, middle Vertical, the content will be aligned middle of the slide & you need to define the horizontal alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

23. Sections - Countdown Widget

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Countdown

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Countdown:

Settings for Date: Define the date of countdown: day, month, year.
Settings for text & number color: Define the color of text & number.

24. Sections - Product Widget

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Product Widget

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Products:

Collection: Define the collection that showing product on this section.
Layout: Section will show product list as Grid or Slider.
Product layout: Each product will show as Bottom details or Right-side details.
Product per row: Number of product per row when using Layout - Grid or number of product per slide when using Layout - Slider.
Limit: Number of products will show on this section.

Grid - Bottom details

Slider - Bottom details

Grid - Right-side details

25. Sections - Product Tab Widget

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Product Tab Widget

Section settings:

Layout: Product list on each tab will show as Grid or Slider.
Product per row: Number of product per row when using Layout - Grid or number of product per slide when using Layout - Slider.
Product limit: Number of products will show on each tab.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings: Each block is one tab.

Title: Define the title of column. Leave blank to use collection title as tab's title.
Collection: Define the collection that showing product on this column.

Grid

Slider

26. Sections - Product Column Widget

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Product Column Widget

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Products: each block is one column.

Title: Define the title of column. Leave blank to use collection title as tab's title.
Collection: Define the collection that showing product on this column.
Columns: Define the width of this block by X columns / 12 columns total.
Product layout: Each product will show as Bottom details or Right-side details.
Product per row: Number of product per row when using Layout - Grid or number of product per slide when using Layout - Slider.
Product limit: Number of products will show on this column.

27. Sections - Product & Banner

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Product & Banner

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Product:

Product: Define the product will show.
Columns: Define the width of this block by X columns / 12 columns total.

Image with content inside: Same as block on Banner Section

Columns: Define the width of this block by X columns / 12 columns total.
Image: Banner image.
Action URL: When click on this banner it will redirect to this URL.
Content: HTML content.
Settings for Text & link color: Define the color of text & link of banner's content.
Width: Define the width of banner's content (optional).
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There're 9 fixed positions & 3 custom positions. It's same as position of slide's content on Slideshow section.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom vertical, middle Horizontal, the content will be aligned center of the slide & you need to define the vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom horizontal, middle Vertical, the content will be aligned middle of the slide & you need to define the horizontal alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

Product & Right banner

3 Products

28. Sections - Instagram feed

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Instagram feed

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Instagram slider:

Access token: Define the access token of your instagram.
Setting for Slider: Define the settings for navigation, dots, rotate, number of item per slide.

29. Sections - Instagram shop

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Instagram shop

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Instagram shop:

Snapppt Embed Code: Define the Snapppt Embed Code of your instagram shop.

1. Go to https://snapppt.com/users/sign_in, login with your instagram account.

2. Go to https://snapppt.com/embeds to configuration and get embed code.

30. Sections - Testimonial

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Testimonial

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings: each block will show as a slide on slider.

Title: HTML title.
Content: HTML content.
Settings for Author: Define the avatar, name, job of the author.

31. Sections - Logo list

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Logo list

Section settings:

Settings for Slider: Number of logo per slide on desktop, tablet, mobile.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Logo:

Image: Logo image.
URL: When click on logo image it will redirect to this URL.

32. Sections - Newsletter

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Newsletter

Section settings:

Layout: We have 2 type of layouts. Just different style of input form.
Form width: To customize the form width. This is optional.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Layout Bordered

Layout Borderless

33. Sections - Blog post

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Blog post

Section settings:

Blog: Choose the parent blog.
Articles per row: Number of article per row.
Limit: Number of article will show on this section.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

34. Sections - Text

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Text

Section settings:

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width, background... for section.

35. Sections - Text columns & image

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Text columns & image

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width, background... for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Text column with image:

Image: Image show on this column.
Image position: Left, right, above or below content.
Image alignment: Left, center or right self-align.
Image width (optional): Customize width of image.
HTML content: Content show on this column.
Content alignment: Alignment of content.
Columns: Define the width of this column by X columns / 12 columns total.

36. 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.
- collection.landing-lookbook: the layout of this collection will be Lookbook layout.
- 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)

37. 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.
- collection.2-columns-left/collection.2-columns-right: the layout of this collection will be 2-columns-left/2-columns-right layout.
- 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:
1. 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.
- Featured products: Define title & the collection of products. We have 2 type of layout: List or Slider.
- Image & Image with content inside: Same settings as Banner Section.
- Text content: Define title & html content will show on page.

38. 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.
- product.2-columns-left/product.2-columns-right: the layout of this product will be 2-columns-left/2-columns-right layout.
- 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.
- Image & Image with text: Same settings as Banner Section.
- Text content: Define title & html content will show on page.

39. 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.

40. 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.

41. 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:

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.

42. Helper Classes

On the content of sections, pages, blocks where 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.