Home Page


Announcement Bar

This section is used to make upcoming sale announcements or tell users about top shopping deals. You can set timers to set the timelines for your sale or special offers.

Set Up The Announcement Bar

To set up the announcement bar:

  1. From your custom theme editor, select the Announcement Bar option.
  2. Add content for the announcement in the right section of the theme preview.

Announcement Bar Settings

The announcement bar has the following settings:

Show Announcement Bar

Check this checkbox to enable the announcement bar on your website.

Show Close Icon

Select this checkbox if you want to allow your customers to dismiss the announcement bar anytime.

Icon

Choose a suitable icon from the dropdown based on your announcement.

Text Before Countdown

Add some text before your timer, Eg: Sale/Mega Offer

Countdown Date

Set the launch date for the timer to work in the format dd/mm/yy

Text After Countdown

Add some text after the timer, Eg: Hurry/Limited Period Offer

Button Text

Add a display text on the button

Button Link

Add a URL to the button where you want to redirect the customers

Background Style

Choose the desired background style from the drop-down menu. You can choose between Solid or Gradient options.

Background Color

Choose the background color of your current announcement bar.

Background Color 2

Choose this if you have selected Gradient as your background style

Text Color

Choose the text color for the existing announcement bar.

Button Background Color

Set the color of the button in your announcement bar

Button Text Color

Choose the color of the button text in your announcement bar

Button Border Color

Choose the color of the button border in your announcement bar


Header

The header of the Yuva theme appears at the top of each page. You can choose from three header styles: Full width, hamburger, and inline to make your header attractive. You can also configure your online store’s mega navigation menu from the header.

Set Up The Header

To configure the header:

  1. Select the Header option from your custom theme editor.
  2. Click on Add Block to create a block for your header. For the Yuva theme, you can create three types of blocks: Menu, Images, and Products.
  3. Click on Save.

Header Settings

The header has the following configuration settings:

Navigation Style

Choose from the dropdown the header style you want

Logo Image

Choose your brand logo. You can change or delete the logo anytime by clicking on the Change button.

Logo Alignment

Choose between center or left from the dropdown Left sets your logo along the left side, and Center aligns it to the center. Note: This is applicable only to the Full-Width header style.

Menu

Import Menu types of your choice from the default Shopify backend. You can change or remove the existing menu anytime by clicking on the Change button.

Menu Alignment

Choose between center or left from the dropdown. Left sets your menu along the left side, and Center aligns it to the center. Again this setting applies only to the Full-Width header style.

Header Background Color

Set the background color of your header

Header Text Color

Set the color of the text in your header

Header on Hover Text Color

Set the color that appears when a user hovers over the header items.

Menu Background Color

Set the background color of your menu. Please note that it applies only to the Full-Width header style.

Menu Text Color

Set the color of the menu text

Sub Menu Hover Color

Set the color that appears when a user hovers over the sub-menu items.

Enable Search

Check the checkbox to enable a search icon in your header

Enable Currency Converter

Check the checkbox to enable a currency converter option in your header

Enable Sticky Header

Check the checkbox if you want to show the header on the screen as customers scroll up.

Note: these settings are common for all three header styles.


Menu Block Settings

The menu block has the following settings:

Link Position in Main Menu

Select the menu items you want to link this block in the main menu

Assign Name

Add a name to the menu block for easy tracking. Please note that this option is optional.

Menu 1

Add the name of the sub-menu you want to show under the main menu. You can change or delete the menu items anytime using the Change button. Note: You can create a maximum of 4 menu items under the main menu.

Heading

Add a header text for the sub-menu items.



Product Block Settings

Products have higher priority than images. So if if you choose to show product and images block simultaneously, the products will be given top priority.

The product block has the following settings:

Link Position in Main menu

Select the menu items you want to link this block in the main menu

Assign Name (optional)

Add a name to the product block for easy tracking.

Product 1

Choose the first product you want to add to your sub-menu. You can change or remove the product anytime by clicking on the Change button.

Product 2

Choose the second product you want to add to your sub-menu.

Button

Add text to the button

Link

Link the button to the page you want to redirect your users to

