Organsio Theme Documentation

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

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

Organsio is our enhanced and beautifully designed responsive Shopify theme for your online Store. Organsio 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

If you have not purchased the theme yet, you can purchase it from here.

  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.
    • upload_me_OrgansioXXX.zip : These are the main zip files to be uploaded to shopify. To upload layout 1, Please upload upload_me_Organsio001.zip. However each layout contains all the sections you see in any of the 3 layouts. So you can use any layout to create your own layout!
  2. Open your Shopify back office, then Online Store -> Themes on the left side bar.
  3. Press Upload theme and select the "upload_me_Organsio.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 "Organsio-Current"
  4. Download latest theme version from themeforest. Unzip latest theme. Name it "Organsio-Latest".
  5. Copy theme settings file "config/settings_data.json" from current theme to latest theme. Organsio-Current/config/settings_data.json -> Organsio-Latest/config/settings_data.json.
  6. Zip "Organsio-Latest".
  7. Upload "Organsio-Latest.zip" to your store at Online store -> Themes -> Upload theme.
  8. Reinstall apps.

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.

ExIm - Export Import Pages

  1. To enable app, Install ExIm - Export Import Pages 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

Store Layout

  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Scroll down to separator image .

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

Menu, Header Block,Wishlist,Contact,Checkout, Account,Email Search and Shopping Cart.

Layout2

Menu, Header Block,Wishlist,Contact,Checkout, Account,Email Search and Shopping Cart.

Layout3

Menu, Header Block,Wishlist,Contact,Checkout, Account, Search and Shopping Cart.

Note :
You can configure the 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 Info,Store Address,Social Icon, Contact, Email, Footer Links and Payment Icons

Layout2

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

Layout3

Store Info,Store Address,Social Icon, Contact, Email, Footer Links and Payment Icons

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

Size Chart

  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Configure the size chart page which will popup when user clicks on the size chart button.
  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Configure the parameters as per your requirements.

Button Configuration

  1. Go to Customizer > Theme Settings > Theme Configuration & Images
  2. Scroll down to "Button Configuration" and configure all the parameters as per your requirements.
# Parameter Value Description
1 Button Shape Select Select the Button Shape. The available options are Rounded or Square.
  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 Enable Breadcrumb? True / False Check if you want to show breadcrumb in your store.
2 Breadcrumb Image image Sets a background image for breadcrumb.
3 Background Color color Sets background color for breadcrumb. Works only if image is not configured or image is png.
4 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
1 Primary Font Font Configure the Primary font of the theme. This font is used in most of the parts of the theme.
2 Secondary Font Font Configure the Secondary font of the theme. This font is used in most of the parts of the theme.

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.

Product/Cart Reassurance

  1. Go to Customizer > Theme Settings > Product/Cart Reassurance
  2. Configure Reassurance as per your requirements.
# Parameter Value Description
1 Enable Product Page True / False Check if you want to enable reassurance in product page.
2 Enable Cart Page True / False Check if you want to enable reassurance in cart page.
(Reassurance)
3 Image Image Configure the icon for the reassurance.
4 Title Text Configure the title of the reassurance.
5 Sub Title Text Configure the sub title of the reassurance.

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 Primary Logo Image Configure the logo of the store here.
2 Secondary Logo Image Secondary Logo is visible only on the top of the homepage and nowhere else.
3 Max Logo Width Number Configure the max size of the logo in pixels.
Content (Megamenu)
Steps to configure menu items is shown here

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 Bar Text Text Write your annoucements like sale, introductory offers etc.
2 Show Checkout True / False Check if you want to show Checkout in the header.
3 Show Wishlist True / False Check if you want to show Wishlist in the header.
4 Desktop Logo Image Image Configure the logo of the store here.
5 Mobile Logo Image Image Configure the logo of the store here.
6 Max Logo Width Number Configure the max size of the logo in pixels.
7 Cart Title Number Configure the Cart Title.
8 Email Title Number Configure the Email Title.
9 Show Email Id True / False Check if you want to show email id 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 Bar Text Text Write your annoucements like sale, introductory offers etc.
4 Desktop Logo Image Image Configure the logo of the store here.
5 Mobile Logo Image Image Configure the logo of the store here.
6 Max Logo Width Number Configure the max size of the logo in pixels.
2 Show Checkout True / False Check if you want to show Checkout in the header.
3 Show Wishlist True / False Check if you want to show Wishlist in the header.
7 Cart Title Number Configure the Cart Title.

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.

