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, click on the Announcement Bar section.
2. Add content for the announcement in the right section of the theme preview.

Announcement Bar Settings

The announcement bar has the following settings:

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 Logo 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:Style 1,Style 2 & Style 3.
3. Click on Save.

Header Settings

The header has the following configuration settings:

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

Menu Block Settings

Please note, the mega menus do not work with the hamburger menu style. The menu block has the following settings:

Style 1 Block Settings

Style 2 Block Settings

Style 2 has the following settings:

Style 3 Block Settings

The Style 3 block has the following settings:

Image Block Settings

The image block has the following settings:

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

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:

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 5 slides. Each slide has its own settings. You can choose from two types of sliders:

1. Style 1 - This allows you to show thumbnails on a Split slide.
2. Style 2- This allows you to add a normal slider with its text content.

• 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 Section.
3. Click Add Slide.
4. Change settings as per your requirements.
5. Click on Save.

Slider Settings

The slider settings are as follows:

Slide Block Settings

The slide block settings are as follows:

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

Image Slider Settings

The image slider settings are as follows:

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

Split Slider Settings

The split slider settings are as follows:

Video Slider Settings

The video slider settings are as follows:

Rotating Text

This section can be used to show any important announcements or any text in the rotating form.

Set Up Rotating Text

Follow the simple steps to set up the offer:

• From the Shopify theme editor, select the Rotating Text option.
• Customize the text using the settings below.
• Click on Save.

Set Up Rotating Text Settings

Below are the settings to configure Set Up Rotating Text:

Offer

Set Up Offer

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

Set Up The Offer

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:

Block Settings

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

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:

Block Settings Under Collection List (Style 1)

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

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:

Block Settings Under Collection List (Style 2)

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

Featured Collections List

The Yuva theme offers a Featured Collections list - where You can use these sections to display your collections in the slider type layouts. Here, you can add up to 5 collections. You can configure your collections list using the settings given below.

Set Up Featured Collection List

To set up the featured collection, follow the simple steps:

1. From the custom theme editor, select the Featured Collections list.
2. Select the arrow beside it.
3. Click Add Block.
4. Configure the blocks using the settings given below.
5. Click on Save.

Featured Collection List Settings

This section is to show featured collections with a slider design.

The Settings are as follows:

Featured Product

This section is used to showcase your best product as a mini page on your home page. You can add a maximum of 16 blocks. Please note here that all other blocks except Text can be added only once.

Set Up Featured Product

To set up the featured product, follow the simple steps:

1. From your custom theme editor, click on Add Section.
2. Select “Featured Product”from the drop-down.
3. Configure the settings of this section (see the table below).
4. Click on Save.

Featured Product Settings

Below are the common featured product settings:

You can choose to add a number of blocks to customize this section 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 View Detail Button
• Social Icons:Choose to add social icons for sharing the product on them.

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:

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:

Quote Settings

The common settings for quotes are as follows:

Featured Articles

This section is used to showcase a list of recent blogs on the home page. A maximum of 3 blocks can be added with common settings of adding an article.

Set Up The Featured Articles Section

To set up the Featured Article section:

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

Featured Articles Settings

The Featured Articles section settings are as follows:

Block Settings

In all the three blocks you add, there’s one common setting:

Add Article:Click to choose the article you want to display.

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

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:

Block Settings

The common settings for the multicolumn content blocks are:

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

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

Text Block Settings

Page Block Settings

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

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

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

Block Settings

Footer

This is the bottom-most section of your web store. You can use it to share a brief about your store and add navigation menus to help users quickly navigate through your web store.

Footer Settings

The footer has the following settings:

You can choose to add two type of blocks to customize the footer.

• Menu:Add menu in footer section. This block can be customized using additional options including:
  • Heading : Add the heading for the block.
  • Menu : Select the menu for the block.
• Newsletter:Add Newsletter in footer section. This block can be customized using additional options including:
  • Show Newsletter : Check the checkbox to enable newsletter.
  • Heading : Add the heading for the newsletter.
  • Subtext : Add the subtext for the newsletter.
  • Placeholder : Add the placeholder for the input field of newsletter.
  • Show social media icons : Check the checkbox to show social media icons.

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.



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

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



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.

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



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.

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



Enable Breadcrumbs

Check the checkbox to enable the breadcrumbs on your store

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



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.

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



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.

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



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.

9. 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.
10. Checkout With these settings, you can change the look and feel of your checkout pages.



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:

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:

Featured Columns

You can use this section to introduce pages, additional products or collections in a well organized format of columns.

Set Up The Featured Columns Section

To set up the featured columns section:

1. From your custom theme editor, select Add Section.
2. Choose Featured Columns from the dropdown.
3. Click on “Add Block”
4. Click on Save.

Configure the Featured Columns Section

You can configure the Featured Columns section using the following settings:

Column Settings

You can add up to 3 blocks (columns) under this section and customize them using the following settings:

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

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:

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

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:

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:

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:

Page - Default Blog Post

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:

Page - Cart

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