Note: All these settings are common for all images that you add to the main menu.


Slider

The Slider section is used to add a slideshow to your home page. Users can add up to 16 slides. Each slide has its own text layout. You can choose from three types of sliders:

  • Image Slide -Allows you to add text above the Image for the Slide with a button for the link redirection and settings for the text content.
  • Split Slide - Allows you to add text with the Image in split for the Slide with a button for the link redirection and settings for the text content.
  • Video Slide - Allows you to add video for the Slide with a button for the link redirection and settings for the text content.

Set Up The Slider

Follow the simple steps to set up the slider:

  1. From the Shopify theme editor, select the Slider option.
  2. Select the arrow beside the Slider option.
  3. Click Add block.
  4. As mentioned above, you can create three types of blocks: Image slide, Video Slide, Split Slide. All of these have a different set of configuration settings.
  5. Click on Save.

Slider Settings

The slider settings are as follows:

Enable Auto Rotate

Check the checkbox to enable auto-rotate on page load

Enable Arrows

Check the checkbox to enable slider control for users using previous-next arrows

Enable Dots

Check the checkbox to enable dots for navigating the slider

Auto Rotate Speed

Set the auto-rotate speed for your slider

Heading Font Size

Set the default font size for headings in all slides

Subheading Font Size

Set the default font size for subheadings in all slides


Image Slider Settings

The image slider settings are as follows:

Image

Add an image you want to show on the current slide.

Mobile Image

Add an image that you may want to show in the mobile view.

Tagline

Add a tagline for your slider

Heading

Add a heading text to be used above on the current slide.

Sub Heading

Add subheading to be displayed below the slide heading

Description

Add a description to be displayed on the current slide

Button Text

Add a display text on the button

Button Link

Link the button to a relevant page

Tagline Background Color

Set the background color of the tagline

Tagline Text Color

Set the color of the tagline text

Heading Text Color

Set the color of the heading text

Subheading Text Color

Set the color of the subheading text

Description Color

Set the color of the description text

Button Background Color

Set the background color of the button

Button Text Color

Set the color of the button text

Button Hover Background Color

Set the color of the button when a user hovers over it

Button Hover Text Color

Set the color of the button text when a user hovers over it.

Content Position

Set the content alignment to left, right, or center.

Note: These settings will be common for all the image sliders you add.


Split Slider Settings

The split slider settings are as follows:

Image

Add an image you want to show on the current split slide

Tag Line

Add a tagline for your slider

Heading

Add a heading text to be used above on the current slide.

Sub Heading

Add subheading to be displayed below the slide heading

Description

Add a description to be displayed on the current slide

Button Text

Add a display text on the button

Button Text

Link the button to a relevant page you want to redirect users

Content Background

Set the background color of the text area

Tag Line Color

Set the color of the tagline text

Tag Line Background

Set the background color of the tagline

Heading Color

Set the color of the heading text

Sub Heading Color

Set the color of the subheading text

Description Color

Set the color of the description text

Button Text Color

Set the color of the button text

Button Background

Set the background color of the button

Button Hover Text Color

Set the color of the button when a user hovers over it

Button Hover Text Background

Set the color of the button background when a user hovers over it.


Video Slider Settings

The video slider settings are as follows:

Video Link

Paste the link to the video you want to show on the current slide.

Placeholder Image

Choose an image for the placeholder

Heading

Add a heading text to be used above on the current slide

Sub Heading

Add a subheading text to be used above on the current slide

Description

Add a description to be displayed on the current slide

Button Text

Add a display text on the button

Button Link

Link the button to a relevant page

Add Overlay

Check to enable overlay on your video slider

Overlay Opacity

Set the overlay opacity of your video slider

Text Position

Set the alignment of slider text to left, right or center

Heading Color

Set the color of the heading text

Sub Heading Color

Set the color of the subheading text

Description Color

Set the color of the description text

Overlay Color

Set the overlay color

Button Text Color

Set the color of the button text

Button Background

Set the background color of the button

Button Hover Text Color

Set the color of the button when a user hovers over it

Button Hover Text Background

Set the color of the button background when a user hovers over it.


Offer

Set Up Offer

