Getting Started

Thank You for purchasing my theme. If You have any questions that are beyond the scope of this documentation, please feel free to submit ticket to http://help.big-skins.com/ Thanks so much!

Why Shopify?

Shopify provides You with a variety of tools to help You set up and run Your business. Depending on the plan that You choose, You can find everything You need to showcase Your products online, to process payments, and to make Your store work for You. Shopify offers:

  • Free and paid themes from the Shopify Theme Store to make Your store stand out and look great
  • Free and paid apps from the Shopify App Store to expand on the existing functionality of Your store
  • Shopify's own payment gateway to accept credit card payments
  • Growth opportunities with Shopify's various sales channels as well an enterprise plan for merchants who are selling in high volume and might be feeling the effects of accumulating transaction fees
  • A Shopify blog that has guides and articles about running Your store and connecting with Your customers
  • Experts all around the world that can help You set up, design, and market Your store

Useful manuals

How to install Shopify?

Shopify is web based ecommerce software. This means there’s no installation required and it works with all operating systems (including Windows and MacOS)! Shopify hosts the site itself so You don’t have to worry about installing, upgrading or maintaining any software or web servers. Go here to install shopify

Banita Installation & Update

1st - Make sure that You've installed shopify
2nd - You need to have the latest Banita package from themeforest

Theme Install

1. Login to Your shopify store. Go to Online Stores -> Themes.



2. Click Upload Theme



3. Browse local Banita theme zip package and upload it



4. Click Publish


5. Congratulations! You have installed theme successfully! You can check it on the frontend of Your site.

Product reviews app

Shopify has no product stars and reviews tab by default:


That is why You have to install special FREE reviews app Product Reviews

Currency Setup

In this section of Your Shopify admin, You can choose which currency Your store uses (for example: USD, EUR, CAD, AUD, JPY):

1. From Your Shopify admin, click Settings:


2. In the Standards and formats section, use the drop-down menu under Currency to select a new monetary unit:


3. Click Change formatting and You will see next

4. Change first to inputs to:

1
2
3
//copy lines from here
<span class="money">${{amount}} USD</span>
<span class="money">${{amount}}</span>

Set Your customer account preferences

You can make customer accounts required or optional, or disable them altogether. Keep in mind that requiring customers to create accounts might decrease sales conversions.

To edit Your customer account settings:

  1. From Your Shopify admin, click Settings, then click Checkout.
  2. In the Customer accounts section, choose a customer account option:
    • Accounts are disabled.
      Customers won't see the option to create an account or to login. They'll have to manually enter their details at checkout, because fields won't be pre-filled.
    • Accounts are optional - Choose this.
      Customers can choose to create an account but it's not mandatory for checkout. If customers do have an account and they're logged in, their address fields are pre-filled when they place an order.
    • Accounts are required.
      Customers must have an account and be logged in to place an order. This setting is useful if You're running a wholesale or members-only store, for example. Address fields are pre-filled when the customer places an order.
  3. Click Save changes to confirm Your change to customer account settings.

Theme Update

Variant 1 - reupload theme. This method doesn't save Your own files custom changes:
1. Upload the latest theme package as described in Theme Install
Variant 2 - with DIFF FILE. For advanced users, which want save their custom changes.
Our theme package has svn versions - diff files. You can find them in package/versions_diff_files

In these files You will see smth like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Index: layout/theme.liquid
===================================================================
--- layout/theme.liquid (revision 109)
+++ layout/theme.liquid (revision 110)
@@ -17,12 +17,12 @@
     <div class="page-wrapper">
         {% include header %}
         <main class="page-main">
-                    {% unless template == 'cart' and  cart.item_count == 0 %}{% include 'breadcrumb' %}{% endunless %}
+                    {% unless template == 'cart' and  cart.item_count == 0 %}{% unless template == '404' %}{% include 'breadcrumb' %}{% endunless %}{% endunless %}
             {{content_for_layout}}
         </main>
-                {% unless template == 'cart' and  cart.item_count == 0 %}
+                {% unless template == 'cart' and  cart.item_count == 0 %}{% unless template == '404' %}
                 {% include footer %}
