Theme Documentation

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

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

This is our enhanced and beautifully designed responsive Shopify theme for your online Store. Theme has rich and 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.
    • Licensing : Contains files related to theme license and usage.
    • PSD_Files : Contains PSD files of all the layouts.
    • Packages : This folder contains the main zip files to be uploaded to shopify. You can choose the layout you wish to upload to shopify to make sure all the sections are setup as per the demo.
  2. Open your Shopify back office, then Online Store -> Themes on the left side bar.
  3. Press Upload theme and select the "upload_me_Theme.zip" file.
  4. Navigate to the Theme Library section and click on Upload Theme

Updating Theme

To update the theme without loosing your data please follow these steps :

  1. Create copy of you current theme. Online store -> Themes -> Actions -> Duplicate.
  2. Download your current theme.
  3. Unzip your current theme. Name theme's folder "Theme-Current"
  4. Download latest theme version. Unzip latest theme. Name it "Theme-Latest".
  5. Copy files with extension ".json" from current theme to latest theme. Here are a few examples of json files. They are usually located in the "templates" folder of your theme.
    • settings_data.json
    • 404.json
    • article.json
    • blog.json
    • cart.json
    • collection.json
    • index.json
    • list-collections.json
    • product.json
    • page.aboutus.json
    • page.contact.json
    • page.faq.json

    Note : There could be many other json files depending upon your customisations and theme. You must make sure you copy all those json files.

  6. Zip the contents of "Theme-Latest" and rename it as Theme-Latest.zip
  7. Upload "Theme-Latest.zip" to your store at Online store -> Themes -> Upload theme.
  8. Reinstall the apps. Since the app code would be deleted after the updates.

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

Multiple Currencies

Edit your Shopify Payments settings to enable selling in multiple currencies, and then add a currency selector to your online store's theme.

Before you start selling in multiple currencies, test your customer's experience. Shopify supports two currency values (store and customer) instead of one, to sell in multiple currencies.

    Set up Shopify Payments to use multiple currencies
  1. From your shop admin, go to the Settings / Payments
  2. In the Shopify Payments section, click Manage.
  3. In the Countries/regions section, click Add country/region.
  4. Select the country or region that you want to support from the list of supported countries and regions.
  5. Click Add country/region.
  6. Enable a currency selector on the store front

    You can enable currency selector from the header configuration of your shopify theme. The detailed steps are mentioned in the Header Section Documentation below.

Multiple Languages

Customers all over the world enjoy viewing content in their native language. Translating your store's content can lead to more sales because your international customers can better understand your marketing, product details, shipping, and return policies.

You can enable multiple languages from your Shopify admin to create separate URLs for your translated content. When customers land on a translated URL, your store automatically shows the translated version if translations exist. Whenever translations don't exist, your online store shows content in your primary language.


    Add new languages
  1. From your Shopify admin, go to Settings / Store Languages
  2. In Translated languages, click Add Language.
  3. Choose a language from the drop-down menu, then click Add.
  4. Click Visit Shopify App Store and follow the steps to install a translation app to your store.
  5. Follow the steps in the app to translate your online store's content and publish new languages.
  6. Click Preview to view different languages in your online store. You can preview both published and unpublished languages.
  7. In Translated languages, click Publish language to make any of your translations available in your store. Click Unpublish language to remove any language you don't want available in your store. Click Delete to delete all translated content of a language from your online store.
  8. Enable a language selector on the store front

    You can enable language selector from the header configuration of your shopify theme. The detailed steps are mentioned in the Header Section Documentation below.

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"

Theme Settings

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

Header Settings

  1. Go to Customizer > Theme Settings > General Settings
  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

Vertical Mega Menu, Header links, Services in the top navigation bar, Contact Block, Account, Search and Shopping Cart.

Layout2

Horizontal Mega Menu, Services in the top navigation bar, Search on the left of the logo, Account and Shopping Cart on the right of the logo.

Layout3

Vertical Mega Menu, Header links, Category in the top navigation bar, Contact Block, Account, Search and Shopping Cart.

Layout4

Vertical Mega Menu, Header links, Phone & Email & Cart in main header, Wishlist, Account, Search in top navigation bar.

Layout5

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

Layout6

Horizontal Mega Menu, Contact Block, Wishlist, Account in the top navigation bar, Category, Search and Shopping Cart.

Layout7

Horizontal Mega Menu, Contact Block, Wishlist, Account in the top navigation bar, Category, Search and Shopping Cart.

  1. Go to Customizer > Theme Settings > General Settings
  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 logo & Description, Social Links, Store Address, Contact, Email, Footer Links and Payment Icons

Layout2

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

Color

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

Typography

  1. Go to Customizer > Theme Settings > Typography
  2. Configure Fonts as per your requirements.
  3. You can choose from several fonts for the text in your online store. You can use a system font. A system font is a font that is already installed on most computers. You can select a mono, serif, or sans-serif font family. You can still use font styles, such as bold or italic, when you use any of these font families.

Product

  1. Go to Customizer > Theme Settings > Product
  2. # Parameter Value Description
    1 Image Ratio Select Select Image Ratio. The size of the product images will change based on the choosen style.
    2 Show Second Image on Hover True/False Check if you want to show second product image on hover.
    3 Show Vendor True/False Check if you want to show vendor.
    4 Button Shape Select Select the Button Shape. The available options are Rounded or Square.
    5 Button Position Select Select the Button Position. The available options are Left , Right , Center or Bottom.
    6 Display Add to cart as a Button True / False Check if you want to display Add to cart as a seperte Button.
    7 Length of Characters for Short Product Description Text Configure the length of characters for product description.
    8 Variant Picker Select Select Variant style. The available style is Dropdown or Swatches.
    9 Show Quickview True/False Check if you want to show quickview.
    10 Show Wishlist True/False Check if you want to show wishlist.
    11 Show Add To Cart True/False Check if you want to show add to cart.
    12 Background Color Color Configure the background color of the product.
    13 Add To Cart Button Position Select Select the Button Position. The available options are Left , Right and Center. If you select button position center it display as a button.
    14 Show Sale Badge True/False Check if you want to show sale badge.
    15 Background color Color Configure the background color of sale badge.
    16 Text color Color Configure the text color of sale badge.
    17 Show Sold out Badge True/False Check if you want to show sold out badge.
    18 Background color Color Configure the background color of sold out badge.
    19 Text color Color Configure the text color of sold out badge.

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.

