YOURStore - Responsive Shopify Theme User Guide

Read shopify manual before you start

Online Editor

Please use Online Editor for the help in customization. ONLINE EDITOR

You can use NON-LATIN characters

Attention: NON-LATIN CHARACTERS in PRODUCT PAGE work only in COMBOBOX

Attention: one language = one store. Shopify does not support multilangular online!!!

Install Theme

To install the theme, please log in to your Shopify store and go to the Themes. From there, click on Upload a Theme and upload the .zip file from the 'upload' folder included with this package

If your store is currently active and is using a different theme, you select button Publish theme what you have just upload

Install Apps

Set Product Review APP

To enable product review, please install below app:

Get App - Product Reviews

Set Product Sharing APP

To enable product sharing, please install below app:

Get App - AddThis Sharing Tool

Configure AddThis:

Theme -> Edit HTML -> Folder Assets -> css-liquid.css.liquid
in top add:
.addthis_toolbox { display: inline-block; padding-top: 8px; }

Folder Snippets -> OPEN product-page-description.liquid
Add at the end of the program:
{% include 'addthis' %}

Folder Snippets -> OPEN product-page-description2.liquid
Add at the end of the program:
<div class="center">{% include 'addthis' %}</div>

Shop Settings

Currency (General)

Editing the HTML for currency formatting:

1. From your shop admin, go to the Settings / General

2. Scroll down and then you will see a "Standards & formats" block. Find the "Currency" there

3. Select your currency

4. Click "change formatting"

5. Replace selected text and click Save

<span class=money>${{amount}} USD</span>

<span class=money>${{amount}}</span>

6. Currency must be the same

Payments

1. From your shop admin, go to the Settings / Payments

2. Choose a payment gateway to accept payments for orders. Than checkout page is work

Checkout

1. From your shop admin, go to the Settings / Checkout

2. Select Accounts are optional

3. Click save

Shipping

1. From your shop admin, go to the Settings / Shipping

2. To enable shipping calculator, please configure your shipping rates by following below guide:

Set up shipping rates

3. Instruction:

When shipping has one way: Standart work;
When shipping has two way. SHIPPING & HANDLING has message.

Message you can edit here: Online Store / Themes / Edit language -> general -> Shipping variants

If "Shipping variants" field is empty: SHIPPING & HANDLING field is hide

Setup Pages

From your shop admin, go to the Online Store / Pages

Add Page Wishlist

1. In a Online Store / Pages, find and click button "Add a page"

2. Write in Title field:

Wishlist

3. Select Visibility: Visible

4. Select Template: page.wishlist

5. Click save

Add Page Contacts

1. In a Online Store / Pages, find and click button "Add a page"

2. Write in Title field:

Contacts

3. Select Visibility: Visible

4. Select Template: page.contact

5. Click save

6. To create text content, you need past HTML code in Content field

7. Select HTML write mode content

8. Copy HTML from Examples / Contacts Page code and past it in the content field. And than click save

9. Your default email is account email

10. If you want to change page title or messages you go there Online Store / Themes. Than you select "Edit language"

11. There select tab "Contact" and you will can edit texts

Add Page Lookbook

1. In a Online Store / Pages, find and click button "Add a page"

2. Write in Title field:

Lookbook

3. Select Visibility: Visible

4. Select Template: page.lookbook

5. Click save

6. Edit content in Customize Theme -> Lookbook. Lookbook Options.

Add Custom Page

Video. Create page by documentation

Video. Create custom page

Video. Create FAQ page

1. In a Online Store / Pages, find and click button "Add a page"

2. Write in Title field page name

3. Select Visibility: Visible

4. Select Template: page

5. Click save

6. Select HTML write mode content

7. Select your code page in Examples / Html Pages copy and paste code in page editor

8. If page contains images, see tab Edit Images Links

Add More Home Pages

1. In a Online Store / Pages, find and click button "Add a page"

2. Write in Title field page name

3. Select Visibility: Visible

4. Select Template: page.home-page_layout-N

5. Click save

6. Edit selected Layout in Customize Theme -> Home Page Layout N

Add Page Gallery

Video Example

Instruction you can find in editor

1. In a Online Store / Pages, find and click button "Add a page"

2. Write in Title field page name

3. Select Visibility: Visible

4. Select Template: page.gallery

5. Paste content from folder Examples / Gallery / example.html
Or create your gallery use online or local editor:
Local editor: folder Examples / Gallery / Editor / index.html run in browser
Online Editor