-                {% endunless %}
+                {% endunless %}{% endunless %}
     </div>

That means that file layout/theme.liquid has been changed.

You need go to Shopify admin -> Online Stores -> Themes and click Edit Code

Click on file layout/theme.liquid in left sidebar

Go to diff file again:

1
2
- {% unless template == 'cart' and  cart.item_count == 0 %}{% include 'breadcrumb' %}{% endunless %}
+ {% unless template == 'cart' and  cart.item_count == 0 %}{% unless template == '404' %}{% include 'breadcrumb' %}{% endunless %}{% endunless %}

.. that means You need to replace the first string with the second one.
- remove the string
+ add the string

Theme Customization

There are 2 ways to customize the theme:

  1. Change theme settings

    Go to Shopify admin -> Online Stores -> Themes -> Customize Theme


    You will see a lot of theme settings You can change.

  2. Change theme files

    You need go to Shopify admin -> Online Stores -> Themes and click Edit Code

How to add custom css?

Complicated customization of the theme requires style changes in css. The theme has main assets/style.css file. You can directly add own changes in that file, but it is a bad way for updates. It will be much easier in the future to simply replace an old style.css with a new updated style.css

That is why we have already created assets/custom.css file (write changes there)

Banita Home Pages

Banita theme has pre-defined home pages:

Important! Our demo has all home pages in one store at the same time. Downloaded theme can have one home page. There is no ability to assign other home pages as simple pages like those we have made in demo. But we can discuss this feature at bigstepscenter@gmail.com

Making Home page - 1

Despite the fact that this home page is configured by default after installation we still describe how to revert it again.

Banita is based on the latest sections mechanism. That is why you can build any view incredibly easily.

Steps to set up the Home Page 1:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 1

  3. Add Section

    ->Select Slideshow #8

  4. Add Section
    ->Select Welcome To #25

  5. Add Section
    ->Select 2 carousels per row (2+2) #12

  6. Add Section
    ->Select Banners From Online Editor #6
    ->We have chosen grid with columns 50/50 with banner 3 and banner 4

  7. Add Section
    ->Select Brands #11

  8. Add Section
    ->Select Instagram feed #18

  9. Add Section
    ->Select 2 carousels per row (3+1) #13

  10. Add Section
    ->Select Blog Posts Style 1 #9

  11. Click Footer and choose Footer 1

  12. Click Save,
    ->then set up your section settings
    (assign collections, products, headings, etc).

Making Home page - 2

Banita is based on the latest sections mechanism. That is why you can incredibly easy build any view.

Steps to set up the Home Page 2:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 2

  3. Add Section

    ->Select Slideshow #8
    ->We have chosen option 'Slideshow height' - Fullheight (in Slideshow section options) in our demo

  4. Add Section
    ->Select Shop Info #23
    ->We have chosen option 'Outer top margin' - None (in Shop Info section options) in our demo

  5. Add Section
    ->Select Banners From Online Editor #6
    ->We have chosen grid with columns 66/33 with banner 11 and banner 2

  6. Add Section
    ->Select Carousel Full row #15

  7. Add Section
    ->Select Parallax + Text #7

  8. Add Section
    ->Select 3/4 of row + Testimonials #14

  9. Click Footer and choose Footer 2

  10. Click Save,
    ->then set up your section settings
    (assign collections, products, headings, etc).

Making Home page - 3

Banita is based on the latest sections mechanism. That is why you can incredibly easy build any view.

Steps to set up the Home Page 3:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 3

  3. Add Section
    ->Select Products / Featured product #22

  4. Add Section
    ->Select Products / Featured collection #21

  5. Add Section
    ->Select About Us / Title+Description+Bg #4

  6. Add Section
    ->Select Newsletter / Subscribe Form #19
    ->We have chosen option 'Style' - Style 1 (bg color) (in Subscribe Form section options) in our demo

  7. Add Section
    ->Select Banners / Banner + text #5

  8. Add Section
    ->Select Text / Testimonials #24
    ->We have chosen option 'Style' - Testimonials 1 (in Testimonials section options) in our demo

  9. Click Footer and choose Footer 3

  10. Click Save,
    ->then set up your section settings
    (assign collections, products, headings, etc).

