Monday to Friday 10:00 am - 18:00 pm
video instructions
support


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://big-skins.com/support 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

Usefull manuals

How do I 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 site itself so You don’t have to worry about installing, upgrading or maintaining any software or web servers. Go here to install shopify

Seiko Installation & Update

1st be sure that You've installed shopify
2nd You need have latest seiko package from themeforest

Theme Install

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



2.Click Upload Theme



3.Browse local seiko theme zip package and upload



4.Click Publish theme.


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

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

Now that you have created your Contact page, you can add your Contact page to your main navigation menu.

Create Wishlist page

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

Next



2.Click Add page



3.Choose template page.wishlist, write Page Title My Wishlist and click save

Click Save

Now that you have created your Wishlist page, you can add your Wishlist page to your main navigation menu.

Product reviews app

Shopify has no product stars, 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 (or press G S):


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:

                    //copy lines from here
                    ${{amount}} USD
                    ${{amount}}

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 not saves Your own files custom changes:
1.Upload 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:

Index: layout/theme.liquid
===================================================================
--- layout/theme.liquid	(revision 109)
+++ layout/theme.liquid	(revision 110)
@@ -17,12 +17,12 @@
     

         {% include header %}
         

-                    {% 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}}
         

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

This means that was changed file layout/theme.liquid

You need go to Shopify admin -> Online Stores -> Themes and click Edit HTML/CSS

Click on file layout/theme.liquid in left sidebar

Goto diff file again:

- {% 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 %}

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

Theme Customization

There 2 ways customize theme:

  1. Change theme settings

    Goto 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 HTML/CSS

How add custom css file?

Difficult customization of theme requires style changes in css. Theme has main assets/style.css file. You can directly add own changes in that file, but it is bad for updates. It is easy in future simply replace old style.css with new style.css.

That is why we propose create own custom.css file and write changes in it.

Steps how create custom.css:

  1. Goto Shopify admin -> Online Stores -> Themes -> Choose your theme -> Edit html/css


  2. Click Assets -> Add a new asset -> Create a blank file -> Write 'Custom' -> Choose '.css' -> Click 'Add Asset'


  3. Click custom.css -> Add a new css changes -> Save


  4. Last step is adding custom.css in head.liquid

    Click Snippets -> Click head.liquid -> write {{ 'custom.css' | asset_url | stylesheet_tag }} after {{ 'font-icomoon.css' | asset_url | stylesheet_tag }} -> Save


Seiko Home Pages

Seiko theme has 8 pre-defined home pages:

  • Wide

    Pre-defined home page choosed as default

  • Classic

    Pre-defined home page

    To choose it Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> General - Global Settings ->Home Page choose in selectbox Home Page 2

  • Journal

    Pre-defined home page

    To choose it Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> General - Global Settings ->Home Page choose in selectbox Home Page 3

  • Banners

    Pre-defined home page

    To choose it Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> General - Global Settings ->Home Page choose in selectbox Home Page 4

  • Fullscreen Slider

    Pre-defined home page

    To choose it Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> General - Global Settings ->Home Page choose in selectbox Home Page 5

  • Amazon

    Pre-defined home page

    To choose it Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> General - Global Settings ->Home Page choose in selectbox Home Page 6

  • Lookbook

    Pre-defined home page

    To choose it Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> General - Global Settings ->Home Page choose in selectbox Home Page 7

  • Categories

    Pre-defined home page

    To choose it Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> General - Global Settings ->Home Page choose in selectbox Home Page 8

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

Structure of Home Page

Every home page pre-defined in seiko divided by sections вesides Header and Footer.

Schematic representation:

Every home page has 6 sections.

You can choose in admin any block for current section.

Creation Classic home page

Example creation Classic home page

There 2 ways set Classic Home page.

You can simply choose pre-defined Classic home page(Shopify admin/Online Stores/Themes/Customize Theme/General/Pre-defined Home Page/Classic) or set it manually as described in next steps:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme


Choose in theme settings Home Page - Default:

