Skip to content

Home Page Sections

Overview

Kala All-in-one included 60+ sections for Home page.

Home page have 2 layout for choose: Default layout (Box/Full) or Sidebar (Box with sidebar in left). You can select one at Theme settings > Home page settings

There are 2 section type:

  • Preset section (56/60 sections): it can add new, add more one in Home page.

  • Static section (4/60 sections): it can NOT add new, add more. It's fixed in one position of Home page, such as Left sidebar, bottom of the page.

Below is explain guide for all sections in the theme. If you want have the preset Home page layout that used in our live demo, scroll to here

Slideshow sections

Section use for Images Slider with caption and custom links.

Slideshow Normal

Screenshot

A part of Home page sections: 1,2,3,5,6,9,10,15,16,17,18,19,21,22,23,24,25,27,30,31,33,35,38,41,42,46,47,49,54

  • If the section existed (used preset), you only need click to Screenshot section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow.

General Settings: Display on, Show Full width, Style value (Margin,Z-Index), Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:

  • Video link: input the embed video.

  • Auto play.

  • Image loader.

Slideshow & Banners Horizontal

Screenshot

A part of Home page sections: 4

  • If the section existed (used preset), you only need click to Slideshow & Banners Horz section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Banners Horizontal.

General Settings: Display on and Style value (Margin,Z-Index).

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

Banners settings: options to upload 2 right banners (upload image and set link).

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:

  • Video link: input the embed video.

  • Auto play.

  • Image loader.

Slideshow & Banners Vertical

Screenshot

A part of Home page sections: 12

  • If the section existed (used preset), you only need click to Slideshow & Banners Vert section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Banners Vertical.

General Settings: Display on and Style value (Margin,Z-Index).

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

Banners settings: options to upload 2 right banners (upload image and set link).

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:

  • Video link: input the embed video.

  • Auto play.

  • Image loader.

Slideshow & Collections

Screenshot

A part of Home page sections: 13,34

  • If the section existed (used preset), you only need click to Slideshow & Collections section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Collections.

General Settings: Display on and Style value (Margin,Z-Index).

All Collections settings: Active, Title and select Link list to show collections in the left of Slideshow.

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:

  • Video link: input the embed video.

  • Auto play.

  • Image loader.

Slideshow & Collections & Banners

Screenshot

A part of Home page sections: 14

  • If the section existed (used preset), you only need click to Slideshow & Coll Banners section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Collections & Banners.

General Settings: Display on and Style value (Margin,Z-Index).

All Collections settings: Active, Title and select Link list to show collections in the left of Slideshow.

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

Banners settings: include 2 areas Right and Bottom. Each area have 2 banners with options to upload image and set link.

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:

  • Video link: input the embed video.

  • Auto play.

  • Image loader.

Slideshow & Collections & Banner

Screenshot

A part of Home page sections: 32,52

  • If the section existed (used preset), you only need click to Slideshow & Coll Banner section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Collections & Banner.

General Settings: Display on and Style value (Margin,Z-Index).

All Collections settings: Active, Title and select Link list to show collections in the left of Slideshow.

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

Right Banner settings: options to upload image and set link.

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:

  • Video link: input the embed video.

  • Auto play.

  • Image loader.

Screenshot

A part of Home page sections: 26

  • If the section existed (used preset), you only need click to Slideshow & Search bar section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Search bar.

General Settings: Display on, Style value (Margin,Z-Index) and show Full width.

Caption settings: Title, Description, Search box options, and Text.

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

Banners settings: include 2 areas Right and Bottom. Each area have 2 banners with options to upload image and set link.

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:

  • Video link: input the embed video.

  • Auto play.

  • Image loader.

Slideshow & Banner & Products

Screenshot

A part of Home page sections: 28

  • If the section existed (used preset), you only need click to Slideshow & Banner & Products section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Banner & Products.

General Settings: Display on, Style value (Margin,Z-Index) and show Full width.

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

Banner settings: Upload image and set link to.

Products Slider settings: Collection to show products, limit and slider settings.

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:

  • Video link: input the embed video.

  • Auto play.

  • Image loader.

Slideshow & Collections & Banners & Products

Screenshot

A part of Home page sections: 29

  • If the section existed (used preset), you only need click to Slideshow Banners Prods section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Collections & Banners & Products.

General Settings: Display on and Style value (Margin,Z-Index).

All Collections settings: Active, Title and select Link list to show collections in the left of Slideshow.

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

Products Slider settings: Collection to show products, limit and slider settings.

Banners settings: add block with image type.

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Banner, You will got options: Upload image, Link to and Responsive option.



Slideshow Top

Screenshot

It's Static section. It can NOT add new, add more.

To active it, need go to General Settings > Home page settings > Special sections

General Settings: Display on, Show Full width, Style value (Margin,Z-Index), Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

The Important area is the Content area (bottom). It will listing all slide of Slideshow. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Video slide, You will got options:



Slideshow & Scores

Screenshot

A part of Home page sections: 53

Requires Theme Version 6.1.19 or higher

  • If the section existed (used preset), you only need click to Slideshow Scores section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow Scores.

General Settings: Display on and Style value (Margin,Z-Index).

All Collections settings: Active, Title and select Link list to show collections in the left of Slideshow.

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

POINTS TABLE settings: Active part, Title and the shortcut text.

The Important area is the Content area (bottom). It will listing all slide of Slideshow and Score row. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Score, You will got options: team name, point of P, W, L, PTS

