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.

Application Banner

The Application Banner is a large image that appears on your storefront's homepage to grab visitors' attention. This banner helps showcase key promotions, new arrivals, or important messages in a visually appealing way!

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:

1. Desktop Image: Application banner image for desktop screens.
2. Mobile Image: Application banner image for mobile screens.
3. Redirect Link: Link to which customer is to be redirected to when the user clicks on the application banner image.
4. Block
   1. Hotspot Desktop: Displays clickable hotspots on desktop view to highlight specific areas of an image or section for enhanced interactivity and engagement.
      1. Pointer: The pointer shape to be a circle pointer or a box
      2. Show Clickable Area: Whether the clickable area to be shown or not
      3. Horizontal Position: Set the horizontal position of the pointer on the banner image
      4. Vertical Position: Set the vertical position of the pointer on the banner image
      5. Width: Width of the box pointer as a measure of the banner width. Only applicable for box pointer type
      6. Height: Height of the box pointer as a measure of the banner height. Only applicable for box pointer type
      7. Hotspot Hover Image: Image to be displayed when the user hovers over the pointer. Only applicable for circular pointer type
      8. Headers: Heading to be displayed when the user hovers on the hotspot. Only applicable for circular pointers
      9. Description: Description to be displayed when the user hovers on the hotspot. Only applicable for circular pointers
      10. Hover Link Text: Hover Link text to be displayed when the user hovers on the hotspot. Only applicable for circular pointers
      11. Redirect Link: Redirect link to which the customer is redirected to when the user clicks on the hotspot. Only applicable for circular pointers.
   2. Hotspot Mobile: Displays clickable hotspots on mobile view to highlight specific areas of an image or section for enhanced interactivity and engagement
      1. Pointer: The pointer shape to be a circle pointer or a box
      2. Show Clickable Area: Whether the clickable area to be shown or not
      3. Horizontal Position: Set the horizontal position of the pointer on the banner image
      4. Vertical Position: Set the vertical position of the pointer on the banner image
      5. Width: Width of the box pointer as a measure of the banner width. Only applicable for box pointer type
      6. Height: Height of the box pointer as a measure of the banner height. Only applicable for box pointer type
      7. Hotspot Hover Image: Image to be displayed when the user hovers over the pointer. Only applicable for circular pointer type
      8. Headers: Heading to be displayed when the user hovers on the hotspot. Only applicable for circular pointers
      9. Description: Description to be displayed when the user hovers on the hotspot. Only applicable for circular pointers
      10. Hover Link Text: Hover Link text to be displayed when the user hovers on the hotspot. Only applicable for circular pointers
      11. Redirect Link: Redirect link to which the customer is redirected to when the user clicks on the hotspot. Only applicable for circular pointers.

Categories Listing

The Categories Listing section helps display different product categories on your storefront in a structured and visually appealing way.

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 configurations available

1. Autoplay Slides: Autoplay the categories card to show the entire list of categories.
2. Show Category Name: Show the category name on the category card.
3. Category Name Placement: Select whether the category name needs to be displayed within the image or outside it.
4. Category Name Position: Select the vertical position of the category name inside the container - whether it needs to be top aligned, center aligned or bottom aligned.
5. Category Name Text Alignment: Align the category name horizontally in the container to the left, right or center of the container.
6. Change Slides Every: Set the time limit after which autoplay of the category needs to happen.
7. Items per row (Desktop): Select the category cards to be displayed per row in desktop screens.
8. Container Background Color: Select the color of the background container of the category card.
9. Fit Image to the container: Fit Image to the Container.
10. Mobile Layout: Select the layout in mobile screens whether it needs to be stack or horizontal scroll.
11. Desktop Layout: Select the layout in desktop screens whether it needs to be stack or horizontal scroll.
12. Heading: Heading which gets displayed in the section.
13. Description: Description which gets displayed in the section.
14. Button Text: Text to be displayed on the button on the category card.
15. Block: Select the department whose categories need to be displayed.

Collection Highlights

The Collections Highlights section helps you display different product collections on your storefront in an organized and customizable way.

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 'Collection Highlights' from the left sidebar.

Below are the configurations available:

1. Heading: Heading which is displayed above the Collection cards in the section.
2. Description: Description which is displayed above the Collection cards in the section.
3. Layout (Mobile): Select the layout for mobile screens - stack or horizontal.
4. Layout (Desktop): Select the layout for desktop screens - stack or horizontal.
5. Button Text: Text to be displayed on the button on the Collection card.
6. Display Collections per Row (Desktop): Set the number of collection cards per row to be displayed on desktop screens.
7. Container Background Colour: Set the background of the container for the Collection cards.
8. Fit Image to Container: Fit Image to Container.
9. Blocks
   1. Collection Item: Select the collection whose card is to be displayed.