Choose next options:

  • Header - choose from selectbox Use Global (Global settings in Tab General - Global Settings)
  • Select Header Box Type - choose from selectbox Fullboxed
  • Footer - choose from selectbox Footer 2
  • Enable Left Panel - checkbox false
  • Boxed - checkbox true
  • Section 1 - choose from selectbox Banners carousel
  • Section 2 - choose from selectbox Welcome To Content
  • Section 3 - choose from selectbox Products Carousel 3
  • Section 4 - choose from selectbox Static Banner
  • Section 5 - choose from selectbox New products advantages
  • Section 6 - choose from selectbox From Blog, Deal, Contact Info

In turn, You have to configure each selected section in the admin area.

For example we choosed for "Section 3 - choose from selectbox Products Carousel 3"

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme

You will find there this Section block


For example we choosed for "Section 4 - choose from selectbox Static Banner"

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme

You will find there this Section block - Section Banner

There no need have css/html skill to write banners grid code. We've created easy tool for You - Banners generator. Generate code there and paste here.

Video tutorial how use Banners Generator.

Creation Banners home page

Example creation Banners home page

There 2 ways set Banners home page.

You can simply choose pre-defined Banners home page(Shopify admin/Online Stores/Themes/Customize Theme/General/Pre-defined Home Page/Banners) or set it manually as described in next steps:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme


Choose in theme settings Home Page - Default:

Choose next options:

  • Header - choose from selectbox Use Global (Global settings in Tab General - Global Settings)
  • Select Header Box Type - choose from selectbox Fullwidth
  • Footer - choose from selectbox Use Global (Global settings in Tab General - Global Settings)
  • Enable Left Panel - checkbox false
  • Boxed - checkbox true
  • Section 1 - choose from selectbox Section Banners Grid 1
  • Section 2 - choose from selectbox Section Products Grid
  • Section 3 - choose from selectbox Section Banners Grid 2
  • Section 4 - choose from selectbox From Blog, Deal, Contact Info
  • Section 5 - choose from selectbox None
  • Section 6 - choose from selectbox None

In turn, You have to configure each selected section in the admin area.

For example we choosed for "Section 1 - choose from selectbox Section Banners Grid 1"

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme

You will find there this Section block - Section Banners Grid 1

There no need have css/html skill to write banners grid code. We've created easy tool for You - Banners generator. Generate code there and paste here.

Video tutorial how use Banners Generator.

Creation Default Wide home page

Example creation Default Wide home page

There 2 ways set Classic Default page.

You can simply choose pre-defined Default home page(Shopify admin/Online Stores/Themes/Customize Theme/General/Pre-defined Home Page/Default) or set it manually as described in next steps:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme


Choose in theme settings Home Page - Default:

Choose next options:

  • Header - choose from selectbox Use Global (Global settings in Tab General - Global Settings)
  • Select Header Box Type - choose from selectbox Fullboxed
  • Footer - choose from selectbox Use Global (Global settings in Tab General - Global Settings)
  • Enable Left Panel - checkbox true
  • Boxed - checkbox false
  • Section 1 - choose from selectbox Slider 1
  • Section 2 - choose from selectbox Products Carousel 1
  • Section 3 - choose from selectbox Products Carousel 2
  • Section 4 - choose from selectbox From Blog, Deal, Contact Info
  • Section 5 - choose from selectbox None
  • Section 6 - choose from selectbox None

Setup Navigation

Seiko theme has 2 type of menu - Simple And Megamenu. Your top navigation in header can be at the same time simple dropdown and megamenu dropdown. You can see how it works in our demo https://seikostore-default.myshopify.com

Simple Menu

This material is taken from official sources https://help.shopify.com/manual/sell-online/online-store/menus-and-links#create-a-drop-down-menu

This type of menu in Seiko by default.

Create a drop-down menu

