Home Page

The Home page is the primary entry point for users visiting a website or application. It provides an overview and directs users to other sections or pages. The content may vary depending on the type of website or application, but typically includes a logo, navigation menu, hero section, featured content, and key feature sections.

Since the Home page is the first impression users have of a website or application, it's crucial to design it to be visually appealing, easy to navigate, and effectively communicate the website or application's value proposition.

Hero Section

A hero image is a striking visual element at the top of a website's Home page. Its purpose is to capture users' attention and convey the website or application's main message or value proposition in a visually compelling way.

To add a hero image section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Hero Image' from the left sidebar.

Below are the configurable options of the hero image section:

1. Global Component

Marking a section as a Global Component enables universal editing. Any modifications to the master component automatically apply to all instances, ensuring consistency and simplifying updates across the project. Check the box to designate the section as a global component, and you can provide a name for the section.

2. Heading

The Heading of a Hero Image is a text element that is typically placed on top of the image in the Hero section of a website's Home page. It is a short and catchy text element that conveys the website's main message or value proposition to visitors.

3. Overlay Opacity

Overlay opacity refers to the degree of transparency or darkness of an overlay element on top of another element, such as an image or a background. It determines the level of visibility of the underlying content and can range from completely transparent (0% opacity) to completely opaque (100% opacity).

Use the slider to modify the overlay opacity of the hero image of your store.

4. Full Width

Full Width allows items to occupy the entire width of the visible area in the browser, which is called the viewport. This option can be useful in creating a full-width, immersive design or layout for a website, particularly for pages that have a lot of visual content.

Check the Full Width box to allow the image to take entire width of the viewport.

5. Invert Button and Text Colour

The invert button and text color feature on a website is a tool that allows users to switch the colors of the background and text. This is helpful for people with visual difficulties who may find it easier to read white text on a black background or vice versa.

Check the Invert Button and Text Colour box to enable the option.

6. Button Text

The Button Text of a Hero Image is a text element that is typically placed on the Hero section of a website's Home page, usually below the Description text. The purpose of the Button Text is to provide a clear call to action that prompts the visitor to take the desired action. Some examples of button text are “Learn More” “Buy Now” “Get Started” etc.

7. Button Link

A button link in a website is a clickable button that has a hyperlink attached to it. When a user clicks on the button, it takes them to a different page, section of the page, or to another website altogether.

Use this option to modify the colour of button link.

8. Mobile Banner

A mobile banner is a type of advertisement displayed on mobile devices, typically in the form of a rectangular or square graphic that appears within a mobile app or website.

To upload a mobile banner on the mobile/tablet.

1. Click ‘pen icon’ to upload image.
2. Choose drag & drop, mobile/tablet upload or URL.
3. Acceptable formats: png, jpeg, svg+xml, gif.
4. Max file size: 2 MB.

Text Alignment (Mobile): Text alignment for mobile refers to the positioning of text within a mobile interface, such as an app or website, in relation to the screen's edges or other elements.

Below are the steps to configure text alignment for mobile:

1. Left
2. Centre
3. Right

Position: Text Position for mobile means where the words and writing are placed on the screen. Use this option to align the vertical alignment of overlay content for mobile.

Below are the steps to configure text position for mobile:

1. Top
2. Centre
3. Bottom

9. Desktop/Tablet Banner

A desktop/tablet banner is a graphic or visual advertisement that appears on a computer screen in a fixed position, typically at the top or bottom of the screen.

Text Alignment (Desktop/Tablet): Text alignment for desktop/tablet refers to the placement of text on a computer screen in relation to the left or right margin, or centred within a block of text.

Below are the steps to configure text placement for desktop:

1. Left
2. Centre
3. Right

Position: Text Position for desktop/tablet means where the words and writing are placed on the screen. Use this option to align the vertical alignment of overlay content for desktop/tablet.

Below are the steps to configure text position for desktop:

1. Top-Left
2. Top-Center
3. Top-Right
4. Center-Left
5. Center-Center
6. Center-Right
7. Bottom-Left
8. Bottom-Center
9. Bottom-Right

Featured Collection

A featured collection is a website section that highlights a selection of products, often used in e-commerce. It includes images, descriptions, and pricing information to grab users' attention and encourage exploration, driving sales and engagement.