The default sections are added by default. You can click on "Add Section" to add sections as you want.

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.

The default sections are added by default. You can click on "Add Section" to add sections as you want.

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.

The default sections are added by default. You can click on "Add Section" to add sections as you want.

Sidebar

Sidebar is a left column which can be added to the Collection, Product, Blog or Search page. You can add various blocks to the sidebar depending upon your requirements and settings.

  1. To enable a sidebar Go to Customizer > Theme Settings > Sidebar
  2. Following screenshot shows a list of pages to which you can add the sidebar. You can check the boxes to add the sidebar to a page
  1. To configure a sidebar Go to Customizer > Select Page which you enable on theme settings. For example you checked Product page to show sidebar then go to the product page.
  2. These are the available blocks you can use and explained below.
# Parameter Value Description
1 Select Category Links Select Select a menu for Category Links.

Collection:

# Parameter Value Description
1 Main Title Text Configure main title of the block.
2 Collection Select Configure the collection to be shown.
3 Product To Display In Collection Number Configure total number of products that should be fetched from the collection.
4 Show View All Button True/False Check if you want to show view all button.
# Parameter Value Description
1 Banner Image Image Configure the image of the banner.
2 Hover Select Select the hover that should be applied when customer hovers on the banner.
3 Scale Banner True/False Check if you want the banner to zoom on hover.
4 Link URL Configure the URL to which customer should be redirected on clicking the banner.

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 Theme Logo Image Configure the logo of the store here.
2 Show Email True / False Check if you want to show email number in the header.
3 Enable Currency selector True / False Check if you want to enable currency selector in the header.
4 Enable language selector True / False Check if you want to enable language selector in the header.
Content (Services)
5 Service image Image Configure the image of the service.
6 Service Title Text Configure the title for the service
7 Service Sub Title Text Configure sub title of the service.
8 Service Link URL Configure the URL to which customer should be redirected on clicking the Service.

Header Layout 2

  1. Steps to choose a header layout is shown here
  2. Configure required parameters of header layout
# Parameter Value Description
1 Theme Logo Image Configure the logo of the store here.
2 Enable Currency selector True / False Check if you want to enable currency selector in the header.
3 Enable language selector True / False Check if you want to enable language selector in the header.
Content (Services)
4 Service image Image Configure the image of the service.
5 Service Title Text Configure the title for the service
6 Service Sub Title Text Configure sub title of the service.
7 Service Link URL Configure the URL to which customer should be redirected on clicking the Service.

Header Layout 3

  1. Steps to choose a header layout is shown here
  2. Configure required parameters of header layout
# Parameter Value Description
1 Theme Logo Image Configure the logo of the store here.
2 Show Email True / False Check if you want to show email number in the header.
3 Enable Currency selector True / False Check if you want to enable currency selector in the header.
4 Enable language selector True / False Check if you want to enable language selector in the header.
Content (Category)
5 Category image Image Configure the image for the category.
6 Category Title Text Configure the title of the category.
7 Category Link URL Configure the URL to which customer should be redirected on clicking the Category.

Header Layout 4

  1. Steps to choose a header layout is shown here
  2. Configure required parameters of header layout
# Parameter Value Description
1 Theme Logo Image Configure the logo of the store here.
2 Show Contact True / False Check if you want to show contact number in the header.
3 Show Email True / False Check if you want to show email address in the header.
4 Enable Currency selector True / False Check if you want to enable currency selector in the header.
5 Enable language selector True / False Check if you want to enable language selector in the header.

Header Layout 5

  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 Show Wishlist True / False Check if you want to show wishlist icon in the header.
4 Enable Currency selector True / False Check if you want to enable currency selector in the header.
5 Enable language selector True / False Check if you want to enable language selector in the header.

Header Layout 6 & Header Layout 7

  1. Steps to choose a header layout is shown here
  2. Configure required parameters of header layout
# Parameter Value Description
1 Theme Logo Image Configure the logo of the store here.
2 Show Contact True / False Check if you want to show contact number in the header.
3 Show Email True / False Check if you want to show email address in the header.
4 Show Wishlist True / False Check if you want to show wishlist icon in the header.
5 Enable Currency selector True / False Check if you want to enable currency selector in the header.
6 Enable language selector True / False Check if you want to enable language selector in the header.
Content (Category)
7 Category image Image Configure the image for the category.
8 Category Title Text Configure the title of the category.
9 Category Link URL Configure the URL to which customer should be redirected on clicking the Category.

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 Simple Slider, navigate to Customizer > Simple Slider and configure required fields.

  1. Configure required parameters of Simple Slider.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full
