Gross Theme Documentation

Thank you! We are glad that you have choosen us.

For Queries / Customisation requests, feel free to contact us.

Gross is our enhanced and beautifully designed responsive Shopify theme for your online Fashion Store. Gross is rich with powerful userfriendly features that would attract more clients to your online store and boost sales!

Here are some basics on installing, configuring and customizing the theme that will get you started! This document is written very carefully by keeping mind Beginners, advanced users and developers.

If you are new to shopify. Please read SHOPIFY GUIDE first and then get along with the theme document.

Theme Installation

  1. Extract the zip file downloded from ThemeForest. Extracting the zip will create following folders :
    • Documentation : Contains information about theme installation and setup.
    • Packages : This folder contains the zip files of each layout. You can choose & upload any layout of your choice to Shopify.
    • Images : This folder contains the images used in the theme.
  2. Open your Shopify back office, then Online Store -> Themes on the left side bar.
  3. Press Upload theme and select a zip file from the Packages folder.
  4. Navigate to the Theme Library section and click on Upload Theme

Install Apps

The theme comes with free apps which can be installed as per your use.

Product Reviews app

  1. To enable product review, Install Product Reviews App
  2. Press "Add App" button and proceed with general app installation procedure.
  3. Once you are done with basic app setup, the app is ready to use.

Basic Store Configuration

Currency Settings

  1. From your shop admin, go to the Settings / General
  2. Scroll down to "Currency" block. Find the "Currency" there
  3. Select your currency and change formatting acording to your requirment.
    4. Note :
    Click on "save" to update the changes.

Checkout Settings

  1. From your shop admin, go to the Settings / Checkout
  2. You can allow/deny the customer account creation. You can also keep it optional.Generally, setting must be set to "Accounts are optional"
    3. Note :
    Click on "save" to update the changes.

theme settings

It allows you to configure general theme settings like Header,Footer, Breadcrumb, Colors, Fonts and various other options

Header Settings

  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Scroll down to "Header Layout". Select a header from the dropdown that shows available headers.

Following are the designs of available headers in the theme :


Layout1

Social Links, Checkout, Wishlist, Account in the top navigation bar, Search, Shopping Cart and Mega Menu.

Layout2

Amusment Bar, Checkout, Wishlist, Contact in the top navigation bar, Mega Menu, Search, Account and Shopping Cart.

Layout3

Amusment Bar, Checkout, Wishlist, Account in the top navigation bar, Contact Block, Shopping Cart, Mega Menu and Search.

Layout4

Amusment Bar, Checkout, Wishlist, Account in the top navigation bar, Search, Contact Block and Shopping Cart and Mega Menu.

Note :
You can configure other header content when you configure the sections of the theme.
  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Scroll down to "Footer Layout". Select a footer from the dropdown that shows available footers.

Following are the designs of available footers in the theme :

Layout1

Store Address, Contact, Email, Footer Links, Newsletter and Payment Icons

Layout2

Store Address, Contact, Email, Footer Links, Store logo & Description, Social Links, App Logo and Payment Icons

Layout3

Store Address, Contact, Email, Store logo, Footer Links, Payment Icons, Newsletter and Social Links.

Note :
You can configure other footer content when you configure the sections of the theme.

Pre Loader Settings

  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Scroll down to "Pre Loader". Select a footer from the dropdown that shows available Loaders.

Following are the designs of available loaderss in the theme :

Loader1

Round Rotate Zoom

Loader2

Round Rotate Scale

Loader3

Rotating Square

Loader4

Fliping Disk

Loader5

Fliping Triangle

Loader6

Fliping Square

Loader7

Native Loader

Loader8

Zoomout Disk

Loader9

Windows Loader

Loader10

Rotating Circle

Note :
You can configure other footer content when you configure the sections of the theme.
  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Configure the parameters as per your requirements.
  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Scroll down to "Breadcrumb Settings" and configure all the parameters as per your requirements.
# Parameter Value Description
1 Breadcrumb Image image Sets a background image for breadcrumb.
2 Background Color color Sets background color for breadcrumb. Works only if image is not configured or image is png.
3 Text Color color Choose a color for the text of the breadcrumb

Color Settings

  1. Go to Customizer > Theme Settings > Colors
  2. Configure Header, Footer, Basic Theme Color, Button Colors and Product Icon Colors as per requirement.

Typography Settings

  1. Go to Customizer > Theme Settings > Typography
  2. Configure Fonts as per your requirements.