Screenshot



Slideshow & Cases listing

Screenshot

A part of Home page sections: 55

Requires Theme Version 6.1.21 or higher

  • If the section existed (used preset), you only need click to Slideshow & Cases listing section to edit.

  • If the store don't have it, only need click to Screenshot button and select Slideshow & Cases listing.

General Settings: Display on and Style value (Margin,Z-Index).

All Collections settings: Active, Title and select Link list to show collections in the left of Slideshow.

Slideshow Settings: Slide effect (include 4 effects: Sliding, Fading, Cube, Flipping ), Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.

Cases settings: Active, position, column text.

The Important area is the Content area (bottom). It will listing all slide of Slideshow and Score row. Click to Slide to edit. If you want add more slide, click to Screenshot

Screenshot

For the Image slide, You will got options:

  • Slide Background: Upload image to show. Also can set Slide link, Captions Entrances Effect and Captions Exits Effect

  • Title: It's heading of the caption.

  • Description: it's description of the caption.

  • Action: it't action button of the caption.

  • Other captions (maximun is 6) you can set below.

With each caption element, you need set the style and position to make it show the like your idea. These options area Style, horizontal position(x), align with horizontal position, vertical position(y), layer order(z)


For the Case, You will got options: Flag image, Country name, Case and Deaths



Banners sections

Banners - Grid

Screenshot

A part of Home page sections: 1,2,3,4,5,9,12,13,14,15,16,17,18,19,20,21,22,23,25,26,27,29,30,31,32,33,35,36,37,38,46,48,49,50,51,53,54

  • If the section existed (used preset), you only need click to Banners - Grid section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners - Grid.

Layout Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index).

Content area: listing banner in grid (1 or more banners).

Screenshot

With each image element, we will have options Image upload, Link to, Title, Description, direction and Responsive width of banner.

Screenshot

A part of Home page sections: 2

  • If the section existed (used preset), you only need click to Gallery section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Gallery.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Title and Title position.

Content area: listing all gallery images.

Screenshot

With each image element, we will have options Image upload, Link to and Responsive width of banner.


Banners Department

Screenshot

A part of Home page sections: 22,30,39,50,51

  • If the section existed (used preset), you only need click to Banners Department section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Department.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Title and Title position.

Content area: listing all images element.

Screenshot

With each image element, we will have options Image upload, Link to, Title and Responsive width of banner.


Screenshot

A part of Home page sections: 23,27

  • If the section existed (used preset), you only need click to Banner & Newsletter section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banner & Newsletter.

General Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index), Title and Title position.

Content area: listing 2 block type use to build this layout.

Screenshot

  • Newsletter: include options to control Title, Descrption, Mailchimp Action url, holder text, action text, image background and responsive settings.

    Screenshot

  • Banner: include options to control upload image, link to and responsive settings.

    Screenshot


Screenshot

A part of Home page sections: 28,50,55

  • If the section existed (used preset), you only need click to Banner & Text section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Banner & Text.

General Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index), Title and Title position.

Content area: listing 2 block type use to build this layout.

Screenshot

  • Newsletter: include options to control Image and Link to.

    Screenshot

  • Banner: include options to control Heading and Description.

    Screenshot


Screenshot

A part of Home page sections: 7

  • If the section existed (used preset), you only need click to Banner & Caption section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Banner & Caption.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Margin Left/Right in pixel and Background color.

Content area: listing 2 block type use to build this layout: Text and Banner

Screenshot


Screenshot

A part of Home page sections: 9,11,14,17,18,19

  • If the section existed (used preset), you only need click to Banner Parallax section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banner Parallax.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Upload image background, image caption or text caption, action link and coutdown timer options.

Screenshot


Screenshot

A part of Home page sections: 41

Requires Theme Version 6.1.1 or higher

  • If the section existed (used preset), you only need click to Banner & Video section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banner & Video.

Layout Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index).

Content area: listing banner with video link in grid (1 or more banners).

Screenshot

With each image element, we will have options Image upload, Title, Caption Text, Caption2 Text, Video Embed link and Responsive width of banner.

Screenshot

A part of Home page sections: 47

Requires Theme Version 6.1.10 or higher

  • If the section existed (used preset), you only need click to Banner & Text & Video section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Banner & Text & Video.

Layout Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index).

Section settings: Image background, Heading, Name and Video embed link.

Screenshot



Screenshot

A part of Home page sections: 53

Requires Theme Version 6.1.19 or higher

  • If the section existed (used preset), you only need click to Banner & Videos listing section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Banner & Videos listing.

Layout Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index) and 2 background images (Top/Bottom).

Section settings: Title, Image background and video icon image.

Content settings: listing all video element. Each element include options: image placeholder, video embed link (video player in the popup when click to the play icon) and responsive settings.

Screenshot



Screenshot

A part of Home page sections: 48

Requires Theme Version 6.1.11 or higher

  • If the section existed (used preset), you only need click to Banners & Links #1 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Banners & Links #1.

Layout Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index) and Title. Also, there is the option to add the margin left and right of the container.

Content settings: listing all banners element. Each element will have option to upload image, and 4 links appear when hover.

Screenshot



Screenshot

A part of Home page sections: 49

Requires Theme Version 6.1.13 or higher

  • If the section existed (used preset), you only need click to Banners & Links #2 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Banners & Links #2.

Layout Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index).

Section settings: upload a top image amd link to.