A drop-down menu displays a list of links when Your customer hovers their mouse over it.


  1. From Your Shopify admin, click Online Store, and then click Navigation.

    The navigation page of most new stores has both a Main Menu menu and a Footer menu. You can make drop-down menus on Your storefront from any link in the Main Menu.

  2. Click Add menu.

  3. Type in the name for Your navigation. The handle will be automatically generated for You (do not edit it):


    For this walkthrough to work, the name You enter MUST be the same as the name of the link in Your Main Menu that You wish to drop-down from. Because we want to drop-down from Catalog, we will name our menu "Catalog".

  4. Click Add menu item one time for each link You want to include in Your drop-down menu.

  5. For each link You've clicked to add, type in a Name, then click Link drop-down box and choose Your destinations for these links (e.g. You can link to specific collections, all products, or pages etc.)

  6. Click Save

  7. To check Your work, click back into the Navigation page of Your admin. You should have a new menu with the same name as one of the Main Menu links, like this:

  8. You can check Your work in Your storefront

Megamenu

You can set megamenu only for 1st level navigation items in Your top navigation.

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Megamenu


There You find such options Enable dark overlay on hover and Appearing style (none, fade, slide)

By default all 1st level items in navigation have simple type of dropdowns.


How convert Simple dropdowns to Megamenu dropdowns?

It is very easy. You just need set Apply Megamenu Dropdown for needed 1st level item.

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Megamenu

You see next:


Our simple menu contains 1st level items: 1st Layouts, 2nd Women, 3rd Men etc

If You want to do for Women Megamenu - You just have to set Apply Megamenu Dropdown - checkbox Yes for Item 2nd


Every Megamenu item has 9 options:

  • Apply Megamenu Dropdown - type checkbox. This option apply that this item will have megamenu behavior
  • Assign menu handles, sepparated by comma - type textarea. Every column in megamenu dropdown is separated navigation. Write here menu-handles.
  • Columns in one row - type selectbox. Here You can choose 2/3/4/5/6 columns visible in one row
  • Top Html Container - type textarea. Here You can write any html content You want see in the Top of Megamenu dropdown in current item.
  • Bottom Html Container - type textarea. Here You can write any html content You want see in the Bottom of Megamenu dropdown in current item.
  • Left Html Container - type textarea. Here You can write any html content You want see in the Left of Megamenu dropdown in current item.
  • Left Html Container - width - type selectbox. Here You can choose 20%/25%/33%/40%
  • Right Html Container - type textarea. Here You can write any html content You want see in the Left of Megamenu dropdown in current item.
  • Right Html Container - width - type selectbox. Here You can choose 20%/25%/33%/40%

Schematic Layout of Megamenu dropdown:

See video guide megamenu dropdown creation

Set Megamenu Images & Limits & Video

In our demo You can see preview links in topnavigation


Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Megamenu -> Assign menu handles, sepparated by comma


Here we see menu handles, separated by comma

Such code use only for columns with menu items : menuhandle, menuhandle, menuhandle (by default)

Such code use only for columns limited 5 visible items : menuhandle|5, menuhandle|5, menuhandle|5

Such code use only for columns with images : menuhandle||path_to_image, menuhandle||path_to_image, menuhandle||path_to_image

Such code use only for columns limited & images : menuhandle|5|path_to_image, menuhandle|5|path_to_image, menuhandle|5|path_to_image

path_to_image - any image path, easy way upload preview in admin/settings/files (max recommended width 500px)


Example code for Video like in demo

Next Code you can insert in any megamenu html area (left / right / top / bottom)

Hover video to play it

If you want hide video in mobile use class 'hidden-xs'

Set Navigation Labels

In our demo You can see labels in topnavigation


Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Megamenu -> Labels for navigation items


As You can see all Labels were filled in one place. We decided that this method is more easy way to keep them.

Important rule separate them with ";"
First part is Navigation item Title:Second part Title of the Label:Third is optional (if You want blue color write alt)

For example, I want red label with discount -50% on Navigation Item 'Sale' - write "Sale:-50%"
For example, I want blue label with discount -50% on Navigation Item 'Sale' - write "Sale:-50%:alt"

Product

