Shopify Sebian Guide

1.Introduction

Current Version 1.0.0 (July 27th, 2015)

ZooExtension.com always explores many Shopify Themes and gives you many surprise designs. And Shopify Theme Sebian will be the best example. With unique design, impressive color and hamonious texture, Shopify Theme Sebian is the perfect choice for any eCommerce website owners who always try to find out solutions that can boost up their sale and increase business growth.

In this document, we will find step by step instructions for installing and using this template effectively. Thank you so much for paying much attention to this tutorial. We would like to help you if you have any question relating to this.

2.Layout

This theme has a Responsive layout with one column. The general template structure is the same throughout the template.

This theme has 3 different layout modes – normal (for 960px or wider screens), tablet ( for screens smaller than 960px ) and mobile (for screens smaller than 768px). Adjust your browser window size to explore them closer.

1

Sebian uses HTML5, so it will NOT support legacy browsers such as Internet Explorer 6 & 7. Theme is usable with IE8, but not to full extent.

3.CSS Files

This theme has the CSS files styles.css.liquid

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Please follow these steps:

  1. Navigate Online Store > Themes> Edit HTML/CSS

1_1_1

  1. Find Assets and choose the filestyles.css.liquidthen edit the content as it needs to be

2_1

4.JavaScript

This theme uses Jquery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in global.js and this is the only file you may ever need to edit.

It is comparatively easy to find what you need to edit in gosh-scrip.js. Just open the file and look for init function. It initializes all other functions which you can recognize by the name.

5.Installing Theme

  • Open your Shopify admin panel and go to Online Store > Themes> Upload a theme in the top menu.

2_1(1)

  • Select the zip file containing your new theme and click Upload

4_1

  • After installing theme successfully, choose Publish theme then continue to do other settings

5_1

6.Import Products

After installing Sebian successfully, you are able to import available products:

  • Go to Products > Products and choose Import

14

  • Import the CSV file you have in the package:

27

7.Accessing theme settings

Open your Shopify admin panel and go to Themes> Customize theme in the top menu. There you will find all the settings available for this theme. After each step, do not forget to Save Changes

6_1


Go to theme settings and open tab Header and Logo. There you will find a select box that allows to choose between using a textual logo and a picture. If you select the picture, you can upload it using the upload form right below. Don’t forget to also write your shop’s tagline.

2_1

Setting up homepage slideshow


You can setup homepage slideshow in theme settings page under the Home — Slideshow tab. You can have at max 4 slides, whom you can enable one by one using checkboxes given.

  • Choose the box next to Enable slideshow?

4

  • Everything you can do more is only uploading the photo, entering the text for each image and choose to display the image or not.

4_1(1)


You can setup Block carousel in theme settings page under the Home Block tab.
3_1

  • Choose the box next to Enable block carousel on Home Page?

4(1)

  • Everything you can do more is only choosing the number of visible items, uploading the photo, entering the text for each image and choose to enable blocks or not.

5_1

Setting up Block Static


You can setup Block Static in theme settings page under the Home Block tab.

6_1

  • Choose the box next to Enable block static on Home Page?

7_1

  • Everything you can do more is only uploading the photo, entering the text for each image and choose to enable images or not.

8_1

Setting up Free Shipping – Money Back – Best Support – Gift Card


You can setup Free Shipping – Money Back – Best Support – Gift Card in theme settings page under the Home Block tab.
9_1

  • Choose the box next to Display Free Shipping Home Page?

10_1

  • Everything you can do more is only entering the content for the blocks:

11_1

Setting up About Sebian


You can setup About Sebian in theme settings page under the Home Block tab.
12

  • Choose the box next to Display About Sebian Home Page?

13_1

  • Everything you can do more is only uploading the image for background, entering title, sub title, content and button text:

14_1

Setting up Core Features


You can setup Core Features blocks in theme settings page under the Home Block tab.

21_1

  • Choose the box next to Enable Core Feature On Home Page?

22_1

  • Everything you can do more is only uploading the image for background, entering title, sub title, content and icon

23_1

Setting up Blog Home


You can setup Blog Home in theme settings page under the Home Block tab.

24_1

  • Choose the box next to Enable Blog?

25_1

  • Everything you can do more is only entering title, sub title and the limit number of articles

26_1

Setting up Video


You can setup Video in theme settings page under the Home Block tab.

27_1

  • Choose the box next to Enable Video on Home Page?

28_1

  • Everything you can do more is only entering links for the block

29_1


You can setup Product Carousel in theme settings page under the Home Product tab.

32

  • Go to Products > Collections to Add a collection

11

  • Choose the box next to Enable Product carousel ?

33_1

  • Do some settings as the below image

34_1

  1. Choose the number of visible items (1-5)
  2. Enter the Lable Title and Sub Title for each part block
  3. Choose Collection to products from the collection you have created from the previous step