# Parameter Value Description
PRIMARY FONT
1 Font Font Configure the main font of the theme. This font is used in most of the parts of the theme.
2 Light True / False Choose if you want to load light version of the font.
3 Normal True / False Choose if you want to load Normal version of the font.
4 Medium True / False Choose if you want to load Medium version of the font.
5 Semi Bold True / False Choose if you want to load Semi Bold version of the font.
6 Bold True / False Choose if you want to load Bold version of the font.
SECONDARY FONT
1 Use Secondary Font True / False Choosing yes will load the secondary fonts into the theme. Using secondary fonts for the theme might affect theme's load time upto some extent. If you don't use secondary fonts, the theme loads primary fonts by default in place of secondary fonts.
2 Font Font Configure the secondary font of the theme. This font is used in some parts of the theme.
2 Light True / False Choose if you want to load light version of the font.
3 Normal True / False Choose if you want to load Normal version of the font.
4 Medium True / False Choose if you want to load Medium version of the font.
5 Semi Bold True / False Choose if you want to load Semi Bold version of the font.
6 Bold True / False Choose if you want to load Bold version of the font.

Social Media

  1. Go to Customizer > Theme Settings > Social Media
  2. Configure your desired social links. These social links are generally displayed in the store's footer.

Custom Javascript

  1. Go to Customizer > Theme Settings > Custom Javascript
  2. Configure custom javascript code here.

Custom CSS

  1. Go to Customizer > Theme Settings > Custom CSS
  2. Configure custom CSS code here.

Setup Pages

Online Store > Pages click button "Add a page"

Wishlist Page

  1. Configure Title of the page "WishList".
  2. Select Visibility: Visible
  3. Select Template: page.wishlist

Contact Us Page

  1. Configure Title of the page "Contact us".
  2. Select Visibility: Visible
  3. Select Template: page.contact

To configure contact us page, navigate to Customizer > Contact Us Page and configure required fields.

# Parameter Value Description
1 Show Banner With Address True / False Check if you want to show a section banner on the left and address on the right side on the contact page.
2 Contact Banner image Upload the contact page banner image here.
3 Heading Text Configure the title of the address area.
4 SubHeading Text Configure sub title of the address area.
5 Show Address True / False Check if you want to show address on the contact page.
6 Show Phone Number True / False Check if you want to show phone number on the contact page.
7 Show Email ID True / False Check if you want to show email ID on the contact page.
8 Show Social Follow True / False Check if you want to show social follow on the contact page.
9 Additional Info Text Write the additional information description to be displayed with the address of the store.
10 Google Map True / False Check if you want to show embedded google map on the contact page.
11 Google Map Code Iframe Put the iframe code that you can generate from google maps.
12 Contact Form True / False Check if you want to show up contact form on the contact us page.
13 Title Text Configure the title of the contact us form.
14 Sub Title Text Configure the subtitle of the contact us form.

FAQ Page

  1. Configure Title of the page "FAQ".
  2. Select Visibility: Visible
  3. Select Template: page.faq

To configure FAQ page, navigate to Customizer > FAQ Page and configure required fields.

# Parameter Value Description
1 FAQ Title Text Enter the title of the FAQ Section.
2 FAQ Count True / False Check if you want to display serial number on each question.
Content (You can add as many FAQs you want.)
3 FAQ Question Text Configure the Question for the FAQ.
4 FAQ Answer Text Configure the Answer for the FAQ.

About Us Page

  1. Configure Title of the page "About Us".
  2. Select Visibility: Visible
  3. Select Template: page.aboutus

To configure About Us page, navigate to Customizer > About Us Page and configure required fields.

# Parameter Value Description
1 Main Title Text Configure the title of about us page.
2 About Banner Block True / False Check if you want to show banner with description block on the contact page
3 About Banner Image Image Configure the banner image for the section
4 Hover Select Select a hover for the banner image.
5 Link URL Configure the URL to which customer should be redirected on clicking the banner image.
6 Heading Text Configure the heading of the description.
7 Decripition Text Configure the description.
8 Button Text Text Configure button text.
9 Link URL Configure the URL to which customer should be redirected on clicking the Button.
11 Service Section Title Text Configure the title of the services section.
12 Service Section Sub Title Text Configure sub title of the services section.
Content (Services)
13 Service Image Image Configure the image of the service.
14 Service Heading Text Configure the heading of the service.
15 Service Description Text Configure the description of the service.
16 Service Link URL Configure the URL to which customer should be redirected on clicking the service.

Theme Sections

Go to Customizer > Sections > Add Section.

Header

To configure Header, navigate to Customizer > Header and configure required fields.

Header Layout 1

  1. Steps to choose a header layout is shown here
  2. Configure required parameters of header layout.
# Parameter Value Description
1 Show Social Follow True / False Check if you want to show Social Follow in the header.
2 Theme Logo Image Configure the logo of the store here.
3 Max Logo Width Number Configure the max size of the logo in pixels.
4 Show Checkout True / False Check if you want to show Checkout in the header.
5 Show Wishlist True / False Check if you want to show Wishlist in the header.