Seiko theme has two product view designs Classic (by default) and Creative.

Classic

Creative

Creative design works only if product has 3 or more images, otherwise will be enabled Classic design automatically.

Q:How enable Creative design?

A:1.Goto Shopify admin -> Products -> Products


2.Choose any product and Click. After you will see next field called Template in product admin page

3.Select product.creative and click Save


Setup your product view with General Product Options:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Product page


Available options for product are:

  • Product Image size - type selectbox. Available values: small / medium(default) / medium+ / large
  • Prev Next products - type checkbox. Default checked
  • Show rating stars - type checkbox. Default checked
  • Show availability - type checkbox. Default checked
  • Show related products - type checkbox. Default checked
  • Show short description - type checkbox. Default checked
  • Show right description - type checkbox. Default checked
  • Right description - type textarea.
    Default code:
                                //copy lines from here if you want revert code in texarea
                            
    
                                
    
                                    
                                    
                                
    
                                
    
                                    
    
                                        Special offer: 1+2=4
                                    
    Get a gift!
                                
    
                            
    
                            
    
                                
    
                                    
                                    
                                
    
                                
    
                                    
    
                                        Free Reward Card
                                    
    Worth $10, $50, $100
                                
    
                            
    
                            
    
                                
    
                                    
                                    
                                
    
                                
    
                                    
    
                                        Order return
                                    
    Returns within 5 days
  • Product ajax add to cart - type checkbox. Default checked
  • Show options - type selectbox. Available values: as selectboxes / as swatches(default)
  • Product tab Description - type checkbox. Default checked
  • Product tab Description title - type text. Default Description
  • Product tab 2 - type checkbox. Default unchecked
  • Product tab 2 title - type text. Default empty
  • Product tab content from page - type selectbox . Available values: all Pages from Shopify admin

    For example, you want create tab Sizing Guide:

    1. Check Product tab 2
    2. Create Page Sizing Guide in Shopify admin -> Online Store -> Pages -> Add Page
    3. Set Title - Sizing Guide
    4. Paste Html to content area.
          //copy html from here
    
      
		Single Size Conversion
	
      
    
      
		
      
			
				
      
					
						
							UK
						
					
					
						
        
							
      • 
								18
							
        • 
							
      • 
								20
							
        • 
							
      • 
								22
							
        • 
							
      • 
								24
							
        • 
							
      • 
								26
							
        • 
						
      
					      		
				
      
				
      
					
						
							European
						
					
					
						
        
							
      • 
								46
							
        • 
							
      • 
								48
							
        • 
							
      • 
								50
							
        • 
							
      • 
								52
							
        • 
							
      • 
								54
							
        • 
						
      
					      		
				
      
				
      
					
						
							US
						
					
					
						
        
							
      • 
								14
							
        • 
							
      • 
								16
							
        • 
							
      • 
								18
							
        • 
							
      • 
								20
							
        • 
							
      • 
								22
							
        • 
						
      
					      		
				
      
				
      
					
						
							Australia
						
					
					
						
        
							
      • 
								8
							
        • 
							
      • 
								10
							
        • 
							
      • 
								12
							
        • 
							
      • 
								14
							
        • 
							
      • 
								16
							
        •
    5. Click Save
    6. Go back to Shopify admin -> Online Stores -> Themes -> Customize Theme -> Product page
    7. In Product tab content from page select recently created page Sizing Guide

  • Product tab 3 - type checkbox. Default unchecked
  • Product tab 3 title - type text. Default empty
  • Product tab content from page - type selectbox . Available values: all Pages from Shopify admin

    You can create your own tab title with content as described for Product tab 2 above

  • Product tab tags - type checkbox. Default checked
  • Product tab tags title - type text. Default Assigned tags
  • Product tab reviews - type checkbox. Default checked Important! Reviews will work only if you installed reviews app. Read more here
  • Product tab reviews title - type text. Default Reviews

Product Countdown


Instruction how to add:

1.Goto Shopify admin -> Products -> Products