2 Slider Top External Padding Number Set top external padding of the slider.
3 Slider Bottom External Padding Number Set bottom external padding of the slider.
4 Slider Left & Right External Spacing Number Set left and right external 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.
7 Section Background Color Color Configure the background color of the slider.
Content (Slider)
8 Slider Image Image Configure the image for the slider.
9 Text Position Select Select Text Position. The Design of the section will change based on the choosen style.
10 Text Alignment Select Select Text Alignment. The Design of the section will change based on the choosen style.
11 Sub Title Text Configure the sub title for the slider.
12 Sub Title Color Color Configure the text color of the sub title.
13 Title Text Configure the title for the slider.
14 Title Color Color Configure the text color of the title.
15 Description Text Configure the description for the slider.
16 Description Color Color Configure the text color of the description.
17 Button Label Text Configure the label of the button.
18 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 External Padding Number Set Top external padding of the slider.
4 Slider Bottom External Padding Number Set Bottom external padding of the slider.
5 Slider Left & Right External Spacing Number Set left and right external padding of the slider.
6 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.
7 Banner Image Image Configure the image of the banner. You can add maximum of 2 banners beside the slider.
8 Banner Hover Select 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.
10 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
11 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
12 Slider Banner Background Color Color Configure the background color of the slider and the banner area.
13 Section Background Color Color Configure the background color of the full slider section.
Content (Slider)
14 Slider Image Image Configure the image for the slider.
15 Text Position Select Select Text Position. The Design of the section will change based on the choosen style.
16 Text Alignment Select Select Text Alignment. The Design of the section will change based on the choosen style.
17 Sub Title Text Configure the sub title for the slider.
18 Sub Title Color Color Configure the text color of the sub title.
19 Title Text Configure the title for the slider.
20 Title Color Color Configure the text color of the title.
21 Description Text Configure the description for the slider.
22 Description Color Color Configure the text color of the description.
23 Button Label Text Configure the label of the button.
24 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 External Padding Number Set Top external padding of the slider.
4 Slider Bottom External Padding Number Set Bottom external padding of the slider.
5 Slider Left & Right External Spacing Number Set left and right external padding of the slider.
6 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.
7 Banner Image Image Configure the image of the banner. You can add maximum of 2 banners beside the slider.
8 Banner Hover Select 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.
10 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
11 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
12 Slider Banner Background Color Color Configure the background color of the slider and the banner area.
13 Section Background Color Color Configure the background color of the full slider section.
Content (Slider)
14 Slider Image Image Configure the image for the slider.
15 Text Position Select Select Text Position. The Design of the section will change based on the choosen style.
16 Text Alignment Select Select Text Alignment. The Design of the section will change based on the choosen style.
17 Sub Title Text Configure the sub title for the slider.
18 Sub Title Color Color Configure the text color of the sub title.
19 Title Text Configure the title for the slider.
20 Title Color Color Configure the text color of the title.
21 Description Text Configure the description for the slider.
22 Description Color Color Configure the text color of the description.
23 Button Label Text Configure the label of the button.
24 Link URL Configure the URL to which customer should be redirected on clicking the slider.

Slider With Left Right Banner

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

  1. Configure required parameters of Slider With Left 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 banners and the slider.
3 Slider Top External Padding Number Set top external padding of the slider.
4 Slider Bottom External Padding Number Set bottom external padding of the slider.
5 Slider Left & Right External Spacing Number Set left and right external padding of the slider.
6 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.
7 Banner Image Image Configure the image of the banner. You can add maximum of 4 banners (2 on each side of the slider).
8 Banner Hover Select 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.
10 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
11 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
12 Slider Banner Background Color Color Configure the background color of the slider and the banner area.
13 Section Background Color Color Configure the background color of the full slider section.
Content (Slider)
14 Slider Image Image Configure the image for the slider.
15 Text Position Select Select Text Position. The Design of the section will change based on the choosen style.
16 Text Alignment Select Select Text Alignment. The Design of the section will change based on the choosen style.
17 Sub Title Text Configure the sub title for the slider.
18 Sub Title Color Color Configure the text color of the sub title.
19 Title Text Configure the title for the slider.
20 Title Color Color Configure the text color of the title.
21 Description Text Configure the description for the slider.
22 Description Color Color Configure the text color of the description.
23 Button Label Text Configure the label of the button.
24 Link URL Configure the URL to which customer should be redirected on clicking the slider.

Ishi Banner Block

Shows banners on the store. You can add banners with text, without text etc. The banners usually shows deals, new launches and other attractive offers of the store. Each available option are explained below.

Banner With Text

This section allows you to add text on the banners using options provided in the section.

To configure Banner With Text, navigate to Customizer > Banner With Text and configure required fields.

  1. Configure required parameters of Banner With 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 With Text)
6 Banner Image Image Configure the image of the banner.
7 Sub Title Text Configure sub title of the banner.
8 Sub Title Color Color Configure sub title color of the banner.
9 Title In Bold Text Configure the part of title to be shown in bold fonts.
10 Title In Normal Text Configure the part of title to be shown in normal fonts.
11 Title Color Color Configure title color of the banner.
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.

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 True / False Check if you want the banner to zoom on hover.
8 Banner Hover Select Select the hover that should be applied when customer hovers on the banner.
9 Banner Hover Color Select Select the hover color that should be applied when customer hovers on the banner.
10 Banner Link URL Configure the URL to which customer should be redirected on clicking the banner.

Banner With Special Font

This section allows you to add fancy text on the banners using options provided in the section.

To configure Banner With Special Font, navigate to Customizer > Banner With Special Font and configure required fields.

  1. Configure required parameters of Banner With Special Font.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Banner Left & Right Internal Spacing/Padding Number Configure internal spacing between each banner in pixels.
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.
Content (Banner Without Text)
5 Banner Image Image Configure the image of the banner.
6 Text Color Color Configure text color of the banner.
7 Title Text Configure the title of the banner
8 Sub Title Text Configure the sub title of the banner
9 Button Label Text Configure the label of the button
10 Button Link URL Configure the URL to which customer should be redirected on clicking the button.

Masonry Banner

This section allows you to add banners using options provided in the section. The banners are aligned and set in a masonary position which makes them look good.

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

  1. Configure required parameters of Masonry Banner.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
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 (Masonry Banner)
4 Banner Image Image Configure the image of the banner.
5 Banner Link URL Configure the URL to which customer should be redirected on clicking the banner.
6 Banner Hover Select Select the hover that should be applied when customer hovers on the banner.
7 Banner Hover Color Select Select the hover color that should be applied when customer hovers on the banner.
8 Scale Banner True / False Check if you want the banner to zoom on hover.

Masonry Banner With Text

This section allows you to add text on the banners using options provided in the section. The banners are aligned and set in a masonary position which makes them look good.