Header Layout 2

  1. Steps to choose a header layout is shown here
  2. Configure required parameters of header layout
# Parameter Value Description
1 Announcement Area Text Write your annoucements like sale, introductory offers etc.
2 Theme Logo Image Configure the logo of the store here.
3 Max Logo Width Number Configure the max size of the logo in pixels.
4 Show Contact True / False Check if you want to show contact in the header.
5 Show Checkout True / False Check if you want to show Checkout in the header.
6 Show Wishlist True / False Check if you want to show Wishlist in the header.

Header Layout 3

  1. Steps to choose a header layout is shown here
  2. Configure required parameters of header layout
# Parameter Value Description
1 Announcement Area Text Write your annoucements like sale, introductory offers etc.
2 Theme Logo Image Configure the logo of the store here.
3 Max Logo Width Number Configure the max size of the logo in pixels.
4 Contact Title Text Configure the title for contact block in the header.
5 Show Contact True / False Check if you want to show contact in the header.
6 Show Checkout True / False Check if you want to show Checkout in the header.
7 Show Wishlist True / False Check if you want to show Wishlist in the header.

Header Layout 4

  1. Steps to choose a header layout is shown here
  2. Configure required parameters of header layout
# Parameter Value Description
1 Announcement Area Text Write your annoucements like sale, introductory offers etc.
2 Theme Logo Image Configure the logo of the store here.
3 Max Logo Width Number Configure the max size of the logo in pixels.
4 Contact Title Text Configure the title for contact block in the header.
5 Show Contact True / False Check if you want to show contact in the header.
6 Show Checkout True / False Check if you want to show Checkout in the header.
7 Show Wishlist True / False Check if you want to show Wishlist in the header.

Mega Menu

To configure Mega Menu, navigate to Customizer > Mega Menu and configure required fields.

Creating a Navigation

  1. Go to Online store -> Navigation.
  2. Click on "Add Menu" to create a new menu
  3. Enter menu title and add menu items.

Creating a menu without a dropdown.

  1. Navigate to Customizer > Mega Menu.
  2. Click on "Add Column".
  3. Enter Top Heading and Top Heading Link. You can also show flags like New, Hot, Sale by selecting these options below the link.
  4. Click on Save. This will create a simple link on the mega menu.

Creating a menu with a dropdown links and images.

  1. Navigate to Customizer > Mega Menu.
  2. Click on "Add Column".
  3. Refer following image to configure each links, images or products on the dropdown. If a something is not configured, it will not appear on the dropdown
  4. Click on Save. This will create a simple link on the mega menu.

Ishi Slideshow

Shows slides of images usually below the header. There are various options available. Each of them are described below.

Simple Slider

To configure Slideshow, navigate to Customizer > Slideshow and configure required fields.

  1. Configure required parameters of Slideshow.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full
2 Section Background Color Color Configure the background color of the slider.
3 Slider Top & Bottom Internal Padding Number Set top and bottom Internal padding of the slider.
4 Slider Left & Right Internal Spacing Number Set left and right Internal padding of the slider.
5 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
6 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
Content (Slider)
7 Image Image Configure the image for the slider.
8 Text Position Select Select Text Position. The Design of the section will change based on the chooen style.
9 Text Alignment Select Select Text Alignment. The Design of the section will change based on the chooen style.
10 Sub Title Text Configure the title for the slider.
11 Sub Title Color Color Configure the text color of the title.
12 Title Text Configure the sub title for the slider.
13 Title Color Color Configure the text color of the sub title.
14 Description Text Configure the description for the slider.
15 Description Color Color Configure the text color of the description title.
16 Button Label Text Configure the label of the button.
17 Link URL Configure the URL to which customer should be redirected on clicking the slider.

Slider With Left Banner

To configure Slider With Left Banner, navigate to Customizer & Slider With Left Banner and configure required fields.

  1. Configure required parameters of Slider With Left Banner.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Slider Banner Internal Spacing Number Configure the internal spacing between the banner and the slider.
3 Slider Top & Bottom Internal Padding Number Set Top and bottom internal padding of the slider.
4 Slider Left & Right Internal Spacing Number Set left and right internal padding of the slider.
5 Show Banner Block True / False Check if you want to show banners besides the slider. Unchecking will hide the banners even if they are configured.
6 Banner Image Image Configure the image of the banner. You can add maximum of 2 banners beside the slider.
7 Banner Hover Select Select the hover that should be applied when customer hovers on the banner.
8 Banner Link URL Configure the URL to which customer should be redirected on clicking the banner.
9 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
10 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
11 Slider Banner Background Color Color Configure the background color of the slider and the banner area.
12 Section Background Color Color Configure the background color of the full slider section.
Content (Slider)
13 Slider Image Image Configure the image for the slider.
14 Link URL Configure the URL to which customer should be redirected on clicking the slider.