Hero Image

A hero image is a striking visual element at the top of a website's Home page. Its purpose is to capture user's 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. 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.
2. Description: The Description of a Hero Image is a text element that is typically placed below the Heading in the Hero section of a website's Home page. It usually consists of a short paragraph that provides additional information about the website's main offering, product, or service.
3. Overlay Option: The Overlay Option of a Hero Image is a design feature that allows website designers to add a semi-transparent layer of black or white colour on top of the image in the Hero section of a website's Home page.
4. 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.
5. Redirect Link: Redirect Link refers to a hyperlink that is attached to the Button Text. When a website visitor clicks on the Button Text, they will be redirected to a specific webpage or URL attached to it.
6. Invert Button Colour: The "Invert Button Colour" toggle button is a feature that allows you to toggle the colour of the button. When the button is toggled on, hovering over the button will invert the colour of the button. This feature is useful for users who have difficulty reading text on certain background colours, as it allows them to easily switch between different colour schemes.
7. Desktop Banner: A desktop 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.

1. To upload a desktop banner on the website.

   1. Click ‘pen icon’ to upload image.
   2. Choose drag & drop, computer upload or URL.
   3. Desktop hero image aspect ratio is 16:9 (1440x810).
   4. Acceptable formats: png, jpeg, svg+xml, gif.
   5. Max file size: 2 MB.

2. Text Placement (Desktop): Text placement for desktop refers to the strategic positioning of written content on website that is specifically designed to be viewed on a computer screen.

   1. Below are the steps to configure text placement for desktop:
      1. Click on the dropdown menu.
      2. Choose from various positions to place the text:
      3. Top center
      4. Top left
      5. Top right
      6. Center left
      7. Center center
      8. Center right
      9. Bottom left
      10. Bottom center
      11. Bottom right

1. Text Alignment (Desktop): Text alignment for desktop refers to the placement of text on a computer screen in relation to the left or right margin, or centered within a block of text.
   1. Below are the steps to configure text placement for desktop:
      1. Centre alignment
      2. Left alignment
      3. Right alignment
2. 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.
   1. To upload a desktop banner on the mobile/tablet.
      1. Click ‘pen icon’ to upload image.
      2. Choose drag & drop, mobile/tablet upload or URL.
      3. Mobile hero image aspect ratio is 9:16 (320x569).
      4. Acceptable formats: png, jpeg, svg+xml, gif.
      5. Max file size: 2 MB.
3. Text Placement (Mobile/Tablet): Text placement for mobile/tablet refers to the strategic placement of written content, such as headlines, body copy, and calls-to-action, on a mobile device/tablet screen.
   1. Below are the steps to configure text placement for mobile/desktop:
      1. Click on the dropdown menu.
      2. Choose from various text placement positions, including:
         1. Top centre
         2. Top left
         3. Top right (tablet only)
         4. Centre left (tablet only)
         5. Centre centre
         6. Centre right (tablet only)
         7. Bottom left (tablet only)
         8. Bottom centre
         9. Bottom right (tablet only)
4. Text Alignment (Mobile/Tablet): Text alignment for mobile/tablet refers to the positioning of text within a mobile/tablet interface, such as an app or website, in relation to the screen's edges or other elements.
   1. Below are the steps to configure text placement for desktop:
      1. Centre alignment
      2. Left alignment
      3. Right alignment