This section represents the discounts offered by the merchant. You can create up to 3 offers.

Follow the simple steps to set up the offer:

  1. From the Shopify theme editor, select the Offer option.
  2. Select the arrow beside the Offer section.
  3. Click Add block.
  4. Customize the different offers using the settings below.
  5. Click on Save.

Offer Settings

Below are the settings to configure Offer:

The video slider settings are as follows:

Subheading

Add a subheading text for your Offer section. For eg: Christmas Deals

Heading

Add a heading text for your Offer section. For ex: Brand New Collection

Background Color

Set the background color of the offer section

Style

From the drop-down menu, select the style you want to set your offer section.

Offer Box Position

Set the alignment of the Offer box to left, right, or center.

Add Frame

Check the checkbox to enable frame of the content box in your offer section

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile


Block Settings

The below-given block settings are common for all the offers. The block settings are as follows:

Heading

Add a heading text for your offer box

Subheading

Add a subheading for your offer box

Background Image

Set a background image for your offer box

Link

Link your offer box to the page you want to redirect your users to.


Collection List (Style 1)

You can use this section to display your collections in the specified layouts. For this section, you can add up to 4 Collections.(1 Main Section and 3 Side Collections). You can configure your collection list using the settings given below.


Set Up The Collection List

  1. From the custom theme editor, select Collection List(Style 1).
  2. Select the arrow beside the section.
  3. Click Add block.
  4. Configure the collections list using the setting given below.
  5. Click on Save.

Collection List (Style 1) Settings

The collection list (Style 1) Settings are as follows:

Heading

Give a suitable heading to your collection list

View All Button Text

Add text to the button. For example: View All/ More

View All Button Link

Link the button to the collection page you want to redirect your users.

Main Collection

Import the collections to display products under this section. You can change or remove the collection at any time by clicking on the Change button.

Button Text

Add text to the button

Custom Collection Info

Check the checkbox to enable showing the description of your collection.

Heading

Add a heading text to your collection.

Description

Add a few words describing your collection.

Button Link

Link the button to the collection page you want to redirect your users.

Image

Add an image of a product that best describes your collection.

Show Icon in Button

Check the checkbox to enable the icon in your button

Button Text Color

Set the color of the button text.

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on a mobile

Section Bottom Mobile

Manage the space of the section from the bottom on a mobile


Block Settings Under Collection List (Style 1)

The collection list (Style 1) block Settings are as follows:

Collection

Select the collection

Button Text

Add text to the button

Custom Collection Info

Check the checkbox to enable showing the description of your collection.

Heading

Add a heading text to your collection.

Description

Add a few words describing your collection.

Button Link

Link the button to the collection page you want to redirect your users.

Image

Add an image of a product that best describes your collection.


Collection List (Style 2)

You can use this section to display your collections in the specified layouts. For this section, you can add up to 5 collections. You can configure your collection list using the settings given below.


Set Up The Collection List

  1. From the custom theme editor, select Collection List(Style 2).
  2. Select the arrow beside the section.
  3. Click Add block.
  4. Configure the collections list using the setting given below.
  5. Click on Save.

Collection List (Style 2) Settings

The collection list (Style 2) Settings are as follows:

Heading

Give a suitable heading to your collection list

View All Button Text

Add text to the button. For example: View All/ More

View All Button Link

Link the button to the collection page you want to redirect your users.

Show Info on Hover

Check the checkbox to enable showing the description of your collection on hover.

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on a mobile

Section Bottom Mobile

Manage the space of the section from the bottom on a mobile

Block Settings Under Collection List (Style 2)

The collection list (Style 2) block Settings are as follows:

Add Collection

Select the collection

Custom Image

Set the background image of your collection

Heading

Add a heading to your collection block

Button Text

Add a Button to your collection block


Featured Collection

This section showcases products from one of your collections. You can customize the look and feel of the featured collection section by setting the number of products you want to display at once







Banner

You can add a banner on your web store to display important information to your customers. Banners can be placed at the top of the page or any section where they seem applicable.


Set Up The Banner