Setting up homepage tabs


You can setup homepage tabs in theme settings page under the Home Product tab.

30_1

12(1)

  • Do some settings as the below image

31_1

  1. Choose the number of visible items (2 – 8)
  2. Check the box next to Tabs products x (X is the serial of the products tab)
  3. Enter the Lable Tabs
  4. Choose Collection to products from the collection you have created from the previous step
  5. Entering Title Block and Sub Title Block

Setting up testimonials


You can setup testimonials in theme settings page under the Home Block tab. You can have at max 4 testimonials, whom you can enable one by one using checkboxes given.

15_1

  • Choose the box next to Display What Client Say ?

16

  • Everything you can do more is only entering the thumbnail. content and other information

17_1

Setting up brands


You can setup brands in theme settings page under the Home Block tab.
18_1

  • Choose the box next to Enable our brands on Home Page?

19_1

  • Everything you can do more is only browsing the image for the logos and entering other information

20_1


You can setup footer in theme settings page under the Footer tab.

36

Choose Background Footer, Color Line Footer and Color Text

22

There are two ways for you to add footer column:

  1. Add Footer Column Tittle and Footer Column Content:

35_1

  1. You should use this way in case you create columns forming in type of a menu. For example: Information column

37_1

  • From the Navigation tab in the Shopify Admin (Themes > Navigation), create a new link list (choosing Add a link list) named Information. The title of this “link list” must be the same as the title of the menu item from your Main Menu

25

  • Enter Information in the Footer Column Title from the Footer tab

26

Setting up left column


You can setup left column in theme settings page under the Col Left tab.

38_1

  • Setting Categories as the image below:

39_1

  • Select Multiple choices then your customers can select multiple colors (size, brand…)
  • Setting Shop by Color as the image below:

40

  • Setting Shop by Size as the image below:

41_1

  • Setting Shop by Price as the image below:

42_1>


You can setup Footer Flick in theme settings page under the Footer tab.

46

  • Everything you can do more is only browsing the image and entering the title

47

8.Creating Mega menu

To create a dropdown menu, first decide on which menu item in your Main Menu you would like to have as a dropdown

  • From the Navigation tab in the Shopify Admin (Themes > Navigation), create a new link list (choosing Add a link list). The title of this “link list” must be the same as the title of the menu item from your Main Menu. For example, if you have a Main Menu with a link called “Men”, create a new “link list” with the title “Men”. Each link in this new “link list” will appear as a dropdown under “Men”

2015-11-12_15-28-01

    • Now go to Themes> Customize theme > Mega Menu then tick on box Display Mega Menu?.
      2015-11-12_15-06-42
    • We are having 5 Mega Menu items from Mega Menu item 1 to Mega Menu item 5. You can enable any items with a mega menu as you like.Each item stands for the link in the menu.
      Each Mega Menu item also have 5 types of Mega Menu including :

Mega Menu blocklinks
Mega Menu video
Mega Menu product
Mega Menu html.

  • You can tick on any Mega Menu type you want to use is enable.
  • Here you can enter Mega Menu Items (for example, here is Men) then edit Mega Menu for the dropdown menu

2015-11-12_14-59-41

    • Everything you can do more is only enable Mega Menu item, uploading the photo, entering the number for each columns of block.
    • If particular type of link is set, you will see its specification in brief step below.This is example for the configuration of Mega Menu item 1.

megamenu

* Choose the box next to Enable Mega Menu item 1

2015-11-20_8-49-09

* Enter “Link Name” of Navigation > Main Menu into Menu item 1 box.

mega menu item1

*Mega Menu Fullwidth

Choose the box next to Enable Mega Menu 1 Fullwidth .
full

If you want to limit the Mega Menu width you can input the pixel values to the box.

fullwidth

  • You can divide the width of each Mega Menu type follow column of bootstrap .

Choose the box next to Mega Menu blocklinks enable 1 .

blocklinks

*Mega Menu video

You can add a video to the Mega menu after you tick on the box next to Enable Mega Menu 1 video. Then Copy Video Code from youtube, vimeo and put in the box Mega Menu video content. That it is done.

video

*Mega Menu product
If you want to enable product, choose the box next to Mega Menu product enable 1

product

  • Choose Mega Menu product item that the selection item can be set for display at drop down menu.
  • Limit Product means the number of display product.

*Mega Menu html

Choose the box next to Mega Menu html enable 1

html
You also can change the number of columns and image for Mega Menu html.

  • Color Mega Menu

You can setup color Mega menu in theme settings page under the General tab.

color

To set the color Mega menu, select the link color code for each title :
2015-11-12_15-20-54

9.Adding a blog post

  • Now go to Online Store > Blog Posts and choose Add a blog post

  • Show editor and enter the content in form of:

15


<p class="images"><img src="[LINK IMAGE]" /></p>
<p class="content">[CONTENT]</p>

Here is an example:


<p class="images"><img src="//cdn.shopify.com/s/files/1/0910/3108/files/blog_post1_1024x1024.jpg?5914840690218199429" /></p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim erat ut laoreet pharetra. Proin mauris mi, egestas eget nibh sit amet, egestas vulputate dui. Sed egestas non sem at sagittis. Mauris augue metus, posuere at porttitor eget, auctor sed tortor. In lobortis ligula vitae odio luctus, posuere luctus lectus suscipit. Proin mauris leo, sollicitudin vel egestas sit amet, egestas at neque. Curabitur sem diam, ultrices eget hendrerit eget, pharetra vel est. Morbi ullamcorper tristique aliquet. Curabitur nec orci a tellus faucibus sollicitudin dapibus id mauris. Proin dolor metus, blandit quis aliquam tincidunt, pharetra a risus. Duis molestie, quam non commodo faucibus, lorem elit suscipit risus, in consectetur lorem sapien non lorem. Maecenas in nibh viverra, bibendum augue ac, dapibus tortor. Aenean eleifend dignissim sem, ac blandit nunc dignissim eget. Ut condimentum lacus at velit pellentesque, id blandit massa vestibulum. Quisque luctus tempus convallis. Curabitur id tincidunt est. Donec vehicula tempor tellus, sit amet aliquam enim lobortis vitae. Maecenas tortor orci, scelerisque quis erat sit amet, dictum faucibus ante. Vivamus nulla orci, pulvinar vitae iaculis condimentum, aliquam vitae massa. Sed ultrices lectus vel felis scelerisque, in cursus odio dapibus. Vivamus luctus, enim eget vulputate vestibulum, nisi arcu ultricies justo, sodales lobortis ipsum felis sed massa. Duis dictum tincidunt erat. Pellentesque eget luctus velit, ac ultrices lectus. Pellentesque scelerisque ipsum at gravida volutpat. Nunc elit mi, adipiscing a ligula quis, molestie sagittis eros.</p>

10.Adding "SALE" icon to products

To add icon with text “Sale” to a product, you just have to specify a compare price in the management page for the specific product. Please follow these steps:

  1. Choose the Products tab then click on an item you want to add “SALE” icon to

  2. Set the price in the Compare at price are. You must set the price in Compare at price is bigger than in Price area

5_1(1)

Then here is the result:

43_1

11.Creating a contact form

There is a special page template specifically for contact forms. To use this layout, you’ll need to select the page.contact template when editing a page.

  1. Now go to Themes> Customize theme > Contact Page

  2. Tick on the box to display Google Maps

  3. Enter the Google Map Code. For example:


<iframe width="100%" height="400" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14898.40075406182!2d105.80466186709666!3d21.008657867340695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ab6024b0c0cf%3A0xbf4151471f21d150!2zMTY5IE5ndXnhu4VuIE5n4buNYyBWxaksIFRydW5nIEhvw6AsIEPhuqd1IEdp4bqleSwgSMOgIE7hu5lpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2s!4v1431913415325"></iframe>

44

And here is the result:

45

12.Setting up newsletter

48

We are using MailChimp to configure our newsletter form, but there are a lot of services and plugins you can use. Follow these steps:

28

  • Go to http://mailchimp.com
  • Register and account if you do not already have one, and log in.
  • Go to section “lists” and click on “create list”
  • Fill in all nedded fields and click on Save at the bottom of the page.

Now go to Themes> Customize theme > Newsletter area. Follow these steps:

  1. Tick on the box to show Newsletter

  2. Enter Newsletter title and Newsletter Smaill

  3. Enter MailChimp form action URL. For more information, you can read Get a MailChimp form action URL

49

13.Installing Apps

  • Choose Apps on the leftside menu then click on Visit the App Store button

6

14.Installing Quickview

  • Search Quick View app in the search bar then choose Get

7

  • Choose Install to complete the app installation

15.Installing Products Review

  • Search Products Review app in the search bar then choose Get

42

  • Choose Install to complete the app installation

16.Using Google fonts with theme

Sebian allows you to add one custom google font, that can be used for titles, menus and other texts in theme. To do that you must paste the include URL for your desired font in the text box for Fonts Name (Themes> Customize theme > Fonts). Here’s an example:

13

  • Save changes.

17.Support Us

We want to know if you are happy, unhappy, or disappointed with something the feature has done, or if you have a suggestion about how we can do something better.

Once again, thank you so much for purchasing this theme. As we said at the beginning, we’d be glad to help you if you have any questions relating to this theme. No guarantees, but we’ll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the “Item Discussion” section.

All feedback will be taken seriously and treated confidentially.

Suggest Edit