To add a featured collection section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Featured Collection' from the left sidebar.

Below are the configurable options of the featured collection section:

1. Heading

In a featured collection, a heading typically refers to a title or headline that introduces and summarises the content of the collection. In the title text field, enter the title to be displayed as the primary heading of your Featured Collection.

2. Description

A description in a featured collection is a brief summary or explanation of the theme or purpose of the collection. Enter a brief description of the product items that appear in the Featured Collection section of your store.

3. Autoplay

Auto play refers to the automatic transition of images in the slideshow without requiring user input. Use this option to allow a slideshow to start playing automatically, without the need for manual control.

4. Blocks

Blocks in featured collection refer to the visual or graphical elements that are used to display and organise collections of content. These blocks typically contain an image or icon that represents the collection, as well as a title or label that describes it.

Below are the steps to configure blocks in categories listing:

1. Click on collection item in the BLOCKS section in the left sidebar of your theme.
2. Click "Add block",
   1. Add the collection name in the Collection Tab section.
   2. Choose a collection item from the dropdown menu.

Application Banner

An application banner is a common feature on a website's home page, and it serves as a way to communicate important information to visitors. This banner typically appears at the top of the page and displays a message that the website owner wants to convey.

The message can be related to a variety of things, such as a new product release, a limited-time offer, or a site-wide sale. The purpose of the application banner is to draw attention to this message and encourage visitors to take action based on it.

To add an application banner section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Application Banner' from the left sidebar.

Below are the configurable options of the application banner section:

1. Desktop Banner

A desktop banner is the background image displayed behind the logo or title of an application on a desktop computer. It is a visual element that helps to establish the brand identity and create a visually appealing user interface.

Use this option to insert the desktop-compatible image in the application banner. You can upload the image by clicking on the pen.

2. Mobile Banner

A mobile banner refers to the visual content that is displayed on the banner of a mobile application.

Use this option to insert the Mobile-compatible image in the application banner.

3. Redirect Link:

A redirect link is a web address attached to a text or image that automatically sends a user to a different URL when clicked on the same. To generate a redirect link, follow these steps:

1. Click "Link type" in the "Redirect link" section.
2. Choose "Custom link" and enter your link, or select a page from the drop-down menu.
3. Click "Save" to finalise the redirect link.

4. Collection

A collection in an application contains the collections of products you want to display to users in your application banner section.

Choose the desired collection from the dropdown menu.

5. Add Query

The "Add Query" section on an application banner page typically refers to a feature that allows users to input specific search criteria or parameters to filter or narrow down their search results. Add query provides two configurable options for meticulous search parameters:

1. Key
2. Value

Category Listing

A Category Listing on a Home page is a section that displays a list of categories related to the content or products offered on the website or application, allowing users to quickly navigate to the specific category they are interested in.

To add a categories listing section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Categories Listing' from the left sidebar.

Below are the configurable options of the category listing section:

1. Heading

A heading in category listing is a title or label given to a group of related category in order to organise and simplify the navigation of a website or application.

In the title text field, enter the title to be displayed as the primary heading of your Category Listing section.

2. Description

Description in category listing refers to the text or brief summary that describes a particular category of products or services on a website or app. It is typically displayed alongside the category name and image, and it provides users with a better understanding of what they can expect to find within that category.

Enter a brief description of the product items that appear in the Category Listing section of your store.

3. Blocks

Blocks in category listing refer to the visual or graphical elements that are used to display and organise category of content. These blocks typically contain an image or icon that represents the category, as well as a title or label that describes it.

Below are the steps to configure blocks in category listing:

1. Click "Add block" below the BLOCKS section in the left sidebar of your theme.
2. In the Category Item window, there are three configurable options:
   1. Image: Click on the pen to upload an image of your category item.
   2. Image Link:
      1. Click "Link type" in the "Image link" section.
      2. Choose "Custom link" and enter your link, or select a page from the drop-down menu.
   3. Filters: Select filter for image.
   4. Edit Visible: Reposition an image using the XY scale and adjust its size by specifying the desired height and width.
   5. Click "Save" to finalise the link.

4. Button Text

Button text in category listing refers to the text that appears on a button that is associated with a specific category. This button is often used to allow users to easily select or filter content based on the chosen category.