Slider With Right Banner

To configure Slider With Right Banner, navigate to Customizer & Slider With Right Banner and configure required fields.

  1. Configure required parameters of Slider With Right Banner.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Slider Banner Internal Spacing Number Configure the internal spacing between the banner and the slider.
3 Slider Top & Bottom Internal Padding Number Set Top and bottom internal padding of the slider.
4 Slider Left & Right Internal Spacing Number Set left and right internal padding of the slider.
5 Show Banner Block True / False Check if you want to show banners besides the slider. Unchecking will hide the banners even if they are configured.
6 Banner Image Image Configure the image of the banner. You can add maximum of 2 banners beside the slider.
7 Banner Hover Select Select the hover that should be applied when customer hovers on the banner.
8 Banner Link URL Configure the URL to which customer should be redirected on clicking the banner.
9 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
10 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
11 Slider Banner Background Color Color Configure the background color of the slider and the banner area.
12 Section Background Color Color Configure the background color of the full slider section.
Content (Slider)
13 Slider Image Image Configure the image for the slider.
14 Link URL Configure the URL to which customer should be redirected on clicking the slider.

Ishi Category Block

Displays images with titles as a slider on the store. You can add as many images you want.

To configure Ishi Category Block, navigate to Customizer > Ishi Category Block and configure required fields.

  1. Configure required parameters of Ishi Category Block.
# Parameter Value Description
1 Main Title Text Configure the main title of the section.
2 Category Layout Select Select layout. The available options are Box or Full.
3 Category Style Select Configure if you want to show categories as a slider or in the form of a grid.
4 Show Circular Image True / False Check if you want images to appear in circular shape. If unchecked, the images appear in the way you upload them.
5 Background Image Image Configure the background image of the Category section.
6 Background color Color Configure the background color of the Category section. It is visible only if image is not configured.
7 Category Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
8 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
9 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
Content (Category)
10 Category Image Image Configure the image for the category.
11 Heading Text Configure the title of the category.
12 Link URL Configure the URL to which customer should be redirected on clicking the category.

Ishi Product Block

Shows Products on the store. Each section offers different layouts and designs.

Product Block Style 1

Displays the product collections in the form of tabs. You can add products into a collection and configure the collection in this section to show up products.

To configure Product Block Style 1, navigate to Customizer & Product Block Style 1 and configure required fields.

  1. Configure required parameters of Product Block Style 1.
# Parameter Value Description
1 Main Title Text Configure main title of the section.
2 Total Product From Collection Number Configure total number of products that should be fetched from the collection.
3 Max Products Columns For Mobile View Number Configure maximum number of columns for mobile view.
4 Max Products Columns For Small Tablet View Number Configure number of columns for tablet view.
5 Max Products Columns For Tablet View Number Configure number of columns for tablet view.
6 Max Products Columns For Laptop View Number Configure number of columns for laptop view.
7 Max Products Columns For Desktop View Number Configure number of columns for Desktop view.
8 Max Products Rows Select Configure number of rows to be shown.
9 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
10 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
Content (Product Block)
11 Product Tab Title Text Configure the tab title of the block
12 Collection Select Configure the collection of products to be shown.
13 Show View All Button True / False Check if you want to show view all button which redirects user to collection page on click.

Product Block Style 2

Displays the product collections in the form of tables. You can add products into a collection and configure the collection in this section to show up products. The collections are divided in the column of 2. You can add as many collections you want in the section.

To configure Product Block Style 2, navigate to Customizer > Product Block Style 2 and configure required fields.

  1. Configure required parameters of Product Block Style 2.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Background Color Color Configure the background color of the section.
3 Product Block Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
4 Total Product From Collection Number Configure total number of products that should be fetched from the collection.
5 Max Products Row Number Configure maximum number of Row for Product.
6 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
7 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
Content (Collection)
8 Heading Text Configure heading for the product tab
9 Collection Select Configure the collection of products to be shown.

Ishi Parallax Block

Shows up a fixed image in the background with a parallax effect. You can add custom texts using the section settings. You can also add a countdown timer to showup upcomming products, deals and events on the store.

Parallax Block With Timer

Displays an image in background with a parallax effect and a countdown timer with informatory text above the image.

To configure Parallax Block With Timer, navigate to Customizer & Parallax Block With Timer and configure required fields.

  1. Configure required parameters of Parallax Block With Timer.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Parallax Image Image Configure the background image of the parallax section.