2.Choose any product and Click

3.Add shortcode to content area [countdown]2017/12/31[/countdown] Important! If you use one or more shortcodes you must once write next shortcode |[config]| (this shortcode separates default product descriptiom from seiko theme shortcodes)

Full version [countdown]2017/12/31[/countdown]|[config]|


If more than one shortcode [countdown]2017/12/31[/countdown][video]http://www.youtube.com/watch?v=qZeeMm35LXo[/video]|[config]| ([config]| was written once)

4.Add Compare Price


Important! If Compare Price empty Countdown will not be shown, because in files:

  • snippets\product-item.liquid
  • snippets\product-page-design-default.liquid
  • snippets\product-page-design-creative.liquid

I've added condition

{% if on_sale %} // this condition
    
{% endif %} // this condition

You can remove condition if you want set countdown without Compare at price

5.Optional - We advice you set for sale products tag sale for better work collection tags filter


New/Sale Labels


Instruction how to add new label:

1.Goto Shopify admin -> Products -> Products


2.Choose any product and Click

3.Set product tag new


4.Click Save


Instruction how to add sale label:

1.Goto Shopify admin -> Products -> Products

2.Choose any product and Click

3.Add Compare Price


4.Click Save

Product Video


Instruction how to add:

1.Goto Shopify admin -> Products -> Products


2.Choose any product and Click

3.Add shortcode to content area [video]http://www.youtube.com/watch?v=qZeeMm35LXo[/video] Important! If you use one or more shortcodes you must once write next shortcode |[config]| (this shortcode separates default product descriptiom from seiko theme shortcodes)

Full version [video]http://www.youtube.com/watch?v=qZeeMm35LXo[/video]|[config]|


If more than one shortcode [countdown]2017/12/31[/countdown][video]http://www.youtube.com/watch?v=qZeeMm35LXo[/video]|[config]| ([config]| was written once)

4.Click Save

Short Description


Instruction how to add:

1.Goto Shopify admin -> Products -> Products


2.Choose any product and Click

3.Add shortcode to content area [short_description]Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nonkdni numquam eius modi tempora incidunt ut labore [/short_description] Important! If you use one or more shortcodes you must once write next shortcode |[config]| (this shortcode separates default product descriptiom from seiko theme shortcodes)

Full version [short_description]Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nonkdni numquam eius modi tempora incidunt ut labore [/short_description]|[config]|


If more than one shortcode [countdown]2017/12/31[/countdown][short_description]Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nonkdni numquam eius modi tempora incidunt ut labore [/short_description]|[config]| ([config]| was written once)

4.Click Save

How create colorized product?

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

Instruction how to do it :

1.Goto Shopify admin -> Products -> Products


2.Choose any product and Click

3.Add product variants


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


4.After saving option values appears ability add images for options


5.Finish step. Add color pics for configurable swatches (product and collection page)

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

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


Important! Prefix color- is required! And only PNG format for color pics.

Collection

Setup your product view with General Product Options:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Collection page


Available options for collection page are:

  • Enable Sidebar - type checkbox. Default checked
  • Number of products per row - type selectbox. Available values: 2 / 3(default) / 4 / 5
  • Default Count of products per page - type selectbox. Available values: 12(default) / 18 / 36 / All
  • Grid Previews Style - type selectbox. Available values: Small(default) / Big
  • Enable collection description - type checkbox. Default checked

    This option enables/disables this description.


    There no need to know html code create such description, because we created Online Banners Editor. See video guide how we created html code for description.

    Generated description code like in demo

                                //You can copy ready generated html here
                            
    
                                
    
                                    
                                
    
                                
    
                                    
                                
    
                            
    
                                Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui.
                            
    
                                
    
                                    
    
                                        
                                            
    
                                                #
                                            
    
                                            
    
                                                Jackets
                                            
    
                                            
                                    
    
                                    
    
                                        
                                            
    
                                                #
                                            
    
                                            
    
                                                HOODIES
                                            
    
                                            
                                    
    
                                    
    
                                        
                                            
    
                                                #
                                            
    
                                            
    
                                                ACCESSORIES
                                            
    
                                            
                                    
    
                                    
    
                                        
                                            
    
                                                #
                                            
    
                                            
    
                                                Bras & Tanks
  • Categories - type textarea. Here you can write separated by comma menu handles if you want categories filter in sidebar.

    We advice create ONE navigation handle for this.