Making Home page - 4

Banita is based on the latest sections mechanism. That is why you can incredibly easy build any view.

Steps to set up the Home Page 4:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 3

  3. Add Section
    ->Select Collection's Carousel / Full row #15

  4. Add Section
    ->Select Banners From Online Editor #6
    ->We have chosen grid with columns 100 with banner 9

  5. Add Section
    ->Select 2 carousels per row (2+2) #12

  6. Add Section
    ->Select Testimonials #24
    ->We have chosen option 'Style' - Testimonials 2 (in Testimonials section options) in our demo

  7. Add Section
    ->Select Banners From Online Editor #6
    ->We have chosen grid with columns 100 with banner 12

  8. Add Section
    ->Select Text / Welcome To #25

  9. Add Section
    ->Select Blog / Blog Posts Style 2 #10

  10. Click Footer and choose Footer 4

  11. Click Save,
    ->then set up your section settings
    (assign collections, products, headings, etc).

Making Home page - 5

Banita is based on the latest sections mechanism. That is why you can incredibly easy build any view.

Steps to set up the Home Page 5:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 5

  3. Add Section
    ->Select Banners From Online Editor #6
    ->We have chosen grid with columns 33/33/33 with three the same banner 8 (just different images)

  4. Add Section
    ->Select Products / All collections list #20

  5. Add Section
    ->Select Banners / Banner + text #5

  6. Add Section
    ->Select Blog / Blog Posts Style 2 #10

  7. Add Section
    ->Select Newsletter / Subscribe Form #19
    ->We have chosen option 'Style' - Style 4 (bg image) (in Style section options) in our demo

  8. Click Footer and choose Footer 5

  9. Click Save,
    ->then set up your section settings
    (assign collections, products, headings, etc).

Making Home page - 6

Banita is based on the latest sections mechanism. That is why you can incredibly easy build any view.

Steps to set up the Home Page 6:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 6

  3. Add Section
    ->Select Banners From Online Editor #6
    ->We have chosen grid with columns 33/33/33, 3 rows, padding 0, with the same banner 7 (just different images)

  4. Add Section
    ->Select About Us / Our History #1

  5. Click Footer and choose Footer 6

  6. Click Save

Making Home page - 7

Banita is based on the latest sections mechanism. That is why you can incredibly easy build any view.

Steps to set up the Home Page 7:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 7

  3. Add Section
    ->Select About Us / Title+Description #3

  4. Add Section
    ->Select About Us / Our Team #2

  5. Add Section
    ->Select Collection's Carousel / Full row #15

  6. Add Section
    ->Select Contact / Feedback form

  7. Add Section
    ->Select Contact / Map #16

  8. Click Footer and choose Footer 7

  9. Click Save,
    ->then set up your section settings
    (assign collections, products, headings, etc).

Making Home page - 8

Banita is based on the latest sections mechanism. That is why you can incredibly easy build any view.

Steps to set up the Home Page 8:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 4

  3. Add Section
    ->Select Banners From Online Editor #6
    ->We have chosen grid with columns 33/33/33, padding 0, fullwidth, with the same banner 7 (just different images)

  4. Add Section
    ->Select 2 carousels per row (3+1) #13

  5. Add Section
    ->Select Instagram feed #18

  6. Add Section
    ->Select Banners From Online Editor #6
    ->We have chosen grid with columns 33/33/33, boxed, with the same banner 8 (just different images)

  7. Add Section
    ->Select Products / Featured collection #21

  8. Click Footer and choose Footer 8

  9. Click Save,
    ->then set up your section settings
    (assign collections, products, headings, etc).

Making Home page - 9

Banita is based on the latest sections mechanism. That is why you can incredibly easy build any view.

Steps to set up the Home Page 9:

  1. Go to Theme Settings / Sections

  2. Click Header and choose Header 4

  3. Add Section
    ->Select Products / Featured product #13

  4. Add Section
    ->Select Delimiters / Line #13

  5. Add Section
    ->Select Products / Featured product #13
    ->We have checked the option Reverse style (in Featured product section options) in our demo

  6. Add Section
    ->Select Delimiters / Line #13

  7. Add Section
    ->Select Products / Featured product #13

  8. Add Section
    ->Select Brands #13

  9. Add Section
    ->Select 2 carousels per row (2+2) #13

  10. Click Footer and choose Footer 3

  11. Click Save,
    ->then set up your section settings
    (assign collections, products, headings, etc).