5. Block
   1. Hotspot Desktop: Displays clickable hotspots on desktop view to highlight specific areas of an image or section for enhanced interactivity and engagement.
      1. Pointer: The pointer shape to be a circle pointer or a box.
      2. Show Clickable Area: Whether the clickable area to be shown or not.
      3. Horizontal Position: Set the horizontal position of the pointer on the banner image.
      4. Vertical Position: Set the vertical position of the pointer on the banner image.
      5. Width: Width of the box pointer as a measure of the banner width. Only applicable for box pointer type.
      6. Height: Height of the box pointer as a measure of the banner height. Only applicable for box pointer type.
      7. Hotspot Hover Image: Image to be displayed when the user hovers over the pointer. Only applicable for circular pointer type.
      8. Headers: Heading to be displayed when the user hovers on the hotspot. Only applicable for circular pointers.
      9. Description: Description to be displayed when the user hovers on the hotspot. Only applicable for circular pointers.
      10. Hover Link Text: Hover Link text to be displayed when the user hovers on the hotspot. Only applicable for circular pointers.
      11. Redirect Link: Redirect link to which the customer is redirected to when the user clicks on the hotspot. Only applicable for circular pointers.
   2. Hotspot Mobile: Displays clickable hotspots on mobile view to highlight specific areas of an image or section for enhanced interactivity and engagement.
      1. Pointer: The pointer shape to be a circle pointer or a box.
      2. Show Clickable Area: Whether the clickable area to be shown or not.
      3. Horizontal Position: Set the horizontal position of the pointer on the banner image.
      4. Vertical Position: Set the vertical position of the pointer on the banner image.
      5. Width: Width of the box pointer as a measure of the banner width. Only applicable for box pointer type.
      6. Height: Height of the box pointer as a measure of the banner height. Only applicable for box pointer type.
      7. Hotspot Hover Image: Image to be displayed when the user hovers over the pointer. Only applicable for circular pointer type.
      8. Headers: Heading to be displayed when the user hovers on the hotspot. Only applicable for circular pointers.
      9. Description: Description to be displayed when the user hovers on the hotspot. Only applicable for circular pointers.
      10. Hover Link Text: Hover Link text to be displayed when the user hovers on the hotspot. Only applicable for circular pointers.
      11. Redirect Link: Redirect link to which the customer is redirected to when the user clicks on the hotspot. Only applicable for circular pointers.

Hero Video

The Hero Video section lets you add an engaging video banner to your homepage, making your storefront more dynamic and interactive.

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 Video' from the left sidebar.

Below are the configurations available:

1. Primary Video: The video to be displayed.
2. Video URL: The URL of the video to be displayed.
3. Autoplay: Autoplay the video.
4. Hide video controls: Enable or disable the video play controls.
5. Play Video in loop: Set whether the video needs to be played on loop or not.
6. Display pause on hover: Set whether the pause button needs to be displayed on hover.
7. Heading: Heading to be displayed above the video in the section.
8. Thumbnail Image: Thumbnail image of the video.

Feature Blog

The Feature Blog section lets you showcase your latest blog posts on your storefront

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 'Feature Blog' from the left sidebar.

Below are the configurations available:

1. Heading: Heading to be displayed above the blog cards in the section.
2. Description: Description to be displayed above the blog cards in the section.

Image Gallery

This section allows merchants to showcase products using image gallery

To add a image gallery 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 Gallery' from the left sidebar.

Below are the configurations available

1. Heading: Heading to be displayed above the image cards in the section.
2. Description: Description to be displayed above the image cards in the section.
3. Card Radius: Set the card radius.
4. Desktop Layout: Set the layout in desktop screens - stack or horizontal scroll.
5. Items per row Desktop: Set the image cards per row to be displayed in desktop screens.
6. Mobile Layout: Set the layout in mobile screens - stack or horizontal scroll.
7. Items per row Mobile: Set the image cards per row to be displayed in mobile screens.
8. Autoplay slides: Set whether the auto scroll for the image cards needs to set.
9. Change slides every: Set the time interval after which auto scroll needs to happen.
10. Blocks
    1. Image Card - Add the image and where it needs to redirect to.

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.
4. 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. Change slides every: "Change slides every" in an image slideshow refers to the time duration between each transition of slides in the slideshow. It determines how long one slide will be displayed before the slideshow automatically switches to the next slide. Use this option that allows you to set the time duration for automatic slide transitions.
   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.
      1. Below are the steps to configure blocks in image slideshow:
         1. Click "Add Block"
         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. Slide Link: Add web address to image for redirection.

Featured Collection

The Featured Collection section allows you to highlight products of a specific collection

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 configurations available

1. Collection: Select the collection whose products need to be displayed.
2. Layout Desktop: Select the layout on desktop screens - horizontal scroll, stack or banner with horizontal carousel.
3. Layout Mobile: Select the layout on mobile screens - horizontal scroll, stack, banner with stack or banner with horizontal carousel.
4. Image size for Tablet/Desktop: Select the image size using the image width for the product cards in desktop screens.
5. Image size for Mobile: Select the image size during the image width for the product cards in mobile screens.
6. Container Background Colour: Select the colour for the background in the container for the product cards.
7. Fit Image to Container: Fit image to container.
8. Heading: Heading to be displayed above the product cards in the section.
9. Description: Description to be displayed above the product cards in the section.
10. Text Alignment: Set the horizontal alignment for heading and description.
11. Button Text: Text to be displayed on the button.
12. Products per Row Desktop: Set the products per row for desktop screens.
13. Products per Row Mobile: Set the products per row for mobile screens.
14. Maximum Products to show: Set the maximum number of products to be shown in the section.
15. Show Add to Cart: Show Add to Cart button in the product cards.
16. Show Wishlist icon: Show wishlist icon on the product cards.
17. Show Badge: Show the badge on the product cards.
18. Show View All Button: Show VIew All button.
19. Mandatory Delivery Check: Enable mandatory delivery check when user adds the product to cart directly from this section.
20. Hide Single Size: Hide size selection when only size is available in add to cart popup.
21. Preselect size: Preselect size in the add to cart popup.