To set up the banner:

  1. From your custom theme editor, select Banner.
  2. Click on Banner to configure its settings, as given in the table below.
  3. Configure the Banner using the settings given below.
  4. Click on Save.

Banner Settings

The banner settings are as follows:

Image

Add an image you want to show on the banner.

Mobile Image

Add an image that you may want to show in the mobile view.

Tag Line

Add a short tag line to be displayed on the banner

Heading

Add a heading text to your banner

Subheading

Add a subheading to your banner

Description

Add description describing the banner

Button Text

Add a text on the button

Button Link

Link the button to the web page you want to redirect your users to

Tag Line Background Color

Set the background color of the tagline

Tag Line Text Color

Set the color of the tagline text

Heading Text Color

Set the color of the heading text

SubHeading Text Color

Set the color of the subheading text

Description Color

Set the color of the description box

Button Background Color

Set the background color of the button

Button Text Color

Set the color of the button text

Button Hover Background Color

Set the color of the button background when a user hovers over it.

Button Hover Text Color

Set the color of the button text when a user hovers over it

Content Position

Set the text alignment to left, right, or center.

Testimonials

This section is used to add reviews and feedback from happy customers in the form of a slider. You can add up to 16 quotes under this section.


Set Up The Testimonials

To set up the testimonials section:

  1. From your custom theme editor, select Add Section.
  2. Choose “Testimonials”from the dropdown.
  3. Configure the section following the settings given below.
  4. Click on Save.

Testimonials Settings

The testimonials settings are as follows:

Testimonials Style

Choose the style in which you want to show your testimonial section

Subheading

Add a subheading to the testimonial section

Heading

Add a heading text for the section

Description

Describe in a few words what this section is about.

Background Color

Set the background color of the testimonial section

Enable Auto Rotate

Enable/disable the auto-rotate effect

Enable Arrows

Check the checkbox to enable slider navigation arrows

Enable Dots

Check the checkbox to enable vertical dots to navigate through the slider.

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile


Quote Settings

The common settings for quotes are as follows:

Message

Add the client feedback/message you want to display

Author

Add the name of the author/client

Author Image

Add the image of the author/client. You can change or remove it using the Change button.






Instagram Feed

This section shows the Instagram posts from the public Instagram account.


Set Up The Instagram Feed

To set up the Instagram feed section:

  1. From your custom theme editor, select Add Section.
  2. Choose Instagram Feed from the dropdown.
  3. Configure the section following the settings given below.
  4. Click on Save.

Instagram Feed Settings

Heading

Add a heading to your Instagram section

Subheading

Add subheading text below the heading.

Instagram User Id

Add the Instagram id of the user whose feeds you want to show

Access Token

Add access tokens of the respective IG user account

Background Color

Set the background color of the Instagram Feed section

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile


Multicolumn Content

This section is used for showcasing informational banners. You can add a maximum of 4 blocks under this section.


Set Up The Multicolumn Content

To set up the Multicolumn Content section:

  1. From your custom theme editor, select Add Section.
  2. Choose Multicolumn Content from the dropdown.
  3. Configure the section following the settings given below.
  4. Click on Save.

Multicolumn Settings

Below are the settings to configure Multicolumn content:

Background Color

Set the background color of the multicolumn section

Text Color

Set the text color of this section

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile


Block Settings

The common settings for the multicolumn content blocks are:

Icon

Select a relevant Icon to your block.

Heading

Add a heading to your block

SubText

Add a brief under your heading


Image With Text

Users can use this section to add an image with text to showcase stories or to show any kind of text content.


Set Up Image With Text Section

To set up the Image With Text section:

  1. From your custom theme editor, select Add Section.
  2. Choose Multicolumn Content from the dropdown.
  3. Configure the section following the settings given below.
  4. Click on Save.

Image With Text Settings

Image

Add an image you want to showcase in this section

Image Alignment

Set the image alignment to left, right, or center

Heading

Add a heading to the section

Description

Add description under the heading describing the section

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile


Rich Text

This section is used to add one full-width block of text to your home page. There are two types of blocks - Text and Page to add under this section.


Set Up Rich Text Section