6. Save.

Edit Images Links

1.1. After set the HTML code you need change links of images. See image instruction:

1.2. Perform a loop for all images.

2. Click save

Setup Navigation

Video Example

From your shop admin, go to the Online Store / Navigation

Create a Link List In Menu

Main Menu

Create Simple Drop-down Menu

Text to create columns:

two_column

three_column

Video Example

Create MegaMenu Type 1

Code examples you can find in folder Examples/Menus

Grid for design with image and button (layout):

col-one-third
col-one-fourth

Grid for design with image only (blogs):

col-one-third
col-one-fourth
col-one-fifth

Example. Change this code here:

Separate menu group by ;

Example: menu item, page handle; menu item 2, page handle

If you has NON-LATIN characters, you must write Item Number in menu line

Example: item2, page handle; item3, page handle

Video Example

Create MegaMenu Type 2

Examples code for the footer submenu you can find in folder Examples/Menus/Type 2

Video Example

Menu Icons

Separate icon with menu item name

Footer Column Link List In Navigation

For footer linklists names must be:

Footer Links 1

Footer Links 2

Footer Links 3

Create Product

Before you start you must read shopify manual:
1. Products
2. Add a Product to your Store

Product Short Codes

You have 8 short codes.
In description field select "SHOW HTML". Insert codes in header.
You can write all short codes in a row.

[icon-new-always]

[disable-icon-new]

[disable-icon-sale]

[item-gallery]

[countdown]2017/01/31 10:30:00[/countdown]

[video]https://www.youtube.com/watch?v=L9szn1QQfas[/video]

[custom_html]small description[/custom_html]

[smallDescription]small description[/smallDescription]

1. [icon-new-always] - Icon "NEW" always visible

2. [disable-icon-new] - Icon "NEW" never not visible

3. [disable-icon-sale] - Icon "SALE" never not visible

4. [item-gallery] - Turn On gallery in item. Images = product images

5. [countdown] - This is countdown, in the tags your date with the specified format

6. [video] - This is Video, you insert auto play video url

7. [custom_html] - work on product page, product DESCRIPTION after PRICE

8. [smallDescription] - work on listing page in mode view list, and quick view

Example shortcodes in product description:

Product Unique Tabs

You can create unique tabs for the product. Count of tabs > 10

Tabs created in this structure:

[tabs] [tab title="A"]Content 1[/tab] [tab title="B"]Content 2[/tab] [tab title="C"]Content 3[/tab] [tab title="D"]Content 4[/tab] [/tabs]

Paste code in the product description in header

Example:

Add Variants Product

Product variants

Filtres Overview

Filters work with tags. You need write category, size, color, vendor, price, tags in product tags field.
After that you must write all unique tags in customize theme

You can translate tag in NON-LATIN characters. Example: englishTag__Russian(Arabic, China, or else). Separate item from translate with two underline symbols

Add Category Filter Product

Product tags

Filter category work with tags. You need write product category in product tags field.
It work for all products in the collection

Add Color Filter Tags

Product tags

Filter color work with tags. You need write product colors in product tags field.
It work for all products in the collection

After that you go to the theme editor. In the field "List Colors" you write all color in collections

Used colors:

black blue dark-turquoise green grey light-grey orange pale-violet-red pink purple red tan violet white yellow

More colors you can add in css-liquid.css.liquid:

.collapse-block .options-swatch--color .color-NAME { background-color: #CODE-COLOR; }

Add Size Filter Tags

Product tags

Filter size work with tags. You need write product sizes in product tags field.
It work for all products in the collection

After that you go to the theme editor. In the field "List Sizes" you write all size in collections

Add Popular Tags

Product tags

You need write "popular word" in product tags field.
It work for all products in the collection

After that you go to the theme editor. In the field "List Popular Tags" you write all "popular words" in collections

Add Price Filter Tags

Product tags

Filter price work with tags. You need write product price category in product tags field
it work for all products in the collection

After that you go to the theme editor. In the field "List Sizes" you write all price in collections

Create Collection

Create Collections

Go to the Products / Collections.
Create and select your collection.

Create Collection Banner

In the page "collections" you may show collections banner and link this to select products

Create new page. Edit code from folder Examples/Listing (change link of image) and copy. In created page select HTML editor

Paste HTML code and save page

Customize Theme -> List The Collections select created page

Create Collection Description

1. In selected collection select HTML editor

2. Edit (change link of image) and paste code from folder Examples/Collection.

Create Blog

Blog Posts Manual

Translate Blog Tags

You can translate tag in NON-LATIN characters. Example: englishTag__Russian(Arabic, China, or else). Separate item from translate with two underline symbols

Write translated tags into field "Blog Tags With Translate"(Customize Theme -> Blog), separate tags with comma

Example: englishTag__Russian, englishTag__Russian, englishTag__Russian

Blog Slider

Video Example

Image upload here:

Content paste in the field Excerpt:

[blogslidersmall] [title]If delete this tag will be default title[/title] [author]If delete this tag will be default author[/author] [content]Text or Html Code[/content] [/blogslidersmall]

Blog Slider Testimonials

Video Example

Content paste in the field Excerpt

[blogsliderbig] [image]<img src="https://cdn.shopify.com/s/files/1/1236/4838/files/slider-blog-img03.jpg?2109341051203100637" alt="" />[/image] [title]Eleanor <em> - designer</em>[/title] [content]Text or Html Code[/content] [/blogsliderbig]

Create Article

Video Example

Article content paste in the field content

[author]Author. If delete this tag will be default author[/author]

Example From The Demo:

<p><img src="https://cdn.shopify.com/s/files/1/1236/4838/files/blog1.jpg?18364512570070407069" class="img-responsive" alt="" /></p> <div class="divider divider--xs"></div> <p>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.Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <blockquote class="quote-left"> <p>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.</p> <cite> <b>Amanda Smith</b> - designer </cite></blockquote> <p>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 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 aliquip ex ea commodo consequat. 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.</p>

Theme settings

Customizing Your Theme Manual

From your shop admin, go to the Online Store / Themes

Language

Many headers, messages and content edit in Language editor

Online Store / Themes. Than you select "Edit language"

Create language switcher in shop

Warning: one language = one store. Shopify does not support multilangular online!!!

Create linklist in Navigation and select it in field "Language Link List":

Colors

Presets

The selected "Preset" clear all changes in customizing shop

To change the default presets you need tune your theme and save your preset

Typography

Setting the font by choice or default

Logo Settings

Can select retina image or non scale image

Header

Select Header Design: Theme has 7 header design, choice you design.

Breadcrumb Top Line: show/hide breadcrumb line

Footer

Video Example

Footer Design: Theme has 6 footer design, choice you design.

Main Blocks for all designs.

Social Buttons Html:

Footer Address:

Footer Html Code Examples

Footer Design 1 -> Html Code:

<p> No more need to look for other ecommerce themes. We provide huge number of different layouts. Yourstore comes packed with free and useful features developed to make your website creation easier. Innovative clean design, advanced functionality, UI made for humans, extensive documenta- tion and support i continue this list infinitely... </p>

Footer Design 2 -> Html Code:

<p> No more need to look for other ecommerce themes. We provide huge number of different layouts. Yourstore comes packed with free and useful features developed to make your website creation easier. Innovative clean design, advanced functionality, UI made for humans, extensive documenta- tion and support i continue this list infinitely... </p>

Footer Design 3 -> Html Code:

<address class="box-address"> <span class="icon icon-home"></span> 7563 St. Vincent Place, Glasgow <br> <span class="icon icon-call"></span> <b class="color-dark">+777 2345 7885 </b><br> <span class="icon icon-access_time"></span> 7 Days a week from 10:00 am to 6:00 pm<br> <span class="icon icon-markunread"></span> <a class="color link-underline" href="mailto:info@mydomain.com">info@mydomain.com</a> </address>

Footer Design 4 -> Html Code 1:

<div class="col-sm-6 col-md-3">  <div class="mobile-collapse"> <h4 class="text-left text-uppercase title-under mobile-collapse__title">Shipping AND Delivery</h4> <div class="v-links-list mobile-collapse__content"> <p> We're dedicated to delivering your purchase as quickly and affordably as possible. We offer a range of delivery and pickup options, so you can choose the shipping method that best meets your needs. </p> </div> </div>  </div> <div class="col-sm-6 col-md-3">  <div class="mobile-collapse"> <h4 class="text-left text-uppercase title-under mobile-collapse__title">Payment Methods</h4> <div class="v-links-list mobile-collapse__content"> <p> Every country and shopper has their prefered method to pay online. Offering your buyers safe and convenient payment choices can help your sale go smoothly, earn you positive Feedback, and bring them back for more. </p> </div> </div>  </div> <div class="divider divider--lg visible-sm"></div> <div class="col-sm-6 col-md-3">  <div class="mobile-collapse"> <h4 class="text-left text-uppercase title-under mobile-collapse__title text-uppercase">Contact</h4> <div class=" mobile-collapse__content">  <address class="box-address"> <span class="icon icon-home"></span> 7563 St. Vincent Place, Glasgow <br> <span class="icon icon-call"></span> <b class="color-dark">+777 2345 7885 </b><br> <span class="icon icon-access_time"></span> 7 Days a week from 10:00 am to 6:00 pm<br> <span class="icon icon-markunread"></span> <a class="color link-underline" href="mailto:info@mydomain.com">info@mydomain.com</a> </address>  </div> </div>  </div> <div class="col-sm-6 col-md-3">  <div class="mobile-collapse"> <h4 class="text-left text-uppercase title-under mobile-collapse__title">Shipping AND Delivery</h4> <div class="v-links-list mobile-collapse__content"> <p> We're dedicated to delivering your purchase as quickly and affordably as possible. We offer a range of delivery and pickup options, so you can choose the shipping method that best meets your needs. </p> </div> </div>  </div>

Footer Design 4 -> Html Code 2:

<address class="box-address"> <span class="icon icon-home"></span> 7563 St. Vincent Place, Glasgow <br> <span class="icon icon-call"></span> <b class="color-dark">+777 2345 7885 </b><br> <span class="icon icon-access_time"></span> 7 Days a week from 10:00 am to 6:00 pm<br> <span class="icon icon-markunread"></span> <a class="color link-underline" href="mailto:info@mydomain.com">info@mydomain.com</a> </address>

Footer Design 5 -> Html Code:

<h4 class="mobile-collapse__title text-left text-uppercase visible-xs">telephone</h4> <div class="mobile-collapse__content"> <address class="font-medium"> <span class="icon icon-call"></span> +777 2345 7885 </address> <time class="color-gray">7 Days a week from 10:00 am to 6:00 pm</time> </div>

Footer Design 6 -> Html Code:

<address class="box-address"> <span class="icon icon-home"></span> 7563 St. Vincent Place, Glasgow <br> <span class="icon icon-call"></span> <b class="color-dark">+777 2345 7885 </b><br> <span class="icon icon-access_time"></span> 7 Days a week from 10:00 am to 6:00 pm<br> <span class="icon icon-markunread"></span> <a class="color link-underline" href="mailto:info@mydomain.com">info@mydomain.com</a> </address>

Navigation

Associate icons NEW and SALE with menu items by menu item NAME

Associate "megamenu type1" with page handle and menu item

Create megamenu type2 and Associate megamenu with menu item

Layout

Theme has 9 designs home page. Select Your design and customize him

Customize theme ->

Home Page Layout 1
Home Page Layout 2
Home Page Layout 3
Home Page Layout 4
Home Page Layout 5
Home Page Layout 6
Home Page Layout 7
Home Page Layout 8
Home Page Layout 9

Else you can create custom home page in shop. Create new page and select page template page.home-page_layout-X and customize selected home page.

Examples html code you can find in folder Examples/Layouts/..

You Can Enable Rtl For All Layout

Product Item

Wishlist can work without account

Video Example

Product Page

Product Page has 2 designs

Default design can be:

Custom Html, visible only in screen size > 1770px. This is block work only when screen width > 1770px

Html examples in the folder Examples/Product Page

Product Quick View

Blog

Blog has 3 designs (Blog -> Grid)

You can On / Off Sidebar in Article page: Sidebar -> Show Sidebar In Article Page

Sidebar Custom Html Blocks -> Content 1:

<ul class="categories-list"> <li><a href="#">July 2016</a></li> <li><a href="#">Juny 2016</a></li> <li><a href="#">May 2016</a></li> <li><a href="#">April 2016</a></li> </ul>

Sidebar Custom Html Blocks -> Content 2:

<ul class="categories-list"> <li><a href="#">Entries RSS</a></li> <li><a href="#">WordPress.org</a></li> <li><a href="#">Magento</a></li> <li><a href="#">Shopify</a></li> </ul>

Collection Page

<p class="light-font">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p> <ul class="marker-list"> <li>Lorem ipsum dolor sit amet</li> <li>Conse ctetur adipisicing</li> <li>Elit sed do eiusmod tempor</li> </ul> <p class="light-font">Amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labor.</p>

Filtres Overview