Enter the title you want to put in your button text, to enable the user to allow users to tap once to look at options after entering a string and make a decision. Your button text could be named as ‘Grab this offer’, or “Hurry now’.

Collections Listing

A Collections Listing on a Home page is a section that displays a curated collection of products or content related to a specific theme or category, allowing users to easily browse and discover new items.

To add a collections listing section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Collections Listing' from the left sidebar.

Below are the configurable options of the collections listing section:

1. Heading

Heading in collections listing refers to the main title or label that is used to categorise and group similar products or items together in a collection.

In the title text field, enter the title to be displayed as the primary heading of your Collections Listing section.

2. Description

Description in collections listing refers to a brief summary or explanation of a collection of items or products. It is typically displayed on a page alongside the collection's title and may include information such as the theme or purpose of the collection, the types of products included, and any special features or benefits of the collection.

Enter a brief description of the product items that appear in the Collections Listing section of your store.

3. Blocks

Blocks in collections listing refer to the sections or groupings of products within a collection. It allows for the organisation and categorisation of products within a collection based on various attributes such as color, size, or style.

Below are the steps to configure blocks in collections listing:

1. Click on "Add block" button below "BLOCKS" section in left sidebar.
2. Click on the pen to upload an image of your collection item.
3. Select collection from the dropdown menu.

4. Button Text

Button text in collections listing refers to the text that appears on the button or link associated with each collection in an e-commerce store's collection page.

Enter the title you want to put in your button text, to enable the user to allow users to tap once to look at options after entering a string and make a decision. Your button text could be named as ‘Shop now, or “Buy now’.

Image Slideshow

An Image Slideshow is a section on a website that displays a series of images or slides that automatically transition to capture the user's attention and encourage further exploration of the website.

To add a image slideshow section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Image Slideshow' from the left sidebar.

Below are the configurable options of the image slideshow section:

1. Auto Play Slides

Auto play slides in an image slideshow refer to the automatic transition of images in the slideshow without requiring user input. Use this option to allow a slideshow to start playing automatically, without the need for manual control.

2. Full Width

Full Width allows items to occupy the entire width of the visible area in the browser, which is called the viewport. This option can be useful in creating a full-width, immersive design or layout for a website, particularly for pages that have a lot of visual content.

Check the Full Width box to allow images to take entire width of the viewport.

3. Blocks

In an image slideshow, blocks refer to the individual units or sections that contain the images being displayed. Each block typically contains one image, and the slideshow transitions between these blocks to create a dynamic visual display.

Below are the steps to configure blocks in categories listing:

1. Click on "Add block" button below "BLOCKS" section in left sidebar.
2. Choose an option to add an image:
   1. Desktop Image: Upload image for desktop site.
   2. Mobile Image: Upload image for mobile site.
   3. Redirect Link: A redirect link is a web address attached to a text or image that automatically sends a user to a different URL when clicked on the same. To generate a redirect link, follow these steps:
      1. Click "Link type" in the "Redirect link" section.
      2. Choose "Custom link" and enter your link, or select a page from the drop-down menu.
      3. Click "Save" to finalise the redirect link.

Video Section

A Video Section contains a hero video on a website which is a large, visually striking video that is prominently featured on the homepage or landing page. It is designed to capture the viewer's attention and create a strong first impression of the website or brand.

To add video section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Video Section' from the left sidebar.

Below are the configurable options of the video section:

1. Upload Video

The primary video in the hero section of a website refers to the main video that is displayed prominently at the top of the website's homepage or landing page.

Steps to configure Primary Video in your hero video:

1. Click the pen icon.
2. The upload screen will appear.
3. Three methods for uploading the hero video: drag and drop, computer upload, or URL.
4. Select the video by clicking on it after upload.

2. Full Width

Full width allows items to occupy the entire width of the visible area in the browser, which is called the viewport. This option can be useful in creating a full-width, immersive design or layout for a website, particularly for pages that have a lot of visual content. Check the Full Width box to allow the video to take entire width of the viewport.

3. Autoplay

Autoplay is a feature that automatically starts playing a video when the page is loaded, without requiring the user to click a play button. Check to turn it on.

4. Hide Video Control

Enabling this feature will hide the play/pause button on the hero video.