To configure Simple Slider, navigate to Customizer > Simple Slider and configure required fields.

  1. Configure required parameters of Simple Slider.
# 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 (Slider)
3 Image Image Configure the image for the slider.
4 Text Position Select Select Text Position. The Design of the section will change based on the chooen style.
5 Text Alignment Select Select Text Alignment. The Design of the section will change based on the chooen style.
6 Sub Title Text Configure the sub title for the slider.
7 Sub Title Color Color Configure the text color of the sub title.
8 Title Text Configure the title for the slider.
9 Title Color Color Configure the text color of the title.
10 Description Text Configure the description for the slider.
11 Description Color Color Configure the text color of the description title.
12 Button Label Text Configure the label of the button.
13 Link URL Configure the URL to which customer should be redirected on clicking the slider.

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

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 Main Title Text Configure main title of the section.
2 tab Layout Select Select tab layout of the section.
3 Total Product From Collection Number Configure total number of products that should be fetched from the collection.
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 (Product Block)
6 Icon Image Image Configure the image for the section.
7 Product Tab Title Text Configure the tab title of the block.
8 Collection Select Configure the collection of products to be shown.
9 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 3

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 3, navigate to Customizer > Product Block Style 3 and configure required fields.

  1. Configure required parameters of Product Block Style 2.
# Parameter Value Description
1 Background Color Color Configure the text background color of the section.
2 Main Title Text Configure main title of the section.
3 Total Product From Collection Number Configure total number of products that should be fetched from the collection.
4 Max Products Rows Select Configure number of rows to be shown.
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 (Product Block)
7 Collection Select Configure the collection of products to be shown.
8 Show View All Button True / False Check if you want to show view all button which redirects user to collection page on click.

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 Text Position Select Select Text Position. The Design of the section will change based on the chooen style.
7 Text Alignment Select Select Text Alignment. The Design of the section will change based on the chooen style.
8 Banner Image Image Configure the image of the banner.
9 Sub Title Text Configure sub title of the banner.
10 Sub Title Color Color Configure sub title color of the banner.
11 Title Text Configure sub title of the banner.
12 Title Color Color Configure title color of the banner.
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.

Displays categories with images and titles in a simple form.

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

  1. Configure required parameters of Category Block.
# Parameter Value Description
1 background Image Image Configure the background image of the section.
2 Background color Color Configure the background color of the section. It is visible only if background image is not configured.
3 Internal Box Space/Padding Number Configure box space padding of the section.
4 Main Title Text Configure the main title 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 Title URL Configure the title for the category.
9 Link URL Configure the URL to which customer should be redirected on clicking the category.

Ishi Story Block

Displays Little Description about Store.

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

  1. Configure required parameters of Ishi Story Block.
# Parameter Value Description
1 Image-1 Banner Configure the banner of the story block.
2 Image-2 Banner Configure the banner of the story block.
3 Sub Title Text Configure sub title of the section.
4 Main Title Text Configure main title of the section.
5 Description 1 Text Configure description1 of the section.
6 Video Title Text Configure video title of the section.
7 Video URL Video Configure video URL of the story block.
8 Description 2 Text Configure description2 of the section.
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 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.

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

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

  1. Configure required parameters of Parallax Block Style.
