Home

Introduction

The Home page of the website is the area where snippets about the various product offerings are highlighted for the convenience of the customers.

In this section of the manual we will see how to add/edit/update the various sections of the Homepage.

Create Home

Follow the below steps to create/update the home section:

1. Go to ShadesofIndia
2. Login with the credentials
3. Click on Website Customization on the left side panel.

4. Select -> Home -> This will take you to the customization page.

   

The home section has multiple sub-sections which need to be updated. We will discuss each one by one below:

Herosection

This is the first section of the homepage.

The following fields need to be filled to add/update this section:

Background Image Desktop

This is the background image for desktop website. Choose an image from the list.

Background Image Mobile

This is the background image for mobile website. Choose an image from the list.

Background Color Mobile

This is the backgound color assigned only for the mobile version. The color is designated by "#' and a number (eg. #ebf9ff). The color code to be entered will be provided to you.

Pre-Header

This is the topic of this section. Enter the required text.

Pre-Header text color

This is the color assigned to the Pre-Header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c). The color code to be entered will be provided to you. By Default the color is set to Black.

Herosection Quote Text

Here the Quote to be shown on the website should be written.

Herosection Quote text color

This is the color assigned to the Quote text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c). The color code to be entered will be provided to you. By Default the color is set to Black.

Herosection CTA Title

This field needs to be filled in case a button needs to be inserted in the Herosection.

CTA URL

Here, insert the URL, which will point to the respective location of the Button.

Something for Everyone

This section provides category-wise options (in cards/blocks form) to shoppers visiting the website. Clicking on each card/block takes the customer to the respective shopping category page.

The following fields need to be filled in this section:

Section Title

Enter the name to be given to this section.

Section Title Color

This is the color assigned to the Title text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c). The color code to be entered will be provided to you. By Default the color is set to Black.

Section Body

This is where the cards/blocks to be shown on the website homepage are defined. To do so, the following fields need to populated:

Select Category

• Select the category from the list.

  

Selected Category text color

• This is the color assigned to the category text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c). The color code to be entered will be provided to you. By Default the color is set to White.

Card Image

• This is the image that will show on the card. Select image from the list.

Button Text

• This is the text that will show on a button if inserted on the card.

Button text color

• This is the color assigned to the category text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c). The color code to be entered will be provided to you. By Default the color is set to White.

Position

• This defines the placement of the category card. Position is always entered as number value.

The Something for Everyone section on the website home page appears as below:

Quote

The Quote section is where a quote/text by the founder, designer is included on the website.

To fill up this section, the following fields need to be populated:

Quote text

• Enter the quote text here.

Quote By

• Enter the author name in this field.

Background color

• This is the color assigned to the quote background. The color is designated by "#' and a number (eg. #6b4b1c).

Text Color

• This is the color assigned to the quote text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Below is the final look of a Quote on the website:

Women's Clothing

The Women's clothing section on the homepage, provides a sneak peek into the various collections available for women. Cards/Blocks are placed in this section, which when clicked, take the customer to the relevant collection product page.

The following fields need to be filled to update this section:

Section Background Color

• This is the color assigned to the section background as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Pre-Header

• Enter the required text here.

Pre-Header Text Color

• This is the color assigned to the pre-header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Header

• This is the name that needs to be assigned to the collection.

Header Text Color

• This is the color assigned to the header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Body Text

• This text gives a brief description about the section.

Body Text Color

• This is the color assigned to the body text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

CTA Title

• This is the text that appears on a button if inserted.

CTA URL

• Here, insert the URL, which will point to the respective location of the Button. If the location is not required, then enter "#" here.

Collections

• This is where the cards/blocks for different collections to be shown on the website homepage are defined. To do so, the following fields need to populated:

  

Select Category

• Choose from the list the collection name which is to be placed in the section.

  

Collection Image

• This is the image that will show on the card. Select image from the list.

Collection Name Text Color

• This is the color assigned to the collection name text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c). By default the color is "white".

Position

• This defines the placement of the collection card. Position is always entered as number value.

Below is how the Women's Collection section on the website appears:

Home & Living

This section on the homepage, provides a peek into the various collections available for a beautiful home. Cards/Blocks are placed in this section, where different products are tagged using lookbook ids created in WC LookBooks.

To complete this section, the following fields need to be filled:

Section Background Color

• This is the color assigned to the section background as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Pre-Header

• Enter the required text here.

Pre-header Text Color

• This is the color assigned to the pre-header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Header