Setup Navigation

Some of the main features of Banita theme are the Header/Spy/Mobile Navigations.

You can use our sections constructor for creating an exclusive style with columns or simple dropdowns, previews etc OR simply for assigning navigation that you have created before. We enable you to choose the megamenu constructor or using default shopify navigation (for example if you want to use simple dropdowns and you have already created navigation).




1. Default Shopify navigation usage

It is useful if you want to have a classic style with simple unlimited dropdowns and you don't want to re-write an old navigation just for the theme again. You can find the info on how to build the simple navigation with Shopify tools in the official source athttps://help.shopify.com/manual/sell-online/online-store/menus-and-links#create-a-drop-down-menu

After having created the navigation successfully, you have to assign it in the header section




2. Megamenu usage based on the sections.



1. Select None in the default navigation.

2. You need to click in Header at the bottom 'Add content'



3. Choose simple dropdown or column. Columns allow you to add the left/right/top/bottom html content, banners from our banners generator and assign navigation columns (one classic navigation equals to one column in the dropdown)

Interface for Simple 1st level item

Header only / Spy menu only / Both
the label is above the item
pre-defined colors for labels
here You can select navigation(You have to create it in advance)

Interface for Columns 1st level item

Rare feature. You can make your dropdown either fullwidth(if header is fullwidth) or boxed
Header only / Spy menu only / Both
label above the item
pre-defined colors for labels
2 / 3 / 4 / 5 / 6
[optional] column preview
(all previews for current
dropdown must have the same
width/height for better view)
[optional]
[optional] Column Title Url
[optional]
the same options for all 15 columns in current columns dropdown
[optional] This zone is on the left side from the columns.
We advise to use our interactive banners editor to create the banner code and past it here.
20% / 25% / 30% / 40%
[optional] This zone is on the right side from the columns.
We advise to use our interactive banners editor to create the code and past it here.
20% / 25% / 30% / 40%
[optional] This zone is at the top side from the columns.
[optional] This zone is at the bottom side from the columns.

Spy Navigation

Exclusive feature for Shopify Banita Theme



Main goal was to develop the header and spy left panel with using one navigation in the admin panel.
->Spy menu can be a mirror of the header navigation, or it can have own set of menu items.
->Spy menu can have another setup of items only if the header menu is made with our sections constructor.
->Spy menu can be enabled/disabled in general options of the theme.

Set Navigation Labels

You can see labels in each navigation (header, spy, mobile) in our demo


There are two ways to setup labels for the 1st level of navigation. It depends on the type of navigation you have chosen.

If you have created the header navigation with sections then each section has such label option for the 1st level. You can read how to set up navigation here

All the other labels for the 1st level (if you have chosen default shopify navigation) or for the 2nd and higher level (for default and for megamenu navigation) you have to set up as following:


Go to Shopify admin -> Online Stores -> Themes -> Customize Theme -> General Settings -> Navigation Header/Spy -> Labels for navigation items

Product

You can read how to add/update the product in the official shopify article at https://help.shopify.com/manual/products/add-update-products

Unlike old Shopify, new Shopify product settings are visible when you click on some item in the right window(iframe).





Full list of main product settings:

5/12, 6/12, 7/12 of site width
Useful option for disabling/enabling image zoom
Useful option for disabling/enabling previous and next products in breadcrumbs
Shows such block (how to setup for each product individually click here)

Original html code is:

//copy lines from here if you want revert code in texarea

Individual/Global text block

90% Positive Customer feedback


Shows such block (how to setup for each product individually click here)

Original html code is:

//copy lines from here if you want revert code in texarea
Individual/Global text block

Spend $50.00 more and get free shipping or join Bike+ for free shipping on every order, every time. *Excludes gift cards.