To configure Masonry Banner With Text, navigate to Customizer > Masonry Banner With Text and configure required fields.

  1. Configure required parameters of Masonry Banner With Text.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
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 (Masonry Banner With Text)
4 Banner Image Image Configure the image of the banner.
5 Text Color Color Configure text color of the banner.
6 Title Text Configure the title of the banner
7 Sub Title Text Configure the sub title of the banner
8 Button Label Text Configure the label of the button
9 Button Link URL Configure the URL to which customer should be redirected on clicking the button.

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 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 Main Title Text Configure main title of the section.
5 Maximum Products to Show Number Configure total number of products that should be fetched from the collection.
6 Number of Column Select Select number of column to products show in one row.
7 Enable Swipe on Mobile True/False Check if you want to show slider on mobile.
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 (Product Block)
10 Product Tab Title Text Configure the tab title of the 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.

Product Block Style 2

Shows up products from a collection that is configured in the section settings. In this section product images are on the left and product information is on the rightside.

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 Main Title Text Configure main title of the section.
5 Collection Select Configure the collection of products to be shown.
6 Maximum Products to Show Number Configure total number of products that should be fetched from the collection.
7 Number of Column Select Select number of column to products show in one row.
8 Enable Swipe on Mobile True/False Check if you want to show slider on mobile.
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.

Product Block Style 3

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 3. You can add as many collections you want in the section.

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

  1. Configure required parameters of Product Block Style 3.
# 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 Maximum Products to Show Number Configure total number of products that should be fetched from the collection.
5 Number of Column Select Select number of column to products show in one row.
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.

Product With Timer Style 1

Displays the products with timer. This section displays product image and information on the left and a seperate timer on the right side.

To configure Product With Timer Style 1, navigate to Customizer > Product With Timer Style 1 and configure required fields.

  1. Configure required parameters of Product With Timer Style 1.
# Parameter Value Description
1 Main Title Text Configure the main title of the section
2 Length of Characters for Product Description Number Configure the number of characters to be shown in the product description
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.
Content (Deal Product)
5 Select Your Product Select Select the product that you want to show up in the deals
6 Start Date Text Configure the starting date of the deal in the YYYY-MM-DD format.
7 End Date Text Configure the ending date of the deal in the YYYY-MM-DD format.

Product With Timer Style 2

Displays the products with timer. This section displays product image on the left and product information with counter on the right.

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

  1. Configure required parameters of Product With Timer Style 2.
# Parameter Value Description
1 Main Title Text Configure the main title of the section
2 Length of Characters for Product Description Number Configure the number of characters to be shown in the product description
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.
Content (Deal Product)
5 Select Your Product Select Select the product that you want to show up in the deals
6 Start Date Text Configure the starting date of the deal in the YYYY-MM-DD format.
7 End Date Text Configure the ending date of the deal in the YYYY-MM-DD format.

Single Product Block

It helps you to show a featured product on the home page of your stores. It shows all the details of products like description, reviews, custom tabs etc.

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

  1. Configure required parameters of Single Product Block.
# Parameter Value Description
1 Enable Sticky Product Image True/False Check if you want product image to sticky.
2 Enable Video Looping True/False Check if you want to play video continuously.
3 Sub Title Text Configure the sub title of the section.
4 Main Title Text Configure the main title of the section.
5 Select Your Product Select Configure the Product to be shown.
Custom Tab Configuration
6 Show Description Tab True/False Check if you want to show product description tab.
7 Show Review Tab True/False Check if you want to show product review tab.
8 Show Conatct Tab True/False Check if you want to show contact tab.
9 Custom Tab1 Title Text Configure custom tab1 title.
10 Custom Tab1 Description Text Select page for custom tab1 description. You can also add dynamic source using metafields.
11 Custom Tab2 Title Text Configure custom tab2 title.
12 Custom Tab2 Description Text Configure custom tab2 description. You can also add dynamic source using metafields.
12 Custom Tab3 Title Text Configure custom tab3 title.
13 Custom Tab3 Description Text Configure custom tab3 description. You can also add dynamic source using metafields.
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.

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 Parallax Border Color Configure the Border color of the parallax section.
5 Parallax Text Color1 Color Configure the text color of the parallax section.
6 Parallax Text Color2 Color Configure the text color of the parallax section.
7 Parallax 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.
10 Text Position Select Configure the text position. Available options aer Left, Right and Center
11 Parallax Offer Title Text Configure parallax offer title
12 Parallax Title Text Configure main title of parallax block
13 Parallax Sub Title Text Configure the sub title of the parallax block
14 Start Date Text Configure the starting date of the parallax timer in the YYY-MM-DD format.
15 End Date Text Configure the ending date of the parallax timer in the YYY-MM-DD format.
16 Button Label Text Configure the label of the button
17 Button Link URL Configure the URL to which customer should be redirected on clicking the button.

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 Parallax Text Color1 Color Configure the text color of the parallax section.
5 Parallax Text Color2 Color Configure the text color of the parallax section.
6 Parallax Top & Bottom Internal Padding Number Configure top and bottom internal padding 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.
9 Text Position Select Configure the text position. Available options aer Left, Right and Center.
10 Parallax Offer Title Text Configure parallax offer title.
11 Parallax Title Text Configure main title of parallax block.
12 Parallax Sub Title Text Configure Sub title of parallax block.
13 Button Label Text Configure the label of the button.
14 Button Link URL Configure the URL to which customer should be redirected on clicking the button.

Ishi Category Block

Displays images with titles as a slider or grid that lists out added categories on the store. You can add as many images you want.

Category Block Style 1

Displays categories with images and titles in a simple form.

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

  1. Configure required parameters of Category Block Style 1.
# 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 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 (Category)
7 Category Image Image Configure the image for the category.
8 Heading Text Configure the title of the category.
9 Link URL Configure the URL to which customer should be redirected on clicking the category.

Category Block Style 2

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

  1. Configure required parameters of Category Block Style 2.