Brands Listing

Brand Listing on a website is a section that displays logos, names and perhaps products of different brands that are associated with the website or the products and services offered on the website. It's often used to showcase the website's partnerships, collaborations, or authorised reseller status.

To add brands 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 'Brands Listing' from the left sidebar.

Below are the configurable options of the brands listing section:

1. Display brands per row (desktop): "Display brands per row (desktop) in brands listing" refers to the number of brand logos or images that are displayed in a single row on a desktop screen when browsing a list of brands. Using the slider number line, select the number of brands you want to keep in a single row of each brands listing category. The minimum and maximum numbers of goods product items are 3 and 5, respectively.
2. Logo Only: A logo-only listing in a brands listing refers to a display of only the logo of a brand, without any accompanying text or information. Tick the Logo Only checkbox if you want to display the logo of the brands in your Brands Listing section.
3. Mobile Layout: Mobile Layout in brands listing refers to the arrangement and design of the brand logos or names on the mobile version of a website or application. It determines how the brands are visually displayed to the user, including factors such as size, spacing, and alignment.
   1. Steps to configure Layout (Mobile) in your brands listing:
      1. Select alignment from Layout dropdown: Stacked or Horizontal.
      2. Stacked view: product items in column or row for simplified interface.
      3. Horizontal scroll: product items in scrolling list horizontally.
4. Desktop Layout: In a brands listing, the Desktop Layout refers to the way in which the brand logos or names are displayed on a desktop or laptop screen. It may include the arrangement, spacing, size, and order of the logos/names, as well as any visual or design elements that are used to highlight or differentiate the brands.
   1. Steps to configure Layout (Desktop) in your brands listing:
      1. Select 'Stacked' or 'Horizontal' alignment from Layout dropdown.
      2. 'Stacked' view offers a simplified interface for arranging content in a column or row.
      3. 'Horizontal' scroll shows product items in a horizontal scrolling list.
5. Align Brands: Align the brand name on the card to the left, right, center on the card
6. Container Background Colour: Container Background colour refers to the colour that is applied to the background of a container element in a website or application. Use this option to modify the container background colour of the featured collection section of your store.
7. Fit image to the container: "Fit image to the container" is a term used in web design and development that refers to the process of adjusting an image's size and dimensions to fit within its designated container element on a webpage. Check the Fit image to the container tick-box if you want the aspect of the image to fit in alignment with the container.
8. Heading: The Heading of a brands listing is a text element that is typically placed on top of the image in the brands listing 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.
9. Description: The Description of a brands listing is a text element that is typically placed below the Heading in the brands listing of a website's Home page. It usually consists of a short paragraph that provides additional information about the website's main offering, product, or service.
10. Button Text: Button text in brands listing refers to the text displayed on the button that allows users to interact with a particular brand within the listing. 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 ‘View all brands’, or “Explore more brands’.
11. Blocks: In the context of brand listings, blocks refer to sections or areas where different brands are displayed together. These blocks can be categorised based on different criteria, such as product type, brand popularity, or price range.To add a block to your theme, click on the ‘Add block’ button right below the BLOCKS section in the left sidebar. Then, from the search brand dropdown menu, choose a brand item or add another block.

Testimonial

The Testimonial section on a website displays feedback from previous customers to build trust and encourage potential customers to take action. This document outlines how to establish the Testimonials component of your store. Employ the section to present a textbox with reviews of your store's products and offerings from users, partners, and employees.