• This is the name that needs to be assigned to the collection.

Header Text Color

• This is the color assigned to the header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Body Text

• This text gives a brief description about the section.

Body Text Color

• This is the color assigned to the body text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

CTA Title

• This is the text that appears on a button if inserted.

CTA URL

• Here, insert the URL, which will point to the respective location of the Button. If the location is not required, then enter "#" here.

Section Images

• This is where the cards/blocks for different collections to be shown on the website homepage are defined. To do so, the following fields need to populated:

  

Lookbook Id

• This id is created in the WC lookbooks and the id# generated should be pasted here.

Position

• This defines the placement of the collection card. Position is always entered as number value.

The Home & Living website look is below:

Travelogue

The Travelogue section takes the customer on a travel adventure. It is weaved in the form of a slide show, giving knowledge about different designs from across the world.

To complete this section, fill up the following fields:

Section Background Color

• This is the color assigned to the section background as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Pre-Header

• Enter the required text here.

Pre-header Text Color

• This is the color assigned to the pre-header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Header

• This is the name that needs to be assigned to the collection.

Header Text Color

• This is the color assigned to the header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Body Text

• This text gives a brief description about the section.

Body Text Color

• This is the color assigned to the body text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

CTA Title

• This is the text that appears on a button if inserted.

CTA URL

• Here, insert the URL, which will point to the respective location of the Button. If the location is not required, then enter "#" here.

Travelogue Slides

• This is where slides for different collections to be shown on the website homepage are defined. To do so, the following fields need to populated:

  

Image 1

• This is the main image which shows the primary design article.

Image 1 Title

• Here, enter brief information about the article, eg. type, country of origin, etc.

Image 1 Title Color

• This is the color assigned to the collection name text as it will show on the image. The color is designated by "#' and a number (eg. #6b4b1c). By default the color is "white".

Text Box Color

• This is the color assigned to the text box where a blog is written. The color is designated by "#' and a number (eg. #6b4b1c).

Blog Text

• Here a brief description about the article is added.

Blog Text Color

• This is the color assigned to the blog text. The color is designated by "#' and a number (eg. #6b4b1c). By default the color is "white".

Position

• This defines the placement of the collection slide. Position is always entered as number value.

Image 2

• This is another image associated to the main image 1.

The Travelogue slides on the website appear as below:

Handpicked

The Handpicked section provides shows few selected products in the form of cards on the homepage for the customer's convenience. A click on any card, will take the visitor to the product description page.

For this section, the below fields need to be filled:

Section Background Color

• This is the color assigned to the section background as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Pre-Header

• Enter the required text here.

Pre-header Text Color

• This is the color assigned to the pre-header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Header

• This is the name that needs to be assigned to the collection.

Header Text Color

• This is the color assigned to the header text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Handpicked Body Text

• This text gives a brief description about the section.

Handpicked Body Text Color

• This is the color assigned to the body text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c).

Handpicked CTA Button

• This is the text that appears on a button if inserted.

Handpicked CTA URL

• Here, insert the URL, which will point to the respective location of the Button. If the location is not required, then enter "#" here.

Handpicked Products

• This is where the handpicked products cards are defined. The following fields need to be filled:

  

Product ID

• Enter the respective product id here. "Do not enter the Product SKU's here"

Position

• This decides the placement of the product card in the section. Position is always entered as number value.

The final look on the website is as below:

Services

This section gives an insight into the services offered by Shades of India. The information is in the form of cards on the homepage.

The following fields need to be updated for this section:

Services Wrapper

• This is the card which gives the name and a brief about the service being offered. Under this section the following fields need to be filled:

  

Service Image

• This is image which represents the service offered. Select image from list.

Service Body Text

• This is a brief description about the service.

Service Body Text color

• This is the color assigned to the body text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c). By default it is "black".

Service Name

• This is the name of the Service.

Service Name Text color

• This is the color assigned to the service name text as it will show on the website. The color is designated by "#' and a number (eg. #6b4b1c). By default it is "black".

CTA Title

• Enter the title for the button.

CTA URL

• Here, insert the URL, which will point to the respective location of the Button. If the location is not required, then enter "#" here.

Position

• This decides the placement of the product card in the section. Position is always entered as number value.

All the above defined fields appear as below on the website:

Publish/Update

• Click on Publish button on the right side panel to save a new entry.

  

• Click on Update button on the right side panel to save any edit done on existing entries.

  

---

Last update: December 25, 2020