# 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 Category Background Image Image Configure the background image for the section.
5 Category Background Color Color Configure the background color of the section. It appears only when background image is not selected.
6 Category Block Top Internal Padding Number Configure top internal padding of the section.
7 Category Block Bottom Internal Padding Number Configure bottom internal padding of the section.
8 Category Block Left & Right Internal Padding Number Configure left and right internal padding of the section.
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 (Category)
11 Category Image Image Configure the image for the category.
12 Heading Text Configure the Text for the category.
13 Link URL Configure the URL to which customer should be redirected on clicking the category.

Category Block Style 3

Display categories with image and a menu that shows up on hover.

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

  1. Configure required parameters of Category Block Style 3.
# 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 Category Left & Right Internal Padding Number Configure left and right 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 (Category)
7 Category Image Image Configure the image for the category.
8 Link URL Configure the URL to which customer should be redirected on clicking the category.
9 Category Menu Select Configure the menu that should show up when customer hovers on the category block.

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.

Testimonial Block Style 1

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

  1. Configure required parameters of Testimonial Block Style 1.
# Parameter Value Description
1 Testimonial Layout Select Select layout. The available options are Box or Full.
2 Testimonial Background Image Image Configure the background image for the section.
3 Testimonial Background Color Color Configure the background color of the section. It appears only when background image is not selected.
4 Testimonial Text Color Color Configure the text color of 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.
11 Testimonial Text Text Enter the description for the testimonial.

Testimonial Block Style 2

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

  1. Configure required parameters of Testimonial Block Style 2.
# Parameter Value Description
1 Main Title Text Configure the main title of the testimonial section.
2 Testimonial Layout Select Select layout. The available options are Box or Full.
3 Testimonial Background Image Image Configure the background image for the section.
4 Testimonial Background Color Color Configure the background color of the section. It appears only when background image is not selected.
5 Testimonial Text Color1 Color Configure the text color of the section.
6 Testimonial Text Color2 Color Configure the text color of the section.
7 Testimonial 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 (Testimonial)
10 Testimonial Image Image Configure the image for the testimonial.
11 Testimonial Name Text Configure the name for testimonial.
12 Testimonial Designation Text Configure the designation for testominal.
13 Testimonial Text Text Enter the description for the testimonial.

Testimonial Block Style 3

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

  1. Configure required parameters of Testimonial Block Style 3.
# Parameter Value Description
1 Main Title Text Configure the main title of the testimonial section.
2 Testimonial Background Image Image Configure the background image for the section.
3 Testimonial Background Color Color Configure the background color of the section. It appears only when background image is not selected.
4 Testimonial Text Color Color Configure the text color of 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.
11 Testimonial Text Text Enter the description for the testimonial.

Testimonial Block Style 4

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

  1. Configure required parameters of Testimonial Block Style 4.
# Parameter Value Description
1 Main Title Text Configure the main title of the testimonial section.
2 Testimonial Layout Select Select layout. The available options are Box or Full.
3 Testimonial Background Image Image Configure the background image for the section.
4 Testimonial Background Color Color Configure the background color of the section. It appears only when background image is not selected.
5 Testimonial Border Color Color Configure the border color of the section.
6 Testimonial Text Color Color Configure the text color of the section.
7 Testimonial Icon Color Color Configure the icon color of the section.
8 Testimonial Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
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 (Testimonial)
11 Testimonial Image Image Configure the image for the testimonial.
12 Testimonial Name Text Configure the name for testimonial.
13 Testimonial Designation Text Configure the designation for testominal.
14 Testimonial Text Text Enter the description for the testimonial.

Testimonial Block Style 5

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

  1. Configure required parameters of Testimonial Block Style 5.
# Parameter Value Description
1 Testimonial Left Banner Image Configure the banner image to be diplayed on the left side of the testimonial.
2 Testimonial Background Image Image Configure the background image for the section.
3 Testimonial Background Color Color Configure the background color for the section.
4 Testimonial Text Color1 Color Configure the text color of the section.
5 Testimonial Text Color2 Color Configure the text color of the section.
6 Testimonial Top & Bottom Internal Padding Number Configure top and bottom internal padding 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.
Content (Testimonial)
9 Testimonial Image Image Configure the image for the testimonial.
10 Testimonial Name Text Configure the name for testimonial.
11 Testimonial Designation Text Configure the designation for testominal.
12 Testimonial Text Text Enter the description for the testimonial.

Ishi Blog Post

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

Blog Style 1

To configure Blog Style 1, navigate to Customizer > Blog Style 1 and configure required fields.

  1. Configure required parameters of Blog Style 1.
# Parameter Value Description
1 Main Title Text Configure the main title of the blog section.
2 Blog blogs Select the blogs that you would like to display on the homepage.
3 Post Number Configure the number of posts that you would like to show.
4 Show Author True / False Check if you want to show up the author name on the blog.
5 Show Date True / False Check if you want to show crated date of the blog.
6 Show Comment True / False Check if you want to show number of conmments on the blog.
7 Show View All Button True / False Check if you want to show view all button on the blog.
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.

Blog Style 2

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

  1. Configure required parameters of Blog Style 2.
# Parameter Value Description
1 Main Title Text Configure the main title of the blog section.
2 Blog blogs Select the blogs that you would like to display on the homepage.
3 Post Number Configure the number of posts that you would like to show.
4 Show Author True / False Check if you want to show up the author name on the blog.
5 Show Date True / False Check if you want to show crated date of the blog.
6 Show Comment True / False Check if you want to show number of conmments on the blog.
7 Show View All Button True / False Check if you want to show view all button on the blog.
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.

Blog Style 3

To configure Blog Style 3, navigate to Customizer > Blog Style 3 and configure required fields.

  1. Configure required parameters of Blog Style 3.
# Parameter Value Description
1 Main Title Text Configure the main title of the blog section.
2 Blog blogs Select the blogs that you would like to display on the homepage.
3 Post Number Configure the number of posts that you would like to show.
4 Show Author True / False Check if you want to show up the author name on the blog.
5 Show Date True / False Check if you want to show crated date of the blog.
6 Show Comment True / False Check if you want to show number of conmments on the blog.
7 Show View All Button True / False Check if you want to show view all button on the blog.
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 Instagram Block

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