These are the static product tabs.
You can read how to add unlimited count of custom tabs here
We took out time to make a rich regulatory mechanism for related products
Each section with product carousel has such responsive options

Product Countdown

Instead of pasting shortcodes like in many other themes directly in product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the countdown of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield


  4. Metafields Guru page for this product will be opened:


  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill countdown in the field 'key'
    • Fill 2019/12/31 in the content (bottom) field


  6. Click Save button to save metafield
  7. Return to the product page
  8. Fill the field 'Compare at price'


    Important! If Compare Price is empty Countdown will not be shown

  9. Apply the tag sale to the product to make the tags collection filter work accurately

New/Sale/Pre-order Labels


How to add a new label:

1. Go to Shopify admin -> Products -> Products

2. Choose any product and Click

3.Set product tag new


4. Click Save


How to add a sale label:

1. Go to Shopify admin -> Products -> Products

2. Choose any product and Click

3. Add Compare Price


4. Click Save


How to add a pre-order label:

This label appears automatically if you setup Invertory policy - Shopify tracks this product's invertory and when quantity becomes 0


4. Click Save

Product Video

Instead of pasting shortcodes like in many other themes directly into product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the video of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield


  4. Metafields Guru page for this product will be opened:


  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill video in the field 'key'
    • Fill https://www.youtube.com/watch?v=_9VUPq3SxOc in the content (bottom) field
      copy youtube url directly from browser address bar
    • * View source code button must be checked!


  6. Click Save button to save metafield

Product / Short Description


Instead of pasting shortcodes like in many other themes directly into product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the description of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield


  4. Metafields Guru page for this product will be opened:


  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill introtext in the field 'key'
    • Fill Neque porro quisquam labore in the field 'value'
      also you can write any html/css here
  6. Click Save button to save metafield

Product / Custom Block 1

This block can be identical for all products at the same time, and different or fully disabled individually for each product.

If you want to make this block global for all products then in main product settings you can enable and setup it



and

If you want to make this block individual for certain products then you have to add special metafield for them.

Instead of pasting shortcodes like in many other themes directly into product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the custom block 1 of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield


  4. Metafields Guru page for this product will be opened:


  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill list in the field 'key'
    • Fill <p><i class="icon-check-square"></i> 80% Positive Customer feedback</p><p><i class="icon-check-square"></i> 100+ Items bought</p> in the field 'value'
      you can write any html/css here
      or If you want to disable this block individually then write symbol - in value
  6. Click Save button to save metafield

Product / Custom Block 2

This block can be identical for all products at the same time, and different or fully disabled individually for each product.

If you want to make this block global for all products then in main product settings you can enable and setup it



and

If you want to make this block individual for certain products then you have to add special metafield for them.

Instead of pasting shortcodes like in many other themes directly into product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the custom block 1 of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield


  4. Metafields Guru page for this product will be opened:


  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill shipping in the field 'key'
    • Fill <h5>Individual/Global text block</h5><p>Spend $50.00 more and get free shipping or join Bike+ for free shipping on every order, every time. *Excludes gift cards.</p> in the field 'value'
      you can write any html/css here
      or If you want to disable this block individually then write symbol - in value
  6. Click Save button to save metafield

Product Tabs



Such tabs as Description, Sizing Guide, Global Tab for products, Assigned Tags, Reviews you can edit in the main product settings.



BUT

Also you can make custom tabs for each product individually.

Instead of pasting shortcodes like in many other themes directly into product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the custom block 1 of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield


  4. Metafields Guru page for this product will be opened:


  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill custom_tab_title_1 in the field 'key'
    • Fill Custom Tab Title 1 in the field 'value'
      key custom_tab_title_N, where N is integer number from 1 to 10
    • Fill c_f in the field 'namespace'
    • Fill custom_tab_content_1 in the field 'key'
    • Fill Content for Custom Tab 1 in the field 'value'
      you can write any html/css here
      key custom_tab_content_N, where N is integer number from 1 to 10
      N for title and content must be the same
    • Click Save button to save metafield

BONUS: If you want to disable all the tabs for certain product individually then fill in metafield with namespace/key/value c_f/notabs/yes

Line properties