3 Parallax Background Color Configure the background color of the parallax section. It is visible only if image is not configured.
4 Text Color Color Configure the color of the parallax section.
5 Parallax Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
6 Text Position Select Configure the text position. Available options aer Left, Right and Center
7 Parallax Offer Title Text Configure parallax offer title
8 Parallax Title Text Configure main title of parallax block
9 Parallax Sub Title Text Configure the sub title of the parallax block
10 Start Date Text Configure the starting date of the parallax timer in the YYY-MM-DD format.
11 End Date Text Configure the ending date of the parallax timer in the YYY-MM-DD format.
12 Button Label Text Configure the label of the button
13 Button Link URL Configure the URL to which customer should be redirected on clicking the button.
14 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
15 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.

Parallax Block Without Timer

Displays an image in background with a parallax effect and informatory texts above the image.

To configure Parallax Block Without Timer, navigate to Customizer & Parallax Block Without Timer and configure required fields.

  1. Configure required parameters of Parallax Block Without Timer.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Parallax Image Image Configure the background image of the parallax section.
3 Parallax Background Color Configure the background color of the parallax section. It is visible only if image is not configured.
4 Text Color Color Configure the color of the parallax section.
5 Parallax Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
6 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
7 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
8 Text Position Select Configure the text position. Available options aer Left, Right and Center.
9 Parallax Offer Title Text Configure parallax offer title.
10 Parallax Title Text Configure main title of parallax block.
11 Parallax Sub Title Text Configure Sub title of parallax block.
12 Button Label Text Configure the label of the button.
13 Button Link URL Configure the URL to which customer should be redirected on clicking the button.

Parallax With Counter

Displays an image in background with a parallax effect and informatory texts above the image.

To configure Parallax With Counter, navigate to Customizer & Parallax With Counter and configure required fields.

  1. Configure required parameters of Parallax With Counter.
# Parameter Value Description
1 Parallax Image Image Configure the background image of the parallax section.
2 Parallax Background Color Configure the background color of the parallax section. It is visible only if image is not configured.
3 Parallax Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
4 Banner Image Configure the Banner Image of the parallax section.
5 Main Title Text Configure title for counter block.
6 Counter Title Text Configure title of counter.
7 Counter Number Text Configure number of counter.
8 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
9 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.

Ishi Banner Block

Shows banners on the store. The banners usually shows deals, new launches and other attractive offers of the store. Each available option are explained below.

Ishi Banner Block

To configure Ishi Banner Block, navigate to Customizer > Ishi Banner Block and configure required fields.

  1. Configure required parameters of Ishi Banner Block.
# Parameter Value Description
1 Banner Image Image Configure the image of the banner.
2 Scale Banner Text Check if you want the banner to zoom on hover.
3 Banner Hover Text Select the hover that should be applied when customer hovers on the banner.
4 Text Position Select Select Text Position. The Design of the section will change based on the chooen style.
5 Sub Title Text Configure the title for the slider.
6 Sub Title Color Color Configure the text color of the title.
7 Title Text Configure the sub title for the slider.
8 Title Color Color Configure the text color of the sub title.
9 Button Label Text Configure the label of the button.
10 Link URL Configure the URL to which customer should be redirected on clicking the slider.
11 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
12 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.

Banner Without Text

This section allows you to add simple images as banners on the store.

To configure Banner Without Text, navigate to Customizer & Banner Without Text and configure required fields.

  1. Configure required parameters of Banner Without Text.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Number Of Columns Select Enter number of columns for the banners
3 Banner Left & Right Internal Spacing/Padding Number Configure internal spacing between each banner in pixels.
4 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
5 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
Content (Banner Without Text)
6 Banner Image Image Configure the image of the banner.
7 Scale Banner Text Check if you want the banner to zoom on hover.
8 Banner Hover Text Select the hover that should be applied when customer hovers on the banner.
9 Banner Link URL Configure the URL to which customer should be redirected on clicking the banner.

Ishi Testimonial Block

Displays client reviews on the homepage of your store. You can add client's image, name, designation and their short review. We have a number of styles for testimonials and each one of them is described below.

To configure Ishi Testimonial Block, navigate to Customizer > Ishi Testimonial Block and configure required fields.

  1. Configure required parameters of Ishi Testimonial Block.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Background Image Image Configure the background image for the section.
3 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
4 Text Color Color Configure the color for the section.
5 Testimonial Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
6 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
7 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
Content (Testimonial)
8 Testimonial Image Image Configure the image for the testimonial.
9 Testimonial Name Text Configure the name for testimonial.
10 Testimonial Designation Text Configure the designation for testominal.
12 Testimonial Text Text Enter the description for the testimonial.

Ishi Testimonial + Story Block

Displays client reviews on the homepage of your store. You can add client's image, name, designation and their short review. We have a number of styles for testimonials and each one of them is described below.