Instagram Block Style 1

To configure Instagram Block Style 1, navigate to Customizer > Instagram Block Style 1 and configure required fields.

  1. Configure required parameters of Instagram Block Style 1.
# 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 Accestoken Text Configure the Access Token. You can generate it using your instagram account.
4 Username Text Enter username of your instagram account.
5 Show Black & White Images? True / False Check if you want to show black & white images in the instagram.
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.

Instagram Block Style 2

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

  1. Configure required parameters of Instagram Block Style 2.
# Parameter Value Description
1 Main Title Text Configure the main title of the Instagram section.
2 Accestoken Text Configure the Access Token. You can generate it using your instagram account.
3 Username Text Enter username of your instagram account.
4 Show Black & White Images? True / False Check if you want to show black & white images in the instagram.
5 Max Image For Mobile View Number Configure maximum number of image for Mobile view.
6 Max Image For Small Tablet View Number Configure maximum number of image for Small Tablet view.
7 Max Image For Tablet View Number Configure maximum number of image for Tablet view.
8 Max Image For Laptop View Number Configure maximum number of image for Laptop view.
9 Max Image For Desktop View Number Configure maximum number of image for Desktop view.
10 Desktop Bottom Margin Number Configure the space between the current section and the following section on Desktop version.
11 Mobile Bottom Margin Number Configure the space between the current section and the following section on Mobile version.

Instagram Block Style 3

To configure Instagram Block Style 3, navigate to Customizer > Instagram Block Style 3 and configure required fields.

  1. Configure required parameters of Instagram Block Style 3.
# 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 Accestoken Text Configure the Access Token. You can generate it using your instagram account.
4 Username Text Enter username of your instagram account.
5 Show Black & White Images? True / False Check if you want to show black & white images in the instagram.
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.

Services Block Style 1

To configure Services Block Style 1, navigate to Customizer > Services Block Style 1 and configure required fields.

  1. Configure required parameters of Services Block Style 1.
# 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 (Service)
3 Service Image Image Configure the icon for the service.
4 Title Text Configure the title of the service.
5 Sub Title Text Configure the sub title of the service.
6 Link URL Configure the URL to which customer should be redirected on clicking the service.

Services Block Style 2

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

  1. Configure required parameters of Services Block Style 2.
# 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 (Service)
3 Service Image Image Configure the icon for the service.
4 Title Text Configure the title of the service.
5 Sub Title Text Configure the sub title of the service.
6 Link URL Configure the URL to which customer should be redirected on clicking the service.

Services Block Style 3

To configure Services Block Style 3, navigate to Customizer > Services Block Style 3 and configure required fields.

  1. Configure required parameters of Services Block Style 3.
# 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 (Service)
3 Service Image Image Configure the icon for the service.
4 Title Text Configure the title of the service.
5 Sub Title Text Configure the sub title of the service.
6 Link URL Configure the URL to which customer should be redirected on clicking the service.

Services Block Style 4

To configure Services Block Style 4, navigate to Customizer > Services Block Style 4 and configure required fields.

  1. Configure required parameters of Services Block Style 4.
# Parameter Value Description
1 Service Background Image Image Configure the background image for the section.
2 Service Background Color Color Configure the background color for the section.
3 Service Top & Bottom Internal Padding Number Configure 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)
6 Service Image Image Configure the icon for the service.
7 Title Text Configure the title of the service.
8 Sub Title Text Configure the sub title of the service.
9 Link URL Configure the URL to which customer should be redirected on clicking the service.

Services Block Style 5

To configure Services Block Style 5, navigate to Customizer > Services Block Style 5 and configure required fields.

  1. Configure required parameters of Services Block Style 5.
# Parameter Value Description
1 Main Title Text Configure main title of the section.
2 Background Image Color Configure the background image of the section.
3 Background color Color Configure the background color of the section.
4 Text Color1 Color Configure the primary text color of the section.
5 Text Color2 Color Configure the secondary text color of the section.
6 Number of Column Select Select number of column to service show in one row.
7 Icon Position Select Select icon position. The available options are left or center.
8 Internal Top & Bottom Space Padding Number Configure top and bottom internal padding of the section.
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 (Service)
11 Service Image Image Configure the icon for the service.
12 Heading Text Configure the heading of the service.
13 Sub Title Text Configure the sub title of the service.
14 Link URL Configure the URL to which customer should be redirected on clicking the service.

Ishi Story Block

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

Story Block Style 1

To configure Story Block Style 1, navigate to Customizer > Story Block Style 1 and configure required fields.

  1. Configure required parameters of Story Block Style 1.
# Parameter Value Description
1 Story Background Image Image Configure the background image for the section.
2 Story Background Color Color Configure the background color for the section.
3 Story Text Color1 Color Configure the Text color1 for the section.
4 Story Text Color2 Color Configure the Text color2 for the section.
5 Story Top & Bottom Internal Padding Number Configure internal padding of the section.
6 Story Image Image Configure the image for the store block.
7 Story Image Position Select Select image position for the story block. Available options are Left or Right.
8 Video URL URL Configure the URL to which customer should be redirected on clicking the video.
9 Icon Color Color Configure the icon color for the section.
10 Story Title Text Configure the story title.
11 Story Text Text Configure the story description.
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.

Story Block Style 2

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

  1. Configure required parameters of Story Block Style 2.
# Parameter Value Description
1 Main Title Text Configure the main title of the Instagram section.
2 Story Background Image Image Configure the background image for the section.
3 Story Background Color Color Configure the background color for the section.
4 Story Text Color1 Color Configure the Text color1 for the section.
5 Story Text Color2 Color Configure the Text color2 for the section.
6 Story Top & Bottom Internal Padding Number Configure internal padding of the section.
7 Story Image Image Configure the image for the store block.
8 Story Text Text Configure the story description.
9 Button Label Text Configure the label of the button
10 Button Link URL Configure the URL to which customer should be redirected on clicking the button.
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.

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 Main Title Text Configure the main title for the section.
2 Layout Select Select layout. The available options are Box or Full.
3 Section Background Image Image Configure the background image for the section.
4 Section 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 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 (Manufacturer Logo)
8 Logo Image Image Configure the image of the Manufacturerr Logo.
9 Link URL Configure the URL to which customer should be redirected on clicking the Manufacturerr Logo.