Content settings: listing all link element. Each element will have option to input Text and link to.

Screenshot



Banners Custom #1

Screenshot

A part of Home page sections: 3

  • If the section existed (used preset), you only need click to Banners Custom #1 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #1.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Title and Title position.

Banners Settings: Left/Top Banner, Middle/Top Banner, Left/Bottom Banner, Middle/Bottom Banner and Right Banner. Each banner settings we will have option to upload image and set the link.

Screenshot


Banners Custom #2

Screenshot

A part of Home page sections: 6,11

  • If the section existed (used preset), you only need click to Banners Custom #2 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #2.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Banners Settings: Left Banner, Right/Top Banner, Right/Bottom/Left Banner and Middle/Bottom/Right Banner. Each banner settings we will have option to upload image and set the link.

Screenshot


Banners Custom #3

A part of Home page sections: 8

  • If the section existed (used preset), you only need click to Banners Custom #3 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #3.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Image and Color background, layout.

There are 4 styles:

- Style #1

Screenshot

There are 2 banners type:

  • Left Banner: we have Upload image, Link to, Caption image and Caption Text option.

  • Right banners: top and left of right banners. Each banner will have option to Upload image and Link to


- Style #2

Screenshot

There are 2 banners: Left and Right banners. Each banner will have option to Upload image and Link to


- Style #3

Screenshot

There are 2 banners: Left and Right banners. Each banner will have option to Upload image and Link to


- Style #4

Screenshot

There are 3 banners: Left, Middle and Right banners. Each banner will have option to Upload image and Link to


You can click to Add content bottom button to add new style. Screenshot


Banners Custom #4

Screenshot

A part of Home page sections: 10

  • If the section existed (used preset), you only need click to Banners Custom #4 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #4.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Banners Settings: Left Banner, Middle/Top Banner, Middle/Bottom Banner and Right Banner. Each banner settings we will have option to upload image and set the link.

Screenshot


Banners Custom #5

Screenshot

A part of Home page sections: 17,21,23,28,52

  • If the section existed (used preset), you only need click to Banners Custom #5 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #5.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Banners Settings: Left Banners (2 Banners), Middle Banner, Right Banners (2 Banners). Each banner settings we will have option to upload image and set the link.

Screenshot


Banners Custom #6

Screenshot

A part of Home page sections: 22

  • If the section existed (used preset), you only need click to Banners Custom #6 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #6.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Content area: listing all banners.

Screenshot

With each image element, we will have options Image upload, Link to, Action Text, color background and Title position.


Banners Custom #7

Screenshot

A part of Home page sections: 24

  • If the section existed (used preset), you only need click to Banners Custom #7 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #7.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

There are 2 styles:

  • One Banner

    Screenshot

  • Two Banners

    Screenshot

Each banner will have option to Upload image, Link to, Title and Responsive settings.


Banners Custom #8

Screenshot

A part of Home page sections: 39,40

Requires Theme Version 6.0.9 or higher

  • If the section existed (used preset), you only need click to Banners Custom #8 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #8.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Banners Settings: upload image, set link and select Responsive grid.

Screenshot


Banners Custom #9

Screenshot

A part of Home page sections: 43

Requires Theme Version 6.1.4 or higher

  • If the section existed (used preset), you only need click to Banners Custom #9 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #9.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Top Banners Settings: active, upload image background, set link

Bottom Banners Slider Settings: slider and responsive setting.

Block settings: will listing all banners for slider. Each banner need upload image, link and Title

Screenshot


Banners Custom #10

Screenshot

A part of Home page sections: 45

Requires Theme Version 6.1.7 or higher

  • If the section existed (used preset), you only need click to Banners Custom #10 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #10.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Content settings: will listing 2 type: Banner and Caption.

Screenshot


Banners Custom #11

Screenshot

A part of Home page sections: 45

Requires Theme Version 6.1.7 or higher

  • If the section existed (used preset), you only need click to Banners Custom #11 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #11.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Action positon (left/right).

Content settings: will listing 2 type: Banner Big and Banner Small and Caption.

Screenshot


Banners Custom #12

Screenshot

A part of Home page sections: 45

Requires Theme Version 6.1.7 or higher

  • If the section existed (used preset), you only need click to Banners Custom #12 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #12.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Background color.

Content settings: will listing all banner element.

Screenshot


Banners Custom #13

Screenshot

A part of Home page sections: 50

Requires Theme Version 6.1.14 or higher

  • If the section existed (used preset), you only need click to Banners Custom #13 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Banners Custom #13.

General Settings: Display on, Full width, Style value (Margin,Z-Index)

Top banner settings: include upload image and link to of the Big horizontal banner.

Content settings: will listing all banners element.

Screenshot


Collection sections

Categories Listing

Screenshot

A part of Home page sections: 1,2

  • If the section existed (used preset), you only need click to Screenshot section to edit.

  • If the store don't have it, only need click to Screenshot button and select Categories Listing.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index), Margin minus block.

Content area: will include all banners group options. Click to edit, or click to Add collection button to add new.

Screenshot

With each banner element, we will have options Collection, Distance between items, Title, direction and Grid options layout for responsive.

Categories & Caption #1

Screenshot

A part of Home page sections: 3,28,29,36,37,41,42,52

  • If the section existed (used preset), you only need click to Categories & Caption #1 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Categories & Caption #1.

General Settings: Display on, Full width, Active padding top and bottom block, Style value (Margin,Z-Index), Title and Title position.