To set up the Rich Text section:

  1. From your custom theme editor, select Add Section.
  2. Choose Rich Text from the dropdown.
  3. Click on “Add Block”.
  4. Configure the section following the settings given below.
  5. Click on Save.

Image With Text Settings

Background Color

Set the background color of the section

Style

Set the alignment of the section to left, right, or center

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile


Text Block Settings

Heading

Set the heading of the text section

Content

Add content that you want to display in this section.


Page Block Settings

Heading

Add a heading to the block

Page

Link the page you want to redirect your users to


Newsletter

This section allows you to promote your email newsletter on your home page.


Set Up Newsletter Section

To set up the Newsletter section:

  1. From your custom theme editor, select Add Section.
  2. Choose Newsletter from the dropdown.
  3. Configure the section following the settings given below.
  4. Click on Save.

Newsletter Settings

Heading

Give a heading to your newsletter section

Description

Add a brief about the section

Placeholder

Add text for the placeholder

Button Text

Add text to the button

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile


Contact Form

This section is used to display the contact form on the home page.


Set Up The Contact Form

To set up the Contact Form section:

  1. From your custom theme editor, select Add Section.
  2. Choose Contact Form from the dropdown.
  3. Configure the section following the settings given below.
  4. Click on Save.

Contact Form Settings

Form Heading

Give a heading to your contact us form

Form Button Text

Add text on the button

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile


FAQs

This section lists the most frequently asked questions along with their answers. You can add a maximum of 16 blocks (Questions).


Set Up The FAQs Section

To set up the FAQs section:

  1. From your custom theme editor, select Add Section.
  2. Choose FAQs from the dropdown.
  3. Configure the section following the settings given below.
  4. Click on Save.

FAQs Settings

Form Heading

Give a heading to your FAQ section

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile

Block Settings

FAQ Question

Add the question you want to display under this section

FAQ Answer

Add the answer under the FAQ question section




Theme Settings

This section is used to customize the Yuva theme for your Shopify store.


Configure The Theme Settings