Toolbar


  • Enable collection toolbar - type checkbox. Default checked
  • Default listing style - type selectbox. Available values: Grid(default) / List
  • Enable only default listing style - type checkbox. Default unchecked (there no ability change to grid or list, only default)

Sidebar Filter


  • Filter Ajax - type checkbox. Default checked
  • Filter Fixed - type checkbox. Default checked

    If checked - filter fixed and collapsed as accordion

    If unchecked - filter static and groups are opened

  • Enable Shopping by Tag - type checkbox. Default checked (show currently choosen filter)

Setup sidebar filter

In contrast to our top competitors on TF, we completely redesigned filter.

Early often was principle when you had ~ 5 filter groups of tags hardcoded to the theme : Price, Brands, Popular Tags, Sizes

And the bigest problem was that these filter groups were are same for all categories (Women, Men, Electronics

Now every category has own set Of filter groups.

Women

Electronics

Sidebar filter based on tags. Tags must be assigned for products by your own criterias.


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

If you click some tag in sidebar filter module searchs all products with clicked tag.

Q:How Sidebar filter collects and distributes all tags from all products by logic groups.

A:You have to do it yourself:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Collection page

There filter groups:



1 Group Tags Filter It is Group that collects associated within the meaning of the tags

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
  • 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 Filled tags in group: Black, yellow, Dark-blue. You need upload files color-black.png, color-dark-blue.png, color-yellow.png with 25x25 px size

    Sidebar filter has 10 different groups. Count of groups can be extended in code.

Blog

This material is taken from official sources https://help.shopify.com/manual/sell-online/online-store/blogs


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

Slider


Admin panel allows you upload main slide image.

In admin exists separated textarea Text Animation, where you can add animated captions

We use popular swiper slider.

Animation rules / data-parameters and demo slides examples showed in Sliders animated items

Example code for video

Add a new blog

This material is taken from official sources https://help.shopify.com/manual/sell-online/online-store/blogs/getting-started-blogs

Create a new blog with a custom name for all your blog posts.

To add a new blog:

  1. From your Shopify admin, click Online Store, and then click Blog Posts

  2. Click Manage blogs:


  3. Click Add a blog:


  4. Give your blog a title and select how you want to manage comments:


  5. Click Save blog.

Now that you have created your blog, you can add your blog to your main navigation menu.

Add a post to your blog

This material is taken from official sources https://help.shopify.com/manual/sell-online/online-store/blogs/writing-blogs

To add a post to your blog:

  1. From your Shopify admin, click Online Store, and then click Blog Posts

  2. Click Add blog post:


  3. On the Add blog post page, fill out the following fields:

    • Title: enter the title of the article.
    • Content: enter the content of the article.
    • Author: select your name from the drop-down menu.
    • Blog: select where you'd like to publish your post.


    You must complete at least the title field to successfully create a blog post.

  4. In the Organization section, you can add tags to your blog posts to help categorize them and make them more visible for better search engine optimization (SEO):



  5. If you want an image to appear next to your post on your store's Blogs page, click Choose image in the Featured image section:



  6. Click Save.

Blog Layouts

Seiko Blog has 4 layouts:

list+sidebar

grid 2

grid 3

grid 4


Setup your blog view with Blog Options:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Blog


Available options for collection page are:

  • Blog Title - type text. Default Blog
  • Description - type textarea. Default We're a team of creative and make amazing site in ecommerce from Unite States. We love colour pastel, highlight and
    simple, its make our design look so awesome
  • Enable sidebar - type checkbox. Default checked
  • Blog layout - type selectbox. Available values: List (default) / 2 columns / 3 column / 4 columns
  • Enable comments - type checkbox. Default checked
  • Enable Tags - type checkbox. Default checked
  • Enable Instagram Images - type checkbox. Default checked

Newsletter

Shopify has no own newsletter subscribe functionality. You have to register MailChimp account and get action url for theme newsletter form.


Read official source how get newsletter action url


Setup your Newsletter:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Newsletter


Available options for Newsletter are:

  • Newsletter action - type textarea.
  • Enable newsletter popup - type checkbox. Default True
  • Logo for newsletter popup - type image.
  • Title For Popup - type text. Default Newsletter
  • Description For Popup - type textarea. Default Enter Your email address to sign up to receive our latest news and offers
  • Expires days for popup cookie - type text. Default 15

Instagram


We pasted instagram widget in blog in file snippets\blog-sidebar.liquid


                            {% include 'instagram-widget' %}

You can move and paste this widget in any other place of the site.

Required condition that you can show photos only from your account.

You have to generate accessToken (how get accessToken read here https://www.instagram.com/developer/authentication/ Client-Side (Implicit) Authentication)

Setup your Instagram widget:

Goto Shopify admin -> Online Stores -> Themes -> Customize Theme -> Instagram


Available options for Instagram are:

  • Instagram Title - type text. Default Instagram
  • accessToken - type text.
  • Limit photos - type text. Default 20
  • Sort By - type selectbox. Default Newest to oldest

Create About Us page

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

Next



2.Click Add page



3.Click Show Html and paste code from theme-package/documentation/demo_pages/about_us.txt

Click Save

Now that you have created your About Us page, you can add your About Us page to your main navigation menu.

FAQ

This page can be created fully as described in Create About Us page

Icons Font

Seiko Theme uses simply and flexible icon library IcoMoon.

IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists.

If you want to add new icon to library follow instruction, provided below:

1. Go to IcoMoon - Free -> Click Import Icons -> Upload there is our SeikoIconsMap:



All Seiko icons will be imported!



2. Then select new icon(s)



3. Generate your custom font



4. Download new Icons Set, unzip archive and replace all font files (icomoon-reg.eot, icomoon-reg.svg, icomoon-reg.ttf, icomoon-reg.woff) in 'customize theme/assets/' folder of Seiko Theme


5.Copy content of corner file style.css in new generated font folder -> remove all content in file 'customize theme/assets/font-icomoon.css' -> paste new content here. In new content remove all words 'fonts/' and save font-icomoon.css


6. Find new icon in demo.html and use it in your html code

For example like this:

1
2
3
<i class="icon icon-drink"></i>
<i class="icon icon-coffee"></i>
<i class="icon icon-mug"></i>

Banners / Grid Editor

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

We take care of your comfort and created online banners / grid editor.

You can use it http://seiko-shopify.big-skins.com/banners-grid-online-editor

But before We avice you see video tutorial how use it:

Video tutorial

Advanced options

Seiko Theme has many settings in admin panel, most of them are Global, but you can set any page Individual settings

For example, you want set global settings in Collections list - Products per row 4, but for special collection you want set Products per row 2

Instruction how to do:

1.Goto Shopify admin -> Products -> Collections

2.Choose collection you want show Products per row 2

3.In the begining of content area write products-per-row-2|[config]|


Important! |[config]| must be written once only at the beginning

Full list of special individual settings

Page Option Description
Collection products-per-row-2 Shows 2 products per page on collection page
Collection products-per-row-3 Shows 3 products per page in collection page
Collection products-per-row-4 Shows 4 products per page in collection page
Collection products-per-row-5 Shows 5 products per page in collection page
Collection grid-products-view-small Shows small product's previews in collection page
Collection grid-products-view-big Shows big product's previews in collection page
Collection collection-filter-ajax-1 Enable ajax for Sidebar filter in collection page
Collection collection-filter-ajax-0 Disable ajax for Sidebar filter in collection page
Collection collection-filter-fixed-1 Enable fixed collapsed Sidebar filter in collection page
Collection collection-filter-fixed-0 Disable fixed collapsed Sidebar filter in collection page. Enable static mode
Collection collection-left-sidebar-1 Enable left sidebar
Collection collection-left-sidebar-0 Disable left sidebar
Product product-image-size-small Set Small image on product Page
Product product-image-size-medium Set Medium image on product Page
Product product-image-size-medium-x Set Medium+ image on product Page
Product product-image-size-big Set Large image on product Page
Product product-options-select Set classic form elements on product page (instead of configurable swatches)
Product product-options-swatches Set form elements like configurable swatches on product page (instead of classic form elements)
Page special-header-default Set header default on cms page
Page special-header-2 Set header-2 default on cms page
Page special-header-3 Set header-3 default on cms page
Page special-header-4 Set header-4 default on cms page
Page special-header-5 Set header-5 default on cms page
Page special-header-6 Set header-6 default on cms page

Ready HTML backups for some theme fields in admin panel

It is useful data if you destroyed some code or cannot recreate your own

We tried use less html codes. It is used only in some places where specific html content.

Header

Code of SVG Logo (Seiko demo logo):

Short Address:

                         Adress: 8901 Marmora Road, 64 GR, New York

Shipping links:

                        
Original brands
Free shipping
Original product

Support time (for header 5):

                         Mon-Fri: 8:30am-7:30pm;  Sat-Sun: 9:30am-4:30pm

5.Social links (for header 6):

Top links (for header 6):

                        Your Seico.comGift Cards & RegistrySellHelp

Footer

Social icons:

1st column:

                        
INFORMATION

2nd column:

                        
MY ACCOUNT

3rd column:

                        
CUSTOMER CARE

4th column:

                        
CONTACT US

Contacts Us

Address 1 :

                        
ADDRESS 1
  • Adress: 8901 Marmora Road, Glasgow D04 64 GR, New York
  • Phone: 9823xxx
  • Fax: 123456789xxxx
  • Email: Seico@example.com

Address 2 :

                        
ADDRESS 2
  • Adress: 8901 Marmora Road, Glasgow D04 64 GR, New York
  • Phone: 9823xxx
  • Fax: 123456789xxxx
  • Email: Seico@example.com

Google map code :

Section Slider

Slide 1 - Text Animation:

                        
 Seikō 
 Season sale 
 popular brands 
 70% 
 OFF

Slide 2 - Text Animation:

                        
 Street 
 Fashion 
 And 
 Urban 
 Subcultures 
 SHOP NOW

Slide 3 - Text Animation:

                        
 Seikō 
 New collection 
 WOMEN'S FASHION 
 MORE

Slide 4 - Text Animation:

                        
Summer
very soon
Things to buy a swimsuit at a discount
SHOP NOW

Section From Blog / Deal / Contact Info

Contacts:

Section New, Advantages, Top Brands

Advantages Title:

                        
FASTEST SHIPPING
2 Days Express
FREE DELIVERY
On Orders Above $99
+15.000 Products
Best for Men & Women
More 400 Brands
Medela, Farlin, Combi,etc
30 DAYS RETURN
Policy We offers
SPECIAL OFFERS
Shop Big Save Big

Top Brands :

Brand LogoBrand LogoBrand LogoBrand LogoBrand LogoBrand LogoBrand LogoBrand LogoBrand LogoBrand LogoBrand LogoBrand Logo

Section Brands

Brands html:

                        
Brands
 Brand Logo  Brand Logo  Brand Logo  Brand Logo  Brand Logo  Brand Logo  Brand Logo  Brand Logo  Brand Logo  Brand Logo  Brand Logo  Brand Logo

Section Banners Grid 1-5

Goto Link here

FAQ

How Colorize only SVG logo?

By default SVG logo inherits Theme color, but you can colorize it individually. Just write such attribute to svg tag as style="fill: #000000;"

How invite staff account?

How can I add a home icon in the header?

Add new Item in navigation and write instead name