5. Play Video In loop

This feature enables the video to play repeatedly, without ending.

6. Mute Audio

This option allows you to mute the audio and disable the volume control of the video.

7. Desktop Fixed Height

Desktop Fixed Height in the hero video section of a website refers to the specific height that the video will be displayed at on a desktop computer. This means that regardless of the screen size or resolution of the device being used to view the website, the hero video section will remain at a fixed height.

Use the slider to modify the height of the video for desktop.

8. Mobile and Tablet Fixed Height

Mobile and Tablet Fixed Height in the hero video section of a website refers to the specific height that the video will be displayed at on a mobile/tablet. This means that regardless of the screen size or resolution of the device being used to view the website, the hero video section will remain at a fixed height.

Use the slider to modify the height of the video for mobile/tablet.

9. Thumbnail Image

A thumbnail image in the hero video section of a website refers to a small image that is used to represent the video content. Use the upload button in the left side bar to upload the thumbnail image of your hero video.

Rich Text

Rich Text on a website means you can format the text in different ways (like bold, italic, or underlined), add pictures or videos, and include links to other pages. It makes the content look more interesting and engaging.

It is also often used as a standout text to generate clicks with a CTA button or tag.

To add rich text section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Rich Text' from the left sidebar.

Below are the configurable options of the rich text section:

1. Heading

In a rich text section, a heading typically refers to a title or headline that introduces and summarises the content of the section. In the title text field, enter the title to be displayed as the primary heading of your Rich Text.

2. Description

A description in a rich text is a brief summary or explanation of the theme or purpose of the rich text. Enter a brief description of the product items that appear in the Rich Text section of your store.

3. Blocks

In rich text, blocks refer to the individual units or sections that contain the rich text button being displayed. Each block typically contains:

1. Button text: Button text refers to the text that appears on the button or link associated with rich text on a store page. Add an enticing button text to generate clicks.
2. Redirect link: Redirect link is a web address attached to a text or image that automatically sends a user to a different URL when clicked on the same. To generate a redirect link for the button text:
   1. Click "Link type" in the "Redirect link" section.
   2. Choose "Custom link" and enter your link, or select a page from the drop-down menu.
   3. Click "Save" to finalise the redirect link.

Extensions

The Extensions section is typically a dedicated area where website owners can display icons or links to their social media profiles, such as Facebook, Twitter, Instagram, or LinkedIn. Its aim is to prompt visitors to connect with the business on social media or follow their updates.

To add extensions section to your website:

1. Go to the appearance section of your theme and select 'Edit'.
2. Click on 'Add Section' below the list of other sections on the left side of the screen.
3. Select 'Extensions' from the left sidebar.

Below are the configurable options of the extensions section:

1. Extension Positions

The extension positions in the extension section of a website refer to the specific locations or areas on a web page where browser extensions or add-ons can be displayed or integrated.

Below are the steps to configure extension positions:

1. Click on the ‘+’ button to add an extension.
2. Add extension (e.g. WhatsApp Order Notification).
3. Wrapper (e.g. WhatsApp consent).
4. Users can add many other extensions using the same procedure.

2. Section Top Margin

Section top margin in a website refers to the space between the top of a section and the element above it. It determines the distance between the top of a section and the element above it, such as the header or the previous section.

Use the slider to adjust the section top margin that can impact the layout and spacing of the extension position.

3. Section Bottom Margin

In a website, the section bottom margin refers to the space between the bottom edge of a section and the top edge of the next section below it. It is a styling property that can be adjusted to control the amount of space between sections and improve the visual layout of a webpage.

Use the slider to adjust the section bottom margin that can impact the layout and spacing of the extension position.

About Us

The "About Us" section typically provides information about the website or the store. It may include a brief overview of the website's purpose, mission, history, and/or the team members involved in its creation.

1. Heading

In about us, a heading typically refers to a title or headline that introduces and summarises the content of the section. In the title text field, enter the title to be displayed as the primary heading of your About Us section.

2. Image

Upload the primary image to highlight your About Us section considering the following specifications: You can either use the ‘drag and drop’ or ‘upload via URL’ option to upload your image.

3. Description

A description in about us is a brief summary or explanation of the theme or purpose of the section. In the title text field, enter a brief description of the About Us section of your store.