From the Custom theme editor, click on Theme settings to access theme-wide settings.The settings include:

  1. Color:From here, you can select the colors you want to use throughout the theme. Through this main setting, you perform the following settings:
    • Base Color
    • Body Background
    • Body Text
    • Cart Dot Color
    • Heading
    • Product Title
    • Image Background
    • Save Price
    • Buttons
    • Button Text
  2. Typography: From here, you can make font-related customizations using different options.

  3. Choose Font

    Choose the standard font for your theme from the given options.

    Heading Font

    Set the font of heading text

    Letter Spacing

    Set the spacing between letters in the heading

    Body Font

    Set the font of the body content

    Letter Spacing

    Set the spacing between letters in the body

    Base Size

    Adjust the base size

    Line Height

    Set the line height

  4. Social: Use this setting to link your Shopify store with your social media handles. The different settings include:

  5. Facebook

    Add the link to your Facebook handle.

    Twitter

    Add the link to your Twitter handle.

    LinkedIn

    Add the link to your LinkedIn handle.

    Instagram

    Add the link of your Instagram handle.

  6. Cart Drawer: Customize the look and feel of your cart drawer using the following settings:

  7. Enable Cart Drawer

    Check the checkbox to enable the cart drawer on your store

    Enable Shipping Bar

    Check the checkbox to enable the shipping bar in your store

    Minimum Shopping Price

    Set the minimum shipping price

    Message

    Add a display message for your cart

    Success Message

    Add a message to show the completion of action successfully.

  8. Breadcrumbs: Use this setting to Enable/Disable Breadcrumbs in your store. The different settings include:

  9. Enable Breadcrumbs

    Check the checkbox to enable the breadcrumbs on your store

  10. Product: Using these settings, you can customize your product options on your Shopify store. The different settings include:

  11. Enable Pre Order

    Check the checkbox if you want to allow users to pre-book any product. For this option, you must ensure that the product availability is set to OUT OF STOCK.

    Option Style

    Choose from the dropdown the style in which you want to show your product listings.

    Color Swatch Style

    Choose from the dropdown style in which you want to show your color swatch style

    Show Variant Image as Color

    Tick if you want to display product variants as colors and not images.

    Show Saved Amount

    Select if you want to display the saved amount

    Saved Amount Style

    Choose from the dropdown how you want to display the saved amount - in percentage or in currency form.

  12. Product Grid: Using these settings, you can customize your product grid on your Shopify store. The different settings include:

  13. Enable Quick View

    Check the checkbox to enable the Quick View options on product grid.

    Enable Similar Products

    Check the checkbox to enable the Similar Products options on product grid.

    Show Similar Button Text

    Check the checkbox to Show the Similar Products Text options on product grid.

    Enable Add to Cart

    Check the checkbox to enable Add to Cart button on product grid.

    Show Product Price

    Check the checkbox to show the product price on product grid.

    Show Second Image on Hover

    Check the checkbox to enable Second image of product(Visible on Hover) on product grid.

  14. Newsletter Popup: Manage the look and feel of your newsletter popups using the following settings:

  15. Enable Newsletter Popup

    Check the checkbox if you want to display a newsletter pop-up on your Store

    Image

    Add an image for your newsletter section

    Heading

    Add a heading for the newsletter pop up section

    Description

    Add a brief about the newsletter section

    Heading Color

    Set the heading color of the newsletter popup

    Description Color

    Set the description color of the newsletter popup

    Popup Background

    Set the background color of the newsletter popup

    Set cookie for newsletter popup(days)

    Select the number of days after that newsletter will be visible automatically if customer closes the newsletter.

  16. Favicon: These are tiny icons that appear beside your site's URL or title in browser tabs, address bars, and bookmark menus. You can upload a Favicon image by clicking on the Change button under Favicon settings.
  17. Checkout With these settings, you can change the look and feel of your checkout pages.

  18. Background Image (Banner)

    Upload a background image for the checkout banner section.

    Logo

    Add your brand logo to the banner section

    Position

    Set the position of the logo to center, left or right

    Logo Size

    Set the logo size to small, medium or large

    Background Image (Main Body)

    Upload a background image for the main body section.

    Background Color

    Set the background color of your main body section

    Form Fields

    Choose from the drop-down how you want to show your form field.

    Background Image (Order Summary)

    Upload a background image for the order summary section.

    Background Color

    Set the background color of your order summary section.

    Headings

    Choose a desired font for the headings

    Body

    Choose a desired font for the body content

    Colors - Accents, Buttons, Errors

    Set the color for accents, buttons, errors across the theme


Promotion Banner

This section is used to highlight your promotional deals on the page allowing customers to experience the exclusivity. You can use the following settings to customize the look and feel of your promotional banner:

Full Width

Check the checkbox to display promotional banner in full-width

Heading

Add a heading text for your promotional banner

Promotional Text

Add a few words about the promotional deal

Button Link

Link button to the page where you want to redirect your users

Button Label

Add a label to your button

Background Color

Set the background color of promotional banner

Opacity

Adjust the opacity (transparency) of promotional banner

Text Color

Set the text color in the promotional banner

Button Text Color

Set the color of the button text

Button Background Color

Set the background color of button

Button Border Color

Set the border color of the button

Border Radius

Adjust the radius of banner border

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile

Video Banner

Use this section to add an autoplay featured video relevant to your brand to attract customers. You can add text overlay (optional) or a call to action button to redirect your customers to another page.

Configure the Video Banner Section

You can configure the video banner section using the following settings:

Video Link

Add the link of the video you want to show in the video banner

Placeholder Image

Add a placeholder image by clicking the Select Image button

Heading

Add a heading to be displayed on the video banner

Show Full Width Video

Check the checkbox to set the video banner to full width.

Autoplay Video

Check the checkbox to enable autoplay of the video

Add Overlay

Enable overlay option for your video banner

Overlay Color

Set the overlay color according to the video banner

Overlay Opacity

Adjust the overlay opacity in your video

Button Text

Add a text on the button.

Custom Liquid/HTML Section

This section allows you to add additional code to your Home page. To add a Custom Liquid/HTML section to your site, click on the Custom Theme Editor > Sections > Add Section > Custom Liquid/HTML. Click save.

Custom Liquid/HTML Settings