Allows you to configure description of the store or story behind the store. You can also use it for any other purpose.

To configure Ishi Testimonial + Story Block, navigate to Customizer > Ishi Testimonial + Story Block and configure required fields.

  1. Configure required parameters of Ishi Testimonial + Story Block.
# Parameter Value Description
1 Layout Select Select layout. The available options are Story + Testimonial, Only Story Block, Only Testimonial.
2 Background Image Image Configure the background image for the section.
3 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
4 Section Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
5 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
6 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
(Story Block Settings)
7 Story Image Image Configure the image for the story block.
8 Title Text Configure the title for the story block.
9 Sub Title Text Configure the Sub Title for story block.
10 Signature Image Image Configure the signature image for the story block.
11 Button Label Text Configure the label of the button.
12 Button Link URL Configure the URL to which customer should be redirected on clicking the button.
(Testimonial Settings)
13 Background Image Image Configure the background image for the section.
14 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
15 Text Color Color Configure the color for the section.
16 Testimonial Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
17 Testimonial Image Image Configure the image for the testimonial.
18 Testimonial Name Text Configure the name for testimonial.
19 Testimonial Designation Text Configure the designation for testominal.
20 Testimonial Text Text Enter the description for the testimonial.

Ishi Special Deal Block

Displays the products with timer.

To configure Ishi Special Deal Block, navigate to Customizer > Ishi Special Deal Block and configure required fields.

  1. Configure required parameters of Ishi Special Deal Block.
# Parameter Value Description
1 Main Title Text Configure main title of the section.
2 Background Image Image Configure the background image for the section.
3 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
4 Section Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
5 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
6 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
Content (Deal Product)
7 Select Your Product Select Select the product that you want to show up in the deals
8 Start Date Text Configure the starting date of the deal in the YYYY-MM-DD format.
9 End Date Text Configure the ending date of the deal in the YYYY-MM-DD format.

Ishi Special Product Block

Displays the product collections in the form of tabs. You can add products into a collection and configure the collection in this section to show up products.

To configure Ishi Special Product Block, navigate to Customizer > Ishi Product Block and configure required fields.

  1. Configure required parameters of Special Product Block.
# Parameter Value Description
1 Main Title Text Configure main title of the section.
2 Total Product From Collection Number Configure total number of products that should be fetched from the collection.
3 Max Products Columns For Mobile View Number Configure maximum number of columns for mobile view.
4 Max Products Columns For Small Tablet View Number Configure number of columns for tablet view.
5 Max Products Columns For Tablet View Number Configure number of columns for tablet view.
6 Max Products Columns For Laptop View Number Configure number of columns for laptop view.
7 Max Products Columns For Desktop View Number Configure number of columns for Desktop view.
8 Max Products Rows Select Configure number of rows to be shown.
9 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
10 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
Content (Product Block)
11 Collection Select Configure the collection of products to be shown.
12 Show View All Button True / False Check if you want to show view all button which redirects user to collection page on click.

Blog Post

Displays a few blogs on the home page of your store.

Blog Style1

To configure Blog Post, navigate to Customizer > Blog Style1 and configure required fields.

  1. Configure required parameters of Blog Style1.
# Parameter Value Description
1 Main Title Text Configure the main title of the BLOG section.
2 Layout Select Select layout. The available options are Box or Full.
3 Background Image Image Configure the background image for the section.
4 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
5 Section Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
6 Blog blogs Select the blogs that you would like to display on the homepage.
7 Post Number Configure the number of posts that you would like to show.
8 Show Author True / False Check if you want to show up the author name on the blog.
9 Show Date True / False Check if you want to show crated date of the blog.
10 Show Comment True / False Check if you want to show number of conmments on the blog.
11 Show View All Button True / False Check if you want to show view all button on the blog.
12 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
13 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.

Blog Style2

To configure Blog Post, navigate to Customizer > Blog Style2 and configure required fields.

  1. Configure required parameters of Blog Style2.
# Parameter Value Description
1 Main Title Text Configure the main title of the BLOG section.
2 Layout Select Select layout. The available options are Box or Full.
3 Background Image Image Configure the background image for the section.
4 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
5 section Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
6 Blog blogs Select the blogs that you would like to display on the homepage.
7 Post Number Configure the number of posts that you would like to show.
8 Show Author True / False Check if you want to show up the author name on the blog.
9 Show Date True / False Check if you want to show crated date of the blog.
10 Show Comment True / False Check if you want to show number of conmments on the blog.
11 Show View All Button True / False Check if you want to show view all button on the blog.
12 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
13 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.

Ishi Instagram Block

Displays instagram posts from your account on the homepage of your store.

To configure Ishi Instagram, navigate to Customizer > Ishi Instagram and configure required fields.

  1. Configure required parameters of Ishi Instagram.