From the start we advise to read an official article from Shopify about line properties https://help.shopify.com/themes/customization/products/features/get-customization-information-for-products

We are delighted to inform you that there is no need to hire Shopify Expert for implementing line properties and spend a lot of money on it. It has already been implemented in both modes:ajax add to cart / without ajax add to cart

But it was insufficient for us, that is why we have implemented line properties with Shopify UI Elements Generator. Just generate fields in one click and paste NOT in the theme files code as described in the official manual, but paste the generated fields into the special product metafield. This option allows you to create different complex/simple configurable products. You can see a simple example in our demo

How to make line properties for the product

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield


  4. Metafields Guru page for this product will be opened:


  5. Click Create Metafield button
    • Fill c_f in field 'namespace'
    • Fill line_properties in the field 'key'
    • Fill <p class="line-item-property__field"> <label for="line-property">Line property</label> <input id="line-property" type="text" name="properties[Line property]"> </p> in the field 'value'
  6. Click Save button to save metafield

How to create colorized product

Product can be colorized only if it has a color option.

How to do it :

1. Go to Shopify admin -> Products

2. Choose any product and Click

3. Add product variants


3. Change Size to Color or click Add another option (Color)


4. It is possible to add images for options once the option values have been saved.


5. Final step. Upload color pics.

Important! Save image name only in downcase format 'color-yourcolorname.png' (use symbol "-" in yourcolorname instead of spaces)

For example, You have color name in admin product option 'Dark Black', then upload color-dark-black.png


Important! Prefix color- is required! Use only PNG format.

BONUS: You can change swatches to classic forms or change swatches style in Theme settings / General Settings / Products swatches

Collection

Real actions can corroborate our words when speaking about flexible collection

Useful features of the Banita's collection page:

  1. Collection is based on the sections



  2. Collection has own independent width mode either fullwidth or boxed or global site width.



  3. Toolbar with sorting/grid/list can be placed in the sidebar or above the products.



  4. Sidebar filter has UNLIMITED groups of filter tags. Each collection shows own set of filter groups (filter recognizes the tags assignment in the current collection).

    Each filter group has four view styles:pics, sizes, tags, list

    width="260"

  5. Two sidebar filter modes:accordion and classic

    Accordion mode

    look in demo

    Classic mode

    look in demo

Setup sidebar filter

Sidebar filter is based on tags. Tags must be assigned for products according to own criteria.


Product has tags:Sim 1, electronics, Andriod, Acer, Above 200, 4

If you click on some tag on sidebar filter the module starts to search for all products with the chosen tag.

Q:How sidebar filter divides into logic groups?

A:You have to do it yourself:

Go to Shopify admin -> Online Stores -> Themes -> Customize Theme -> Click on any collection link on window on the right


Add filter group


Example shown beneath has been made on demo in filter groups:



Available options for filter group:

  • Enable - type checkbox. Default checked
  • Title - type text. Title of the group

  • Tags - type textarea. Tags, separated by comma

  • Closed by default - type checkbox. Default unchecked. Is applicable only for NOT accordion mode.
  • Style - type selectbox. Available values: List(default) / Sizes / Pics / Tags

    Pics

    List

    Sizes

    Tags


    if you use Pics style you have to upload pics here Shopify admin -> Settings -> Files -> Upload Files


    Upload special format of file name color-{{tagname}}.png

    For example, You have filled the tags in the group: Black, yellow, Dark-blue. You need to upload files color-black.png, color-dark-blue.png, color-yellow.png with 25x25 px size

Collection Description


Description can usually be edited in the collection description area, but if you'd like to have such a description style used in demo, paste the next code into to the collection description area (enable html mode).

								
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deserunt, repellendus! Tempora, atque ipsum. Praesentium voluptatibus pariatur architecto aliquid consequuntur iste earum asperiores quibusdam ut fuga, voluptate itaque velit, natus sunt! Nisi temporibus quos blanditiis quibusdam ex! Consectetur praesentium modi doloribus, sint. Accusamus enim, asperiores numquam animi dolore quam aliquid.

All icon codes can be found in package/Icons font/icomoon-reg/demo.html

Collection Products Grid