Section Settings: Title, Title position and Color background.

Content area: listing all categrories element.

Screenshot

With each element, we will have options Image upload, Title, Sub title and Link to options.


Categories & Caption #2

Screenshot

A part of Home page sections: 32,35,46,50

  • If the section existed (used preset), you only need click to Categories & Caption #2 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Categories & Caption #2.

General Settings: Display on, Full width, Active padding top and bottom block, Style value (Margin,Z-Index), Title and Title position.

Content area: listing all categrories element.

Screenshot

With each element, we will have options Image upload, Title, Link to and Responsive options.


Categories & Caption #3

Screenshot

A part of Home page sections: 45

Requires Theme Version 6.1.7 or higher

  • If the section existed (used preset), you only need click to Categories & Caption #3 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Categories & Caption #3.

General Settings: Display on, Full width, Active padding top and bottom block, Style value (Margin,Z-Index).

Content area: listing all categrories elements.

Screenshot

With each element, we will have options Image upload, Title, Sub title, Action text and Link to.


Screenshot

A part of Home page sections: 4,34

  • If the section existed (used preset), you only need click to Categories & Links #1 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Categories & Links #1.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Content area: listing all categories element

Screenshot

With each element, we will have options Image Background, Title and Link list.


Screenshot

A part of Home page sections: 26

  • If the section existed (used preset), you only need click to Categories & Links #2 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Categories & Links #2.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and Title.

Content area: listing all categories element

Screenshot

With each element, we will have options Image, Title, Link list, Link to and View all text.

Screenshot


Categories & Information

Screenshot

A part of Home page sections: 47

Requires Theme Version 6.1.10 or higher

  • If the section existed (used preset), you only need click to Categories & Information section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Categories & Information.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section settings: Active padding, Title and Description.

Content area: listing all categories element

Screenshot

With each element, we will have options Image, Title, Link to and Responsive.

Screenshot


Products sections

Products Tab - Grid

Screenshot

A part of Home page sections: 1,2,7,11,12,13,18,19,21,22,27,35,41

  • If the section existed (used preset), you only need click to Products Tab - Grid section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Tab - Grid.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Section settings: Title, Title Position (One Whole - Center, One Half - Left), Decor for Title in left/right Screenshot, Image width/height and More text.

Resposive width: include 6 options to control the Responsive.

Content area: each block is the Tab element.

Screenshot

With each block Tab element, we will have options Title, Collection product and Limit products show.

Products Tab - Slider

Screenshot

A part of Home page sections: 1

  • If the section existed (used preset), you only need click to Products Tab - Slider section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Tab - Slider.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Section settings: Title, Title Position (One Whole - Center, One Half - Left), Image width/height and Slider settings.

Content area: each block is the Tab element.

Screenshot

With each block Tab element, we will have options Title, Collection product and Limit products show.

Screenshot



Products Tab - Grid Custom

Screenshot

A part of Home page sections: 14,34,37

  • If the section existed (used preset), you only need click to Products Tab - Grid section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Tab - Grid Custom.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Section settings: Title, Title Position (One Whole - Left, One Whole - Center, One Half - Left), image size, layout. Also Responsive settings and limit products show per tab.

Resposive width: include 6 options to control the Responsive.

Content area: each block is the Tab element.

Screenshot

With each block Tab element, we will have options Title and Collection product.

Products Slider & Column

Screenshot

A part of Home page sections: 1,4,19,25,36,46

  • If the section existed (used preset), you only need click to Products Slider & Column section to edit.

  • If the store don't have it, only need click to Screenshot button and select Products Slider & Column.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Limit product show, image size, Product Layout, Slider options and Responsive options.

Content area: listing column element

Screenshot

With each block Tab element, we will have options Title and Collection products.

Products Slider

Screenshot

A part of Home page sections: 1,4,6,7,9,21,22,23,25,26,28,37,40,44,48,49,55

  • If the section existed (used preset), you only need click to Products Slider section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Slider.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Title, Title Position (One Whole - Left, One Whole - Center, One Half - Left), Select Collection, Limit product show, Image size, Slider setting and Responsive settings.

Screenshot



Products Slider & Banner

Screenshot

A part of Home page sections: 2,11,14,19,34,36,38

  • If the section existed (used preset), you only need click to Products Slider & Banner section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Slider & Banner.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Collection title, Title Position, Banner settings (upload image and set link), Collection setting and Slider settings.

Screenshot

Products Slider & Big Banner

Screenshot

A part of Home page sections: 4

  • If the section existed (used preset), you only need click to Products Slider & BBanner section to edit.The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Slider & Big Banner.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Banner settings: Active, Banner position, upload image and set the link.

Product settings: Title, Collection to show products, limit, Slider and responsive settings.

Screenshot


Screenshot

A part of Home page sections: 15

  • If the section existed (used preset), you only need click to Products Slider & Links list #1 section to edit.The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Slider & Links list #1.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

All Collections settings: Active, Title and select Link list to show collections in the left of Slideshow.

Product settings: Title, Collection to show products, limit, Slider and responsive settings.

Screenshot


Screenshot

A part of Home page sections: 15

  • If the section existed (used preset), you only need click to Products Slider & Links list #2 section to edit.The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Slider & Links list #2.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

All Collections settings: Active, Title and select Link list and Image background.

Product settings: Title, Collection to show products, limit, Slider and responsive settings.

Screenshot