# Parameter Value Description
1 Main Title Text Configure the main title of the Instagram section.
2 Instagram Layout Select Select layout. The available options are Box or Full.
3 Userid Text Configure the userid of your instagram account.
4 Accestoken Text Configure the Access Token. You can generate it using your instagram account.
5 Username Text Enter username of your instagram account.
6 Internal Box Space/Margin Number Configure internal padding of the box.
7 Max Image For Mobile View Number Configure maximum number of image for mobile view.
8 Max Image For Small Tablet View Number Configure maximum number of image for Small Tablet view.
9 Max Image For Tablet View Number Configure maximum number of image for Tablet view.
10 Max Image For Laptop View Number Configure maximum number of image for Laptop view.
11 Max Image For Desktop View Number Configure maximum number of image for Desktop view.
12 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
13 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.

Ishi Service Block

It displays basic services offerd by the store like free deliver, easy returns, cashbacks and other services that could benefit the customers.

Service Block Style1

To configure Service Block Style1, navigate to Customizer > Service Block Style1 and configure required fields.

  1. Configure required parameters of Service Block Style1.
# Parameter Value Description
1 Background Image Image Configure the background image for the section.
2 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
3 Section Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
4 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
5 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
Content (Service)
4 Service Image Image Configure the icon for the service.
5 Heading Text Configure the title of the service.
6 Sub Title Text Configure the sub title of the service.
7 Link URL Configure the URL to which customer should be redirected on clicking the category.

Service Block Style2

To configure Service Block Style2, navigate to Customizer > Service Block Style2 and configure required fields.

  1. Configure required parameters of Service Block Style2.
# Parameter Value Description
1 Service Layout Select Select layout. The available options are Box or Full.
2 Background Image Image Configure the background image for the section.
3 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
4 Section Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
5 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
6 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
Content (Service)
7 Service Image Image Configure the icon for the service.
8 Heading Text Configure the title of the service.
9 Sub Title Text Configure the sub title of the service.
10 Link URL Configure the URL to which customer should be redirected on clicking the category.

Ishi Manufacturer Block

To configure Ishi Manufacturer Block, navigate to Customizer > Ishi Manufacturer Block and configure required fields.

  1. Configure required parameters of Ishi Manufacturer Block.
# Parameter Value Description
1 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
2 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
Content (Manufacturer Logo)
3 Logo Image Image Configure the image of the Manufacturer Logo.
4 Link URL Configure the URL to which customer should be redirected on clicking the Manufacturer Logo.

Ishi Gallery Block

Allows you to configure Images of Gallery behind the store. You can also use it for any other purpose.

Gallery Block Style1

To configure Gallery Block Style1, navigate to Customizer > Gallery Block Style1 and configure required fields.

  1. Configure required parameters of Gallery Block Style1.
# Parameter Value Description
1 Main Title Text Configure main title of the section.
2 Sub Title Text Configure Sub title of the section.
3 Button Label Text Configure the label of the button.
4 Button Link URL Configure the URL to which customer should be redirected on clicking the button.
5 Gallery Image Image Configure the image for the gallery block.
6 Link URL Configure the URL to which customer should be redirected on clicking the button.
7 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
8 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
Content (Gallery Image)
9 Gallery Image Image Configure the Gallery for the Gallery Block.

Gallery Block Style2

To configure Gallery Block Style2, navigate to Customizer > Gallery Block Style2 and configure required fields.

  1. Configure required parameters of Gallery Block Style2.
# Parameter Value Description
1 Main Title Text Configure main title of the section.
2 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
3 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
Content (Gallery Image)
4 Tab Title Text Configure main tab title of the section.
5 Gallery Image Image Configure the Gallery for the Gallery Block.
6 Link URL Configure the URL to which customer should be redirected on clicking the button.
7 Scale Banner Text Check if you want the banner to zoom on hover.
3 Banner Hover Text Select the hover that should be applied when customer hovers on the banner.

Ishi Newsletter Block

Allows you to Discount Offer For Your Customer.

To configure Ishi Newsletter Block, navigate to Customizer > Ishi Newsletter Block and configure required fields.

  1. Configure required parameters of Ishi Newsletter Block.
# Parameter Value Description
1 Background Image Image Configure the background image for the section.
2 Background Color Color Configure the background color of the section. It appears only when background image is not selected.
3 Text Color Color Configure the color of the section.
4 Section Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
5 Newsletter Title Text Configure title of the section.
6 Newsletter Sub Title Text Configure Sub title of the section.
7 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
8 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.
(Discount Settings)
9 Discount Title Text Configure title of the section.
10 Discount Sub Title Text Configure Sub title of the section.
11 Discount Price Text Configure Price of the section.