# Parameter Value Description
1 background Image Image Configure the background image of the section.
2 Background color Color Configure the background color of the section. It is visible only if background image is not configured.
3 Background Attachment Fixed ? True/false Check if you want to keep the background sticky on scroll.
4 Parallax Top & Bottom Internal Padding Number Configure top and bottom internal padding of the section.
5 Text Position Select Configure the text position. Available options aer Left, Right and Center.
6 Text Alignment Select Configure the text alignment. Available options aer Left, Right and Center.
7 Background Color Color Configure the background color of the text.
8 Background Opacity Opacity Configure the opacity color of the background.
9 Text Color1 Color Configure the primart text color of the parallax section.
10 Text Color2 Color Configure the secondary text color of the parallax section.
11 Countdown Background Color Color Configure the background color of the countdown.
12 Countdown Text Color Color Configure the text color of the countdown.
13 Countdown Background Hover Color Color Configure the background hover color of the countdown.
14 Countdown Text Hover Color Color Configure the text hover color of the countdown.
15 Parallax Offer Title Text Configure offer title of parallax block.
16 Parallax Title Text Configure main title of parallax block.
17 Parallax Sub Title Text Configure the sub title of the parallax block.
18 Start Date Text Configure the starting date of the parallax timer in the YYY-MM-DD format.
19 End Date Text Configure the ending date of the parallax timer in the YYY-MM-DD format.
20 Button Label Text Configure the label of the button
21 Button Link URL Configure the URL to which customer should be redirected on clicking the button.
22 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
23 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 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 Brand Logo Image Image Configure the image of the Manufacturerr Logo.
4 Link URL Configure the URL to which customer should be redirected on clicking the Manufacturerr Logo.

Ishi Deal Block

Shows deals on the store. You can add deals on productsand configure start and end date for each of products and showup timer on each product. Each available options are explained below.

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

  1. Configure required parameters of Ishi Deal Block.
# Parameter Value Description
1 Main Title text Configure the main title of the section.
2 Length of Characters for Short Product Description. number Configure the length of characters for 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 (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.

Ishi Features Block

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

Ishi Features Block Style 1

This block displays features offered by the products in your store. You can display icons, title and description. The configuration of section are explained below.

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

  1. Configure required parameters of Ishi Features Block Style 1.
# Parameter Value Description
1 Background Image Image Configure the background image of the section.
2 Background Color Color Configure the background color of the section. It is visible only if background image is not configured.
3 Text Color1 Color Configure the primart text color of the section.
4 Text Color2 Color Configure the secondary text color of the section.
5 Internal Top & Bottom Space Padding Number Configure top and bottom internal padding of the section.
6 Main Title Text Configure the main title of the section.
7 Banner Image Image Configure the image for 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 (Features)
10 Image Image Configure the icon of the features.
11 Title Text Configure the title of features.
12 Sub Title Text Configure the subtitle of features.

Ishi Features Block Style 2

This block displays features offered by the products in your store. You can display icons, title and description. The configuration of section are explained below.

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

  1. Configure required parameters of Ishi Features Block Style 2.
# Parameter Value Description
1 Background Image Image Configure the background image of the section.
2 Background Color Color Configure the background color of the section. It is visible only if background image is not configured.
3 Text Color1 Color Configure the primart text color of the section.
4 Text Color2 Color Configure the secondary text color of the section.
5 Internal Top & Bottom Space Padding Number Configure top and bottom internal padding of the section.
6 Main Title Text Configure the main title of the section.
7 Banner Text Color Configure the Banner text of the section.
8 Button Label Text Configure the label of the button.
9 Link URL Configure the URL to which customer should be redirected on clicking the slider.
10 Banner Image Image Configure the image for the section.
11 Image Image Configure the icon of the features.
12 Title Text Configure the title of features.
13 Sub Title Text Configure the subtitle of features.
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 Aboutus Block

This block displays information regarding the store and offered products. You can display images and texts. The configuration of section are explained below.

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

  1. Configure required parameters of Ishi Aboutus Block.
# Parameter Value Description
1 Background Image Image Configure the background image of the section.
2 Background Color Color Configure the background color of the section. It is visible only if background image is not configured.
3 Text Color1 Color Configure the primart text color of the section.
4 Internal Box Padding Number Configure box padding of the section.
5 Image Image Configure the image for the aboutus block.
6 Show About Us Banner True / False Check if you want to show about us banner.
7 Sub Title Text Configure the sub title of the aboutus block.
8 Main Title Text Configure the main title of the aboutus block.
9 Description 1 Text Configure the description for the aboutus block.
10 Image Image Configure the icon of the features.
11 Title Text Configure the title of features.
12 Link URL Configure the URL to which customer should be redirected on clicking the button.
13 Button Label URL Configure the label of the button.
14 Button Link URL Configure the URL to which customer should be redirected on clicking the button.
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.

Ishi Blog Post

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

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

  1. Configure required parameters of Blog.
# 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 Gallery Block

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

  1. Configure required parameters of Gallery Block .
# Parameter Value Description
1 Main Title Text Configure the main title of the BLOG 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)
4 Image Image Configure the img for the section.
5 Link URL Configure the URL to which customer should be redirected on clicking the section.