Products Slider & Custom 1

Screenshot

A part of Home page sections: 3

  • If the section existed (used preset), you only need click to Products Slider & Custom 1 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Slider & Custom 1.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Title and Title position.

Section Settings: Title, Collection, Limit show, Product image size, Slider and Responsive settings.

Screenshot


Products Slider & Custom 2

Screenshot

A part of Home page sections: 12

  • If the section existed (used preset), you only need click to Products Slider & Custom 2 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Slider & Custom 2.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Title and Title position.

Section Settings: Title, Title position, Collection, Limit show, Product image size, Slider and Responsive settings.

Screenshot


Products Grid

Screenshot

A part of Home page sections: 10,15,17,18,23,24,30,31,33,40,42,44,50,52,54

  • If the section existed (used preset), you only need click to Products Grid section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Grid.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Title, Title position, Decor for Title in left/right Screenshot, More text, Collections and limit to show products and Responsive settings.

Screenshot


Products Grid & Custom 1

Screenshot

A part of Home page sections: 9,27,38

  • If the section existed (used preset), you only need click to Products Grid & Custom 1 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Grid & Custom 1.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Title, Title position and number products to show.

Screenshot


Products Grid & Custom 2

Screenshot

A part of Home page sections: 21

  • If the section existed (used preset), you only need click to Products Grid & Custom 2 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Products Grid & Custom 2.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Content area: listing 2 blocks used in layout.

Screenshot

  • Best Seller: options are Title, select collection to show products and More text.

    Screenshot

  • Recently viewed: options are Title, select collection to show products, product per slide and limit.

    Screenshot


Products Grid & Banner

Screenshot

A part of Home page sections: 44

Requires Theme Version 6.1.5 or higher

  • If the section existed (used preset), you only need click to Today's Best Savings section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Grid & Banner.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Upload banner with title, Collection settings to show product. You can select the banner appear in the Left or Right.

Screenshot


Products Grid Random

Screenshot

A part of Home page sections: 39,43

Requires Theme Version 6.0.9 or higher

  • If the section existed (used preset), you only need click to Products Grid Random section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Grid Random.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Title, Title position, Decor for Title in left/right Screenshot, More text, Collections and limit to show products and Responsive settings.

The settings the same Products Grid section, but the products will show random position when refresh the site.


Products Flexible

Screenshot

A part of Home page sections: 14,15

  • If the section existed (used preset), you only need click to Products Flexible section to edit.

  • If the store don't have it, only need click to Screenshot button and select Products Flexible.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Content area: each block used in layout.

Screenshot

There are 3 block type:

  • Top Rate: include option to control Title, Collection to show product and responsive settings.

  • Best Seller & Banner: include option to control the products grid (Title, Collection to show product and limit product) and Banner (Upload image, link to)

  • Recently viewed: include option to control products only with Title, Collection to show product and limit

Each block will have option to control the column grid.



Products Masonry

Screenshot

A part of Home page sections: 16

  • If the section existed (used preset), you only need click to Products Masonry section to edit.

  • If the store don't have it, only need click to Screenshot button and select Products Masonry.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Content area: each block used in layout.

Screenshot

There are 4 block type: Wich each element, you need upload image to show and select product to show the information when hover.

1 Long + 2 Small

Screenshot


2 Small + 1 Long

Screenshot


1 Big + 4 Small

Screenshot


4 Small

Screenshot


Products Flashsale Slider

Screenshot

A part of Home page sections: 43,47,51,52

Requires Theme Version 6.1.4 or higher

  • If the section existed (used preset), you only need click to Products Flashsale Slider section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Flashsale Slider.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Section settings: Title, Coutdown timer and view all. Collection settings to show products. Responsive and Slider settings.

Screenshot

What is the syntax for Countdown timer?

It must be YYYY-MM-DD HH-MM-SS Example you want the timer end at March 25, 2020 just input 2020-3-25

How to display the sold count in product? Screenshot

You must tag the tag into any products want display the sold count with systax falshsale:SOLD-TOTAL

Example, you want display 6 sold in 10 total (red bar is 60% of pink bar), just tag the tag flashsale:6-10

Screenshot Screenshot

The Sold count must less than the Total count to make the bar show fine.


Products Top 3

Screenshot

A part of Home page sections: 43

Requires Theme Version 6.1.4 or higher

  • If the section existed (used preset), you only need click to Products Top 3 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Products Top 3.

Layout Settings: Display on, Full width, Style value (Margin,Z-Index).

Section settings: Title, View more and responsive settings.

Content area: each 3 Products block. Each block will option to upload 3 products (Image, product link and title).

Screenshot


Blogs sections

Blogs Slider

Screenshot

A part of Home page sections: 2,5,9,11,13,14,15,16,17,19,21,22,25,31,33,36,38,40,49,52,54

  • If the section existed (used preset), you only need click to Blogs Slider section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Blogs Slider.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and Image background.

Section settings: Title, Title Position, Blog to show articles, limit and Read more text, Slider settings and Responsive settings.

Screenshot


Blogs Slider Custom

Screenshot

A part of Home page sections: 53

Requires Theme Version 6.1.19 or higher

  • If the section existed (used preset), you only need click to Blogs Slider Custom section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Blogs Slider Custom.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Color background and Image background.

Section settings: Title, Title Position, Blog to show articles, limit and Read more text, Slider settings and Responsive settings.

Screenshot


Blogs Flexible

Screenshot