Go to Shopify admin -> Online Stores -> Themes -> Customize Theme -> Click on any collection link in right window

Blog

Full info is available in the official shopify doc at https://help.shopify.com/manual/sell-online/online-store/blogs

Your Shopify store comes with a built-in blogging engine. Blogs are great for the content that you’ll be updating regularly. They’re also the best if you want to encourage the feedback under the blog. Choose to post on your store’s blog if you’re looking to create a discussion and build a community around your products and your brand.

Demo Example of Banita Blog List + Sidebar

Demo Example of Banita Blog 2 post per row

Demo Example of Banita Blog 3 post per row

Demo Example of Banita Blog 4 post per row

We have made useful options for the blog page and post page. Independent width for the blog, for the post (boxed, fullwidth or global site width). Enable/disable the sidebar for the blog/post, posts count per page/per row.

Slider

Create as many sliders per one page as you want and place them in any place of your home page content area.

Desktop preview


Mobile preview

You can discover an amazingly powerful section slideshow using our theme.

Our slider consists of animations, youtube videos, unlimited slides, height option, width option, a lot of options. Use your imagination and create the dream slider with easy-to-use tools on the admin panel. Or apply pre-defined slides from our demo.

How to set up slider:

Add new section Slideshow

You can see general main settings of the slider such as width(fullwidth, boxed, global site width), auto-rotate, rotation speed, slider height (small, medium, fullheight)

Two demo slides are created automatically. You can remove them or alter.

How to set up slide:

Click Add slide

Upload slide image, each slide must have the same width and height.
For example, we have uploaded slides 1920x820 px in our demo
Top / Middle / Bottom
None / Use slide image with play button / Background video with play button /
Background video without play button
New Page / In current page

If checked then only button will be a link, if unchecked then full slide will be a link
Left / Center / Right
75+ animations
Design and animate 3 captions per slide
Left / Center / Right
Top / Middle / Bottom
75+ animations
Use parent alingment / Left / Center / Right
Thin / Light / Regular / Semibold / Bold / Black
Extra Small / Small / Medium / Large
for advanced users, this css will be assigned to caption 1
the same options are for the caption 2,3

Newsletter

Banita theme supports both default shopify subscription and mailchimp as a bonus.

Flexible options for newsletter subscription:

Default shopify subscription is used in all newsletter forms.
This mode turns the mailchimp subscription on. You have to register MailChimp account and get action url for theme newsletter form.

Read the official source at how to get a newsletter action url


If you use default shopify subscription:When someone signs up for your newsletter, their email address is added to the "accepts marketing" customer list. This can be seen in the Customers section on the left side of your Shopify admin

Create Contact Us page

1. Login to Your shopify store. Go to Online Stores -> Pages.

Next



2. Click Add page



3. Choose template page.contact, write Page Title Contact Us and click save

Click Save

You have created your 'Contact Us' page. You can add the Contact page to any navigation.

Next step edit Contact Page:

1. Go to Online Store



2. Click Customize



3. Find and click Contact us from navigation



4. Edit Contact us sections

Create About Us page

1. Login to Your shopify store. Go to Online Stores -> Pages.

Next



2. Click Add page



3. Choose template page.about-us, write Page Title About Us and click save

Click Save

You have created your 'About us' page. You can add the 'About us' page to any navigation.

Next step edit 'About us' page:

1. Go to Online Store



2. Click Customize



3. Find and click About Us from navigation



4. Edit About Us sections

Create Faq page

1. Login to Your shopify store. Go to Online Stores -> Pages.

Next



2. Click Add page



3. Choose template page.faq, write Page Title Faq and click save

Click Save

You have created your 'Faq' page. You can add the 'About us' page to any navigation.

Next step edit 'Faq' page:

1. Go to Online Store



2. Click Customize



3. Find and click Faq from navigation



4. Edit Faq sections

Colorization

We have attached full colorization settings. Some of the colors are in the sections.

Banners / Grid Editor

You do not need to know html and css to create advanced banners and bootstrap grids in Banita theme.

In order to make your life easier we have created online banners editor.

You can use it at http://frontend.big-skins.com/banita/banners-generator/

FAQ