Special Theme Section

Blog + Manufacturer Block

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

  1. Configure required parameters of Blog + Manufacturer Block.
# Parameter Value Description
Blog Settings
1 Main Title Text Configure main title of the section.
2 Blog blogs Select the blogs that you would like to display on the homepage.
3 Post Number Configure the number of posts that you would like to show.
4 Show Author True / False Check if you want to show up the author name on the blog.
5 Show Date True / False Check if you want to show crated date of the blog.
6 Show Comment True / False Check if you want to show number of conmments on the blog.
7 Show View All Button True / False Check if you want to show view all button on the blog.
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 (Manufacturer Logo)
10 Manufacturer Background Image Image Configure the background image for the Manufacturer section.
11 Manufacturer Background Color Color Configure the background Color for the Manufacturer section.
12 Manufacturer Top & Bottom Internal Padding Number Configure top and bottom internal padding of the Manufacturer section.
13 Logo Image Image Configure the image of the Manufacturer Logo.
14 Link URL Configure the URL to which customer should be redirected on clicking the Manufacturer Logo.

Banner + Manufacturer Block

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

  1. Configure required parameters of Banner + Manufacturer Block.
# Parameter Value Description
1 Layout Select Select layout. The available options are Box or Full.
2 Section Background Image Image Configure the background image of the Section.
3 Section Background Color Color Configure the background color of the Section. It is visible only if image is not configured.
4 Banner Left & Right Internal Padding Number Configure internal spacing between each banner in pixels.
5 Banner Image Image Configure the image of the banner.
6 Scale Banner True / False Check if you want the banner to zoom on hover.
7 Banner Hover Select Select the hover that should be applied when customer hovers on the banner.
8 Banner Hover Color Select Select the hover color 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.
10 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
11 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.
Content (Manufacturer Logo)
12 Logo Image Image Configure the image of the Manufacturer Logo.
13 Link URL Configure the URL to which customer should be redirected on clicking the Manufacturer Logo.

Blog + Newsletter Block

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

  1. Configure required parameters of Blog + Newsletter Block.
# Parameter Value Description
Blog Settings
1 Main Title Text Configure main title of the section.
2 Blog Select Select layout. The available options are Box or Full.
3 Post Number Configure the number of posts that you would like to show.
4 Show Author True / False Check if you want to show up the author name on the blog.
5 Show Date True / False Check if you want to show crated date of the blog.
6 Show Comment True / False Check if you want to show number of conmments on the blog.
7 Show View All Button True / False Check if you want to show view all button on the blog.
Newsletter Settings
8 Background Image Image Configure the background image for the Newsletter section.
9 Background Color Color Configure the background color of the Newsletter section. It appears only when background image is not selected.
10 Text Color1 Color Configure the Text color1 for the Newsletter section.
11 Text Color2 Color Configure the Text color2 for the Newsletter section.
12 Main Title Text Configure the main title of the Newsletter section.
13 Sub Title Text Configure the sub title of the Newsletter section.
14 Description Text Configure the Description of the Newsletter section.
Common Settings
15 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
16 Mobile Bottom Margin Number Configure the space between the current section and the following section on mobile version.

Deal + Newsletter Block

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

  1. Configure required parameters of Deal + Newsletter Block.
# Parameter Value Description
Deal Settings
1 Main Title Text Configure main title of the section.
2 Length of Characters for Product Description Number Configure the number of characters to be shown in the product description
3 Select Your Product Select Select the product that you want to show up in the deals
4 Start Date Text Configure the starting date of the deal in the YYYY-MM-DD format.
5 End Date Text Configure the ending date of the deal in the YYYY-MM-DD format.
Newsletter Settings
6 Background Image Image Configure the background image for the Newsletter section.
7 Background Color Color Configure the background color of the Newsletter section. It appears only when background image is not selected.
8 Text Color Color Configure the Text color for the Newsletter section.
9 Icon Color Color Configure the icon color for the Newsletter section.
8 Main Title Text Configure main title of the Newsletter section.
9 Sub Title Text Configure Sub title of the Newsletter section.
10 Description Text Configure Description of the Newsletter section.
Common Settings
11 Desktop Bottom Margin Number Configure the starting date of the deal in the YYYY-MM-DD format.
14 Mobile Bottom Margin Number Configure the ending date of the deal in the YYYY-MM-DD format.

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.

Newsletter Popup

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

  1. Configure required parameters of Newsletter Popup.
# Parameter Value Description
1 Enabled True / False Check if you want to enabled Newsletter Popup of the Store.
2 Show All Pages True / False Check if you want to show Newsletter Popup of all pages on a store.
3 Set Timeout Number Configure the delay time for Newsletter Popup.
4 Background Image Image Configure the background image for Newsletter Popup.
5 Background Color Color Configure the background color for Newsletter Popup. It appears only when background image is not selected.
6 Text Color Color Configure the text color for Newsletter Popup.
7 Image Position Select Select Image position for the Newsletter Popup. Available options are Cover or Left or Right.
8 Text Position Select Select Text position for the Newsletter Popup. Available options are Center or Left or Right.
9 Main Title Text Configure the Main Title of Newsletter Popup.
10 Sub Title Text Configure the sub title of the Newsletter Popup.
11 Show Social Icon True / False Check if you want to show social icon of Newsletter Popup.

Cookie Consent

To configure Cookie Consent, navigate to Customizer > Cookie Consent and configure required fields.

  1. Configure required parameters of Cookie Consent.