Liquid/HTML Code

Add the custom HTML code you want to add to your home page

Style

Set the alignment of the section to left, center or right

Section Top Space Desktop

Manage the space of the section from the top on a desktop

Section Bottom Space Desktop

Manage the space of the section from the bottom on a desktop

Section Top Space Mobile

Manage the space of the section from the top on mobile

Section Bottom Space Mobile

Manage the space of the section from the bottom on mobile

Page - Collection List

This page will automatically list all the products that currently exist in your store. By default, all the collections will be listed alphabetically.

Settings for Collections page include:

Heading

Add a heading to your collection page

Collections Per Page

Set the number of collections per page.

Show Collections

Select if you want to list all or selected collections on the page

Sort Collections By

Select how you want to sort your collections list.

For each of the collections you add to this page, use the following settings:

Select Collection

Import the collection you want to showcase in the existing collection list

Select Image

Select an image for the current collection list

Page - Main Collection (Catalog)

This page will list all the products from your collection list.You can choose to sort or filter product listings on this page using different options. Main Collection page settings include:

Show Collection Image

Choose to show/hide the collection image on the page

Show Collection Description

Enable or disable collection description on the catalog page

Pagination Type

Select the type of pagination for you collection.

Paged Navigation: In this all pages will listed at the end of section.

Infinite Scrolling: Infinte scroll will provide the the all products at on page

Products Per Page

Set the number of products per page

Enable Filtering

Enable/disable product filtering options.

Enable Sorting

Enable/disable product sorting options.

Page - Default Product

The default product page allows you to shape and control the behaviour and appearance of the products. Default Product page settings include:

Product Images Style

From the drop-down, choose how you want to show your product images on the page.

You can choose to add a number of blocks to customize this page including:

  • Title:Add a title to the product you want to display.
  • Text:Add a description about the product.
  • Review Rating:Show customer reviews and ratings for the particular product.
  • Price:Show prices for the product.
  • Variant Picker:Show product variants on the page.
  • Quantity Picker:Show stock availability of the product
  • Buy Button:Add buy button on the page. This block can be customized using additional options including:
    • Show dynamic checkout button
    • Show contact form
    • Add Text for the enquiry form.
  • Product Images:Add complete details about the product
  • Social Icons:Choose to add social icons for sharing the product on them.
  • Product Content:Add complete details about the product
    • Position - Set the position of the product content on the page.
    • Choose to show product content in tabs or accordions from the dropdown.
    • Show Product Description - Enable/disable product description on the page.
    • Heading - Add a heading text for the product content
    • Content - Add the product description. You can use styling options like Bold & Italic styles to present your content.
    • Show Product Reviews: Enable to show product reviews in this section.

  • Product Highlights:Add highlights about the product. These highlights will visible on last image of product gallery on mobile only. You can add maximum 4 highlights.
    • Highlight Heading - Add the heading for the highlight content.
    • Name - Add the highlights name.
    • Value - Add the highlights value.

Page : Default Blog

This page lists the blogs published on your website. The blog page will show your blogs in chronological order - based on the published date.

Settings for this page include:

Show Article Published Date

Select to show the date when the article was published.

Show Article Author

Select to show the author of the article

Show Article Tags

Select to show tags applied to the article to be used to show a filtered view of other blogs with the same tag.

Show Article Excerpt

Show a few lines (excerpt) from the article.

Show Article Comment Count

Show the number of comments received on articles.

This is the page where the published blog can be seen and read. You can customize the look and feel of your blog posts using the following settings:

Show Article Image

Check to show article image on the page

Show Article Published Date

Check to show the date of blog publishing

Show Article Author

Check to show the details about the article author

Show Social share buttons

Check to include social media buttons

Show Article Tags

Select to show tags applied to the article to be used to show a filtered view of other blogs with the same tag.

Show Related Articles

Show a filtered list of similar articles

Page - Cart

This page shows all the products that the customers choose to buy. You can change the following settings:

Show Cart Note

Select if you want to show cart notes on the page

Show Payment Icons

Select if you want to show payment icons

Enable Shipping Estimations

Select if you want to show Shipping Estimations