A part of Home page sections: 47

Requires Theme Version 6.1.10 or higher

  • If the section existed (used preset), you only need click to Blogs Flexible section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Blogs Flexible.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section settings: Image in top, Title, select block to show article, limit count and Read more text.

Screenshot


Testimonial & Blog

Screenshot

A part of Home page sections: 4,6,7

  • If the section existed (used preset), you only need click to Testimonial & Blog section to edit.

  • If the store don't have it, only need click to Screenshot button and select Testimonial & Blog.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and Slider settings.

Content area: listing 2 options to show Blogs or Testimonial block Screenshot

  • For Testimonial block, there are options: Display column, Title, Layout, number review and group Testimonial options (Upload avatar, Name, job, Review text).

Screenshot

  • For Blogs block, there are options: Display column, Layout, Blog to show article, limit show and Readmore text.

Screenshot


Blogs Accordion

Screenshot

A part of Home page sections: 27

  • If the section existed (used preset), you only need click to Blogs Accordion section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Blogs Accordion.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and Title.

Content area: listing all articles

Screenshot

Each block will include options to control Upload image, Image caption, link to. You can set the link to option to the Article link.

Screenshot

Advanced sections

Brands Slider

Screenshot

A part of Home page sections: 2,3,5,6,7,8,9,12,13,14,15,17,20,21,27,28,31,33,35,37,39,40,43,48,51,52,54,55

  • If the section existed (used preset), you only need click to Brands Slider section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Brands Slider.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and Image background.

Section settings: Title, Padding Top & Bottom (px), Background color, Slider settings and Responsive settings.

Content area: listing all brand images.

Screenshot

With each brand element, we will have options Image and Link.


Information

Screenshot

A part of Home page sections: 3,6,13,14,26,31,32,39,40,41,51

  • If the section existed (used preset), you only need click to Information section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Information.

General Settings: Display on, Full width, Active padding top and bottom block, Style value (Margin,Z-Index), Image background, Background position, Color background, color text, Border, and layout.

Section Settings: Title, Title position and Image background.

Content area: listing all information element.

Screenshot

With each element, we will have Icon options ( select one of icon Image or icon text or Icon SVG), Title, Sub title and Responsive options.

Icon text can get from here https://prnt.sc/kxzjfg or https://prnt.sc/kxzjfg


Information Custom #1

Screenshot

A part of Home page sections: 19

  • If the section existed (used preset), you only need click to Information Custom #1 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Information Custom #1.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and Color background.

Content area: listing all information element.

Screenshot

With each element, we will have icon icon background, color options, Heading, Sub title and Responsive options.


Information Custom #2

Screenshot

A part of Home page sections: 52

Requires Theme Version 6.1.18 or higher

  • If the section existed (used preset), you only need click to Information Custom #2 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Information Custom #2.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section settings: Title, Action options, Path image and Color Background.

Content area: listing all information element.

Screenshot

With each element, we will have icon icon background, Heading, Sub title and Responsive options.


Testimonial Slider & Banner

Screenshot

A part of Home page sections: 10,11,27

  • If the section existed (used preset), you only need click to Testimonial Slider & Banner section to edit.

  • If the store don't have it, only need click to Screenshot button and select Testimonial Slider & Banner.

General Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index) and Image background.

Section settings: Slider settings.

Content area: listing 2 options to show Testimonial or Banner block Screenshot


  • For Banner block, there are options: Upload image and set the link.

Screenshot


  • For Testimonial block, there are options: Display column, Title, Layout, number review and group Testimonial options (Upload avatar, Name, job, Review text).

Screenshot


Testimonial Slider

Screenshot

A part of Home page sections: 26,53

  • If the section existed (used preset), you only need click to Testimonial Slider section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Testimonial Slider.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and Image background.

Section settings: Title and Slider settings.

Content area: listing all Testimonial

Screenshot

Each element will have option to Upload Avatar, rating star, Review text and Name

Screenshot


Testimonial & Banner

Screenshot

A part of Home page sections: 51

Requires Theme Version 6.1.5 or higher

  • If the section existed (used preset), you only need click to Testimonial & Banner section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Testimonial & Banner.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and Image background.

Content area: include 2 element: Testimonial and Banner

Screenshot


Group Blocks #1

Screenshot

A part of Home page sections: 13

  • If the section existed (used preset), you only need click to Testimonial & Banner section to edit.

  • If the store don't have it, only need click to Screenshot button and select Testimonial & Banner.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and option to show the right column content.

Content area: listing 6 Block type used for this layout.

Screenshot

1. Left - Banner

Options to show 1 banner with options to upload image and set the link.

Screenshot


2. Left - Banners

Options to show 2 grid banners. Each banner will options to upload image and set the link.

Screenshot


3. Left - Products slider

Options to show a slider of products. You need set Title, Collection to show products, limit show, slider and responsive settings.

Screenshot


4. Right - Banner

Options to show 1 banner with options to upload image and set the link. It will appear in the right column content. If you disble the right column, it also don't appear.

Screenshot


5. Right - Testimonial

Options to show Customer review in right column content. If you disble the right column, it also don't appear. You need set the Slider setting and Customer review (Actar, Name, job, review text).

Screenshot


4. Right - Products

Options to show list products. It will appear in the right column content. If you disble the right column, it also don't appear. You need set the Title, Collection to show products and limit show.

Screenshot


Group Blocks #2

Screenshot

