YOURStore - Responsive Shopify Theme User Guide

Install Theme

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

Source package contains all necessary information about the theme, examples of the pages etc.

Files structure:

yourstore-v1.4.8 - old
yourstore-v2.x.x
- Presets.zip - Layouts. Here you will find ready-made settings and code for configure another page layout (layout2, ..., cosmetics, etc.)
- Updates_For_Old_Versions.zip
- Yourstore_user_guide.zip
  - Examples - Html Examples. Contains HTML examples files for creating pages, like collection, gallery, listing, menus, pages, product page.
  - User Guide - Documentation
- yourstore-v2-x-x.zip - this is the file you should upload when you install the theme
install_v2.mp4. In this video you will see the steps for the basic setup of Shopify, apps and the yourstore theme.

ATTENTION, before theme install, do the steps from Currency (General) and INSTALL APPS configure section.

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

Open APP. Select and save your style.

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)

Video Example

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. The checkout page is working.

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 second 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 hidden.

Setup Pages

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

Add Page Contacts

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

2. Write in the Title field page name:

Contacts

3. Select Visibility: Visible

4. Select Template: page.contact

5. Click save

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

7. Select HTML write mode content

8. Copy HTML from Examples / Contacts Page code and past it in the content field. And then 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 be able to edit these texts.

Add Page Lookbook

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

2. Write in the Title field page name:

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

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

2. Write in the Title field page name

3. Select Visibility: Visible

4. Page has 2 types. Field ready to use with bootstrap, empty field.

4.1. Field ready to use with bootstrap: paste your content and use.

4.2. Empty field. Work with bootstrap or copy demo pages. Select Template: page.empty

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

Video Example

Instruction you can find in editor

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

2. Write in the 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 using 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 setting HTML code you need to change links of the 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

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

Video Example

Menu Icons

Separate icon with menu item name

Footer Column Link List In Navigation

Create some linklist in navigation. Separate linklist with footer.

Add Navigation

CUSTOMIZE THEME > FOOTER MAIN BLOCKS > FOOTER LINKS > Select your link lists

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 after content.
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:

Video Example

Add Variants Product

Product variants

Filtres Overview

Filters work with tags. You need write category, size, color, vendor, price, tags in your product(s) -> tags field.
After that you must write all unique tags in shopify admin -> online store -> themes -> customize theme -> general settings -> collection page, navigate "FILTER BY CATEGORY" and "FILTERS". Then write your tags, like color, size, etc in needed fields and save.

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 prices in collections

Add Popular Tags

Product tags

You need to write "popular word" in the 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 to 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's 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's 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

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

Layout

Use Default Editor and create what you want.

Customize theme ->

Default Editor
Layout 2 Static

You Can Enable Rtl For All Layout

Colors

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 designs, choice you design.

Breadcrumb Top Line: show/hide breadcrumb line

Footer

Video Example

Footer Design: Theme has 6 footer designs, 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

Product Item

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