Special Theme Section

Custom HTML Block

To configure Custom HTML Block, navigate to Customizer > Custom HTML Block and configure required fields.

  1. Configure required parameters of Custom HTML Block.
# Parameter Value Description
1 HTML Layout Select Select layout. The available options are Box or Full.
2 Custom HTML HTML Configure the Required HTML Code.
3 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
4 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.

Product Swatches

Our themes provide a color swatch feature on product page. Color swatch replace the traditional dropdown for variant options of type color. However, if you are using some color names that are non standard (like "zebra black", or "denim blue" for instance), you will realize the color swatch appears white. This is because the theme can't guess which color to display. To make it work, you will need to create your small image and upload them. You will find below detailed instructions about how to do it.

  1. Shopify Admin > Go to Products > All product. From the Products page, you can add custom color variant here.
  2. You will need first to create variants whose option is "Color". To do that, simply open the product in your Shopify admin, and create a new option called "Color":
  3. In the "option values", indicate all the product's colors. For the sake of this example, let's say that we have one variant color called "zebra black".
  4. Next,create your images for custom color. since color swatches are small, you should create small images. An image of 64x64 pixels is usually enough to ensure a good quality. The image MUST be in PNG format.
  5. This is very important : Make sure name of the image, must be the handleized version of the color's name you have used in your product.The handle for our option "zebra black" would be "zebra-black" (spaces to dash, and everything to lowercase). Special characters must be removed.since the images must be in a PNG format, the final image must be named, with "zebra-black.png" (make sure that .png extension is in lowercase as well)
  6. Now, we must "link" the image we have created to the color by uploading the images you have created to the theme.
  7. First, in your Shopify admin, open the "Files" section. To do that click on "Settings" in the bottom of the sidebar:
  8. Click on the "Upload files" button situated at the top right, and upload your image:
  9. Make sure that the file name is exactly the same as your original file name.
  10. Repeat the process for all your colors swatches.

Filters

  1. Shopify Admin > Go to Products > All product > Select a Product.
  2. After opening a Product go to Tags section.
  3. You can add filter tags that allows your customer to filter product according to price, size, color, brand etc.
    • For example if you want to show following filters like :
      Color
      Red
      Blue
      Green

      Size
      XS
      X
      XL
      XXL

    • The tags that a product must be added to the products must be :
      color_red
      color_blue
      color_green
      size_xs
      size_x
      size_xl
      size_xxl
  4. To remove any of tags just click on cancel button. Also you can sort tags by Popularity or Alphabetically.
Note : Sometimes you might want to hide some tags from showing up on filters. You can add these tags in the admin to let the theme know that these tags must not be used while rendering the filters.
  1. Go to Customizer > Collection Page > Sidebar
  2. Write comma seperated values of tags that you want to skip while rendering filters.

Size Chart

  1. Go to Customizer > Theme Settings > Size Chart
  2. Configure Size Chart as per your requirements.
# Parameter Value Description
1 Size Chart image Set a image for Size Chart.
2 Title Text Configure a title for Size Chart.
3 Table HTML Write the HTML content for the Size Chart table.
4 Deacripition HTML Write the HTML Content for the Size Chart Description.

This is the size chart table description HTML code.

<table class="table">
 <thead class="thead-light">
  <tr>
   <th scope="col">Size</th>
   <th scope="col">Chest</th>
   <th scope="col">Brand Size</th>
   <th scope="col">Shoulder</th>
   <th scope="col">Length</th>
   <th scope="col">Sleeve Length</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>38</td>
   <td>40.2</td>
   <td>38</td>
   <td>17.9</td>
   <td>29.9</td>
   <td>24</td>
  </tr>
  <tr>
   <td>39</td>
   <td>41.3</td>
   <td>39</td>
   <td>18.2</td>
   <td>30.1</td>
   <td>24.5</td>
  </tr>
 </tbody>
</table>

Custom Product Tab

  1. Shopify Admin > Go to Products > All product. From the Products page, click the product for which you want to create custom tab.
  2. In the description section, click on the "<>" icon. which will open the HTML editor as shown in the screenshot.
  3. To add a new Tab, Copy the following HTML code and paste it in the botton of the description. As shown in the screenshot.
    <div class="custom-tab">
    <div class="title">Title goes here.</div>
    <div class="description">Description goes here.</div>
    </div>
    Replace the text "Title goes here" and "description goes here" to your desired content before pasting it to the product description section.
Note :
If you want to create multiple tabs, place the HTML code multiple times at the end description. For example if you want to create 3 different tabs in the current product, you need to place the HTML code 3 times.

Credits

Font used :

Icon used :

Image used :

Note :
The images you see in the screenshots are used for demo purposes only, they are not incuded in the download package