A part of Home page sections: 20

  • If the section existed (used preset), you only need click to Group Blocks #2 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Group Blocks #2.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and option to show the right column content.

Content area: listing 6 Block type used for this layout.

Screenshot


1. Left - All Collections

Options to show collections from the link list.

Screenshot


2. Left - Testimonial

Options to show customer review

Screenshot


3. Middle - Slideshow

Options to create the slide of Slideshow. You can read the Slideshow section (image type) to get more guide.

Screenshot


4. Middle - Products Slider

Options to create the products slider.

Screenshot


5. Right - Information

Options to create Right information, include image and text.

Screenshot


6. Right - Banner

Options to create the right banner.

Screenshot


Group Blocks #3

Screenshot

A part of Home page sections: 20

  • If the section existed (used preset), you only need click to Group Blocks #3 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Group Blocks #3.

General Settings: Display on, Full width, Style value (Margin,Z-Index) and option to show the right column content.

Content area: listing 3 Block type used for this layout.

Screenshot


1. Left - Products Grid

Options settings: Title, Color bar, Banner in left, Collections to show products. The limit auto is 6.

Screenshot


2. Right - Products Column

Options to show right banner.

Screenshot


3. Right - Banner

Options to create the products listing from selected collection.

Screenshot


Group Blocks #4

Screenshot

A part of Home page sections: 29

  • If the section existed (used preset), you only need click to Group Blocks #4 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Group Blocks #4.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Title and Link list in right area.

Content area: listing 3 Block type used for this layout.

Screenshot


  • Banner:

    Options settings: Title, Color bar, Banner in left, Collections to show products. The limit auto is 6.

    Screenshot


  • Item listing:

    Options to show right banner.

    Screenshot


  • Products listing:

    Options to create the products listing from selected collection.

    Screenshot


Group Blocks #5

Screenshot

A part of Home page sections: 29

  • If the section existed (used preset), you only need click to Group Blocks #5 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Group Blocks #5.

General Settings: Display on, Full width, Style value (Margin,Z-Index), Title and Link list in right area.

Content area: listing 3 Block type used for this layout.

Screenshot


  • Banner:

    Options settings: Title, Color bar, Banner in left, Collections to show products. The limit auto is 6.

    Screenshot


  • Item listing:

    Options to show right banner.

    Screenshot


  • Products listing:

    Options to create the products listing from selected collection.

    Screenshot


Instagram

Screenshot

A part of Home page sections: 18,42,44,45,46

  • If the section existed (used preset), you only need click to Instagram section to edit.

  • If the store don't have it, only need click to Screenshot button and select Instagram.

General Settings: Display on, Full width, Style value (Margin,Z-Index).

Section Settings: Title, Decor image (left/right), instagram method and Responsive settings.

There are 2 methods:

  • by API Access Token: This method is auto show photos from your account. You need input your account information in the group "Instagram API Access Token".

    • API Access Token: get one https://instagram.pixelunion.net/

    • User ID: this is User ID, not Username. The first string of Access Token array.

    • Number of images: limit photos.

  • by URL: this is manually method. You need input the Instagram photo URL into the group "Instagram Photo Url". The URL don't have the / at the end.

    • https://www.instagram.com/p/BoL5WAEhrTT ---> Right, worked.

    • https://www.instagram.com/p/BoL5WAEhrTT/ ----> Wrong, don't work.

Screenshot


Location Listing

Screenshot

A part of Home page sections: 26

  • If the section existed (used preset), you only need click to Location Listing section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Location Listing.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Title, Link list, Action text, Link to and color background.

Screenshot


Maps & Contact #1

Screenshot

A part of Home page sections: 44

Requires Theme Version 6.1.5 or higher

  • If the section existed (used preset), you only need click to Maps & Contact #1 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Maps & Contact #1.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Input the iframe of Google Maps

Screenshot


Maps & Contact #2

Screenshot

A part of Home page sections: 52

Requires Theme Version 6.1.18 or higher

  • If the section existed (used preset), you only need click to Maps & Contact #2 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Maps & Contact #2.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Left/Right Contact setings: input the text content.

Map settings: Input the iframe of Google Maps

Screenshot


Newsletter #1

Screenshot

A part of Home page sections: 45

Requires Theme Version 6.1.7 or higher

  • If the section existed (used preset), you only need click to Newsletter #1 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Newsletter #1.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Input the Caption and Form field.

Screenshot


Newsletter #2

Screenshot

A part of Home page sections: 47

Requires Theme Version 6.1.10 or higher

  • If the section existed (used preset), you only need click to Newsletter #2 section to edit.

  • If the store don't have it, only need click to Screenshot button and select Newsletter #2.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Image background, Heading, Description and Action text, link.

Screenshot


Text & Coutdown

Screenshot

A part of Home page sections: 48

Requires Theme Version 6.1.11 or higher

  • If the section existed (used preset), you only need click to Text & Coutdown section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Text & Coutdown.

Layout Settings: Display on, Full width, Active padding between banners, Style value (Margin,Z-Index) and option to add the margin left and right of the container.

Sections settings: Border option, Caption and time settings.

Screenshot



FAQs #1

Screenshot

A part of Home page sections: 51

Requires Theme Version 6.1.16 or higher

  • If the section existed (used preset), you only need click to FAQs #1 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select FAQs #1.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Title and More link text (HTML).

Content area: listing all Questions and Answers.

Screenshot


FAQs #2

Screenshot