# Parameter Value Description
1 Enabled True / False Check if you want to enabled cookie consent of the Store.
2 Position Select Select position for the cookie consent. Available options are Bottom or Left or Right.
3 Description Text Configure the description of cookie consent.
4 Button Text Text Configure the text of the button.
5 Background Color Color Configure the background color for the cookie consent.
6 Background Opacity Number Configure the background opacity for the cookie consent.
7 Button Background Color Color Configure the button background color for the cookie consent.
8 Button Text Color Color Configure the button text color for the cookie consent.

Product Tab

  1. Go to Customizer > Product Page > Product Tabs
  2. You can add multiple tabs as you want. The available tabs are Description Tab, Review Tab, Custom Tab, HTML Tab. Description Tab shows product description. Review Tab shows product reviews. Custom and HTML Tab shows custom content. In Custom Tab you can select any page which are available on your store. In HTML Tab you can write any HTML content.

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 34x34 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

  • Enable product filtering

    Filters allows you to set up product filtering on your collection pages. When you enable filtering, customers can filter your products by availability, product type, color, or other options to find the products that interest them the most.

  • Available filters

    Filters for availability and primary price are included by default. Your product variants determine which additional filter options are available. For example, if you sell clothing with different variants for size, then you can enable a filter for size.

  • Add filters
    1. From your Shopify admin, go to Online Store > Navigation
    2. Scroll down to Collection filters.
    3. Click the Add filter dropdown menu.
    4. Click Product Options, and then select one or more filter options from the list.
    5. Click Done to save your product options.
    6. Click Save to update your collection filters.
  • Filter products

    When Collection filtering is enabled, the filter options appear in the sidebar of your online store. There is no limit to the number of filter criteria a customer can select. After the customer selects a filter option, the resulting list of filtered products will automatically update to display products that match the customer's criteria.

Metafields

Metafields enable you to customize the functionality and appearance of your Shopify store by letting you save specialized information that isn't usually captured in the Shopify admin. You can use metafields for internal tracking, or to display specialized information on your online store in a variety of ways.

You can add metafields to your products, collections, customers, orders, and other parts of your store, either directly from your Shopify admin or by using an app from the Shopify App Store

Metafield Definitions:

Metafield definitions act as templates that specify what part of your store a metafield applies to and what values the metafield can have. Before you can add metafield values to specific products, orders, or other parts of your store, you first need to add the metafield definition for that information. Adding metafield definitions ensures that the same validation rules apply to every value that you enter for a specific metafield.

Metafield definitions have the following parts:
# Name Description
1 Namespace and key Together, the namespace and key create a unique identifier for your metafield. You can use a namespace to group similar metafields together, but each namespace and key combination must be unique.
2 Value The type and format of information that's contained in your metafield.
3 Description (optional) An description of the metafield to help you input the correct values. The description is displayed on the Shopify admin page where you add values for your metafield.
4 Validation (optional) A setting that you can configure to limit the values that your metafield can contain. You can set minimum and maximum values, or use regular expressions to control the range of accepted values for your metafield.

Adding values to Metafields:

After you add a metafield definition, you add values for your metafield on the corresponding pages in your Shopify admin.

Metafields are displayed in an editable table on your Shopify admin pages. Each metafield displays the name that you selected when you created your metafield definition. You can click in each table row to display the type of metafield and its description, and then enter a value.

Metafield content types and values:

The following table contains basic instructions for adding values to common types of metafields, as well as example use cases for each type

# Content type Description
1 Color Supports RGB values in #RRGGBB format.
2 Date Supports date values in ISO 8601 format and time values in UTC time.
3 Dimension Supports both whole number and decimal values. The units of measurement can be configured using either the metric or the imperial system.
4 Weight Supports both whole number and decimal values. The units of measurement can be configured using either the metric or the imperial system.
5 Volume Supports both whole number and decimal values. The units of measurement can be configured using either the metric or the imperial system.
6 Money Supports decimal values for price in your store currency, for example, USD.
7 Number Supports either integer or decimal values, depending on how you configure your definition.
Integer values can be in the range of -4,611,686,018,427,387,904 to 4,611,686,018,427,387,903.
Decimal values can be in the range of +/-9999999999999.999999999, with up to 13 digits before the decimal and up to 9 digits after.
8 Rating Provides a slider for selecting whole numbers within a given range, depending on how you configure your definition.
9 Product reference Supports linking to one or more products, depending on how you configure your metafield definition.
10 Product variant reference Supports linking to one or more product variants, depending on how you configure your metafield definition.
11 File reference Supports uploading a single file in one of the following file types: images & all file types
Images in JPEG, PNG, and GIF formats are displayed on your online store. All other file types are displayed as available for download.
12 Page reference Provides a link to a page in your online store.
13 URL Supports HTTP, HTTPS and mailto: URLs. You can limit URLs to specific domains when you create your metafield definition.
14 Text Supports plain text in either single-line or multi-line fields. Multi-line fields can include line breaks
15 True or false Creates a checkbox for selecting whether a condition is true or false.
16 JSON Supports raw JSON data for advanced scenarios when you need a structured data source.

Displaying Metafields:

After you add metafield definitions and assign metafield values to parts of your store, you can connect metafields to your theme to display your specialized information on your online store in a variety of ways.

Connecting metafields to your theme by using the theme editor:

You connect metafields to your theme by adding sections or blocks that support dynamic sources. For example, the Product info section can support product metafields.

  • After you add a section or block, you can select a single metafield by clicking the connect dynamic source icon:
  • If the connect dynamic source icon displays a +, then you can add up to 20 metafields by clicking the icon and then selecting one metafield at a time:

Deleting Metafields:

If you no longer want to have a metafield for part of your store, then you can delete the metafield definition and all of its associated values.

  1. From your Shopify admin, go to Settings > Metafields
  2. In the Manage metafields section, select the metafield category that contains the metafield definition that you want to delete.
  3. Click the metafield definition that you want to delete.
  4. Click Delete, and then click Delete again to confirm.

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