To add a testimonial 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 'Testimonial' from the left sidebar.
4. Below are the configurable options of the testimonial section:
   1. Heading: In a testimonial section, a heading typically refers to a title or headline that introduces and summarises the content of the testimonial section. In the title text field, enter the title to be displayed as the primary heading of your testimonial section.
   2. AutoPlay Slides: Auto play slides in a testimonial section refer to the automatic transition of images in the slideshow without requiring user input. Check the AutoPlay slides tick-box if you want to display automatic advance to the next slide in your Testimonials section.
   3. Change slides every: "Change slides every" in a testimonial section refers to the time duration between each transition of slides in the slideshow. It determines how long one slide will be displayed before the slideshow automatically switches to the next slide. Use this option that allows you to set the time duration for automatic slide transitions. The number of seconds range from 1 second to 10 seconds.
   4. Blocks: Blocks in the testimonial section of a website refer to the individual sections or units that display each testimonial.
      1. Below are the steps to configure blocks in testimonial:
         1. Click 'Add block' below the BLOCKS section in the sidebar.
         2. Select 'Testimonial' from the search brand dropdown menu.
         3. Fill in the details including an image.
         4. Accepted image types: png, jpeg, svg+xml, gif.
         5. Max image size: 2 MB.
      2. Image: Image to be displayed on the testimonial
      3. Testimonial: Testimonial to be displayed
      4. Author Name: Author name in the testimonial section of a website refers to the name of the person who provided the testimonial. Add the name of the author who has written the testimonial.
      5. Author Description: An author description in the testimonial section of a website is a brief statement that provides context about the person who provided the testimonial. Write a brief description about the author.

Link

The Link section lets you easily add clickable links to your page, making it simple for visitors to navigate to other parts of your storefront

To add a link 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 'Link' from the left sidebar.

Media with Text

This section lets you display a section with text and images in a visually appealing layout. This feature is great for creating attention-grabbing sections with both media and text, perfect for highlighting key messages or calls to action

To add a Media with 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 'Media with text' from the left sidebar.

Below are the configurations available

1. Desktop Image: Image to be displayed in desktop screens.
2. Mobile Image: Image to be displayed in mobile screens.
3. Text Alignment Desktop: Set the horizontal and vertical alignment of the text to be displayed.
4. Text Alignment Mobile: Set the horizontal alignment of the text to be displayed.
5. Redirect Link: Set the link to which the button needs to redirect the customer to.
6. Heading: Heading of the text to be displayed.
7. Description: Description of the text to be displayed.
8. Button Text: Ttext to be displayed on the button in the section.
9. Invert Section: Invert the position of the image and the text.

Multi Collection Product List

The Multi Collection Product List section lets you showcase multiple product collections in a clean, organized layout. This section is perfect for displaying several product collections at once, with easy navigation and customizable display options

To add a Multi Collection Product List 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 'Multi Collection ' from the left sidebar.

Below are the configurations available

1. Heading: Heading to be displayed above the product cards.
2. Products per Row: Set the product cards to be displayed per row.
3. Header position: Set the position of the header - left or center.
4. Image size for Tablet/Desktop: Set the image size for the product card to be displayed in desktop screens.
5. Image size for Mobile: Set the image size for the product card to be displayed in mobile screens.
6. Show View All: Show view all button.
7. Fit Image to Container: Fit Image to Container for the product card.
8. Show Wishlist icon: Show wishlist icon on the product card.
9. Show Add to Cart: Show Add to Cart button for the product card.
10. Mandatory Delivery Check: Delivery serviceability check to be made mandatory when customer adds the product to cart through the "Add to Cart" button.
11. Hide single size: Size to be hidden for single size products in Add to Cart popup.
12. Preselect size: Preselect size in Add to Cart popup.
13. Block
    1. Navigation: Select the collection whose product cards to be displayed.
       1. Icon: Icon to be displayed.
       2. Navigation Name: Name of the navigation.
       3. Collection: Select the collection whose products to be displayed.
       4. Button Link: Link to which the customer to be redirected to on clicking the button.

Custom HTML

The Custom HTML section allows you to add your own HTML code to customize the page further.

To add a Custom HTML 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 'Custom HTML ' from the left sidebar.

Below are the configurable options:

• Custom HTML: Paste your HTML code here.

Trust Marker

This section is ideal for building trust and credibility with your audience by displaying important markers like certifications, security badges, or partnerships in a clean and flexible layout.

To add a Trust Marker 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 'Trust Marker ' from the left sidebar.

Below are the configurations available:

1. Heading: Heading to be displayed above the trust markers.
2. Description: Description to be displayed above the trust markers.
3. Card Background Colour: Set the card background colour.
4. Desktop/Tablet Layout: Set the layout in desktop screens - stack or horizontal scroll.
5. Display column per row (Desktop/Tablet): Number of trust markers to be displayed per row in desktop screens.
6. Mobile Layout: Set the layout in mobile screens - stack or horizontal scroll.
7. Display column per row (Mobile): Number of trust markers to be displayed per row in mobile screens.