A part of Home page sections: 54

Requires Theme Version 6.1.20 or higher

  • If the section existed (used preset), you only need click to FAQs #2 section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select FAQs #2.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Left banner settings, and FAQs Title, Description.

Content area: listing all Questions and Answers.

Screenshot


Player Profile

Screenshot

A part of Home page sections: 53

Requires Theme Version 6.1.19 or higher

  • If the section existed (used preset), you only need click to Player Profile section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Player Profile.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Title, color caption and image background

Content area: listing all Player. You have option to upload image, name and position.

Screenshot


Social Media

Screenshot

A part of Home page sections: 53

Requires Theme Version 6.1.19 or higher

  • If the section existed (used preset), you only need click to Social Media section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Social Media.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Title, and color background.

Content area: listing all scial element. You have option to upload icon, name, type, social link, image background and color options.

Screenshot


Parameter

Screenshot

A part of Home page sections: 54,55

Requires Theme Version 6.1.20 or higher

  • If the section existed (used preset), you only need click to Parameter section to edit. The name will depend on Title text. So, you need temporary remove the title to have the right section name.

  • If the store don't have it, only need click to Screenshot button and select Parameter.

General Settings: Uppload image background and Bottom text.

Content area: listing all Parameter.

Screenshot


Custom HTML

Screenshot

A part of Home page sections: 41,42

Requires Theme Version 6.1.1 or higher

  • If the section existed (used preset), you only need click to Custom HTML section to edit.

  • If the store don't have it, only need click to Screenshot button and select Custom HTML.

General Settings: Display on, Full width, Style value (Margin,Z-Index) .

Section settings: Input any Custom HTML Content

Screenshot


Other sections

Screenshot

It's Static section, a part of Sidebar layout. It can NOT add new, add more.

Click to Screenshot section to edit.

Layout Settings: Style value (Margin,Z-Index).

Content area: listing all block element

1. All Collections

Screenshot

Input the Title block and select the Navigation to show link list.

2. Banner

Screenshot

Upload image as banner and set the link option.


3. Testimonial

Screenshot

There are options to control the slider options and Reviewer element options (Avatar, Name, Job, Review text). Currently the limit is 5 Reviewer element. If you want more, you can contact with Technical support.


4. Article

Screenshot

There are options: Title block, select Blog to show Article, limit article and slider options.


5. Latest Products

Screenshot

There are options: Title block, select Collection to show products and limit appear.


6. Instagram

Screenshot

Need input the Title block and select method to show Instagram photos.

There are 2 methods:

  • by API Access Token: This method is auto show photos from your account. You need input your account information in the group "Instagram API Access Token".

    • API Access Token: get one https://instagram.pixelunion.net/

    • User ID: this is User ID, not Username. The first string of Access Token array.

    • Number of images: limit photos.

  • by URL: this is manually method. You need input the Instagram photo URL into the group "Instagram Photo Url". The URL don't have the / at the end.

    • https://www.instagram.com/p/BoL5WAEhrTT ---> Right, worked.

    • https://www.instagram.com/p/BoL5WAEhrTT/ ----> Wrong, don't work.



Bottom Banners Grid

Screenshot

It's Static section, a part of Sidebar layout. It can NOT add new, add more.

Click to Screenshot section to edit.

Layout Settings: Display on and Style value (Margin,Z-Index).

Content area: listing banner in grid (1 or more banners).

Screenshot

With each block element, we will have options Image, Link, Action text and Responsive width of banner.

Bottom Information

Screenshot

It's Static section, a part of Sidebar layout. It can NOT add new, add more.

Click to Screenshot section to edit.

Layout Settings: Display on and Style value (Margin,Z-Index).

Content area: listing all Information block content.

Screenshot

With each block element, we will have options icon, Heading, Sub Heading and Responsive width of banner.

Bottom Brands Slider

Screenshot

It's Static section, a part of Sidebar layout. It can NOT add new, add more.

Click to Screenshot section to edit.

General Settings: Display on and Style value (Margin,Z-Index), Slider settings and Responsive columns.

Content area: listing all Brand block content. Click to block to edit: add Brand image and link to.

Screenshot

With each block element, we will have options image and Link.

Home page preset

Go to the Preset link of Home page layout that you want use, copy the code, then go to the Action button > Edit code > Config folder > open settings_data.json and paste the code just copied.

Preset links of all Home pages (live demo) is below:

Troubleshooting

What the value input for the Style value (Margin,Z-Index)?

You can input 3 value, separate tags with comma.

The first value means: Margin top

The second value means: Margin bottom

The third value means: z-index, stack order of section.

Example: you want the section have the spacing in top 50px and bottom spacing is 60px and stack order is 1. You need input into Style value (Margin,Z-Index) is 50,60,1

Screenshot

How to use the Home page preset?

Step 1: go to the Preset link

Step 2: Copy the content

Step 3: Go to Themes Area of Shopify theme > Actions button > Edit Code > Config folder and open the settings_data.json file and paste the content.

Step 4: Save and done.

Site broken after change the Homepage preset

This is NOT the theme error. It's your web browser cache error. It still stored old layout, so that make the layout broken.

You can check the incognito tab to test it first. If the incognito tab worked, you only need clearly your web browser cache to new.

Banner recommended size

Due to the package is all-in-one. It included a lot of sections and styles. So the recommended size in banners can not right in some case. You can submit the Ticket with Customer support staff to get the right recommended size. Thank you.