Ishi Testimonial Block

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

Ishi Testimonial Block Style 1

Displays client reviews on the homepage of your store. You can add client's image, name, stars, designation and their short review.

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 Background Image Image Configure the background image of the section.
2 Background color Color Configure the background color of the section. It is visible only if background image is not configured.
3 Testimonial Content Background color Color Configure the background color of the testimonial content.
4 Text Color1 Color Configure the primart text color of the section.
5 Text Color2 Color Configure the secondary text color of the section.
6 Internal Top & Bottom Space Padding Number Configure top and bottom internal padding of the section.
7 Main Title Text Configure main title of the section.
8 Main Title Color Color Configure the main title color 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 Image Image Configure the image for the testimonial.
12 Show Rattings True / False Check if you want to display Star Rattings on each block.
13 Star Rattings Select Select Star Rattings you want to display on each block.
14 Name Text Configure the name for testimonial.
15 Profession Text Configure the Profession for testominal.
16 Description Text Enter the description for the testimonial.

Ishi Testimonial 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 Ishi Testimonial Block.
# Parameter Value Description
1 Background Image Image Configure the background image of the section.
2 Background color Color Configure the background color of the section. It is visible only if background image is not configured.
3 Testimonial Content Background color Color Configure the background color of the testimonial content.
4 Text Color1 Color Configure the primart text color of the section.
5 Text Color2 Color Configure the secondary text color of the section.
6 Internal Top & Bottom Space Padding Number Configure top and bottom internal padding of the section.
7 Main Title Text Configure main title of the section.
8 Main Title Color Color Configure the main title color 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 Image Image Configure the image for the testimonial.
12 Name Text Configure the name for testimonial.
13 Profession Text Configure the Profession for testominal.
14 Description Text Enter the description for the testimonial.

Ishi Newsletter Block

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 Select Layout Select Select website layout. The available options are Box or Full.
2 background Image Image Configure the background image of the section.
3 Background color Color Configure the background color of the section. It is visible only if background image is not configured.
4 Text Color Color Configure the primary text color of the section.
5 Button Background Color Color Configure the button background color for Newsletter.
6 Button Text Color Color Configure the button text color for Newsletter Popup.
7 Button Hover Background Color Color Configure the button hover background color for Newsletter.
8 Button Hover Text Color Color Configure the button hover text color for Newsletter Popup.
9 Internal Box Space/Padding Number Configure internal box space/padding of the section.
10 Background Attachment Fixed ? True/false Check if you want to keep the background sticky on scroll.
11 Main Title Text Configure Main title of section
12 Description Text Configure the description of the section
13 Desktop Bottom Margin Number Configure the space between the current section and the following section on desktop version.
14 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 Block, navigate to Customizer > Ishi Instagram Block and configure required fields.

  1. Configure required parameters of Ishi Instagram Block.
# Parameter Value Description
1 Select Layout Select Select layout Style. The Design of the section will change based on the chooen style.
2 Sub Title Text Configure the sub title of the section.
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 margin 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.

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 Background Image Image Configure the background image for Newsletter Popup.
4 Background Color Color Configure the background color for Newsletter Popup. It appears only when background image is not selected.
5 Text Color Color Configure the text color for Newsletter Popup.
6 Image Position Select Select Image position for the Newsletter Popup. Available options are Cover or Left or Right.
7 Text Position Select Select Text position for the Newsletter Popup. Available options are Center or Left or Right.
8 Main Title Text Configure the Main Title of Newsletter Popup.
9 Sub Title Text Configure the sub title of the Newsletter Popup.
10 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 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.

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