Tuoring - Multipurpose Responsive Shopify Theme

User guide

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thanks so much!

Overview

Tuoring is a Responsive Shopify theme that supports multiple currencies, languages, and devices. This theme is advised for shops selling clothes, fashion, beauty, accessories, etc. It has a stylish professional layout which clothing collections from the latest fashion shows are demonstrated in a slider.

Tuoring Shopify theme is a perfect fit for building a fully functional online store. The header features a mega menu, while newsletter subscription form and social media icon are placed above the footer. Category Tabs Slider are presented in slider. Product Tab Slider divide the merchandise into featured products, bestseller, new arrivals and specials. On hovering each item, the shopper sees four functional buttons. Static block advertise new promotions and best store offers. Tuoring theme are supplied with “Quick View” function, which offer more detailed information about a product without need go to the detail page. Moreover, Blog and Testimonial also help you and customers connect faster via posts, comments.

Let choose Tuoring Responsive Shopify theme as a basis for building a successful business project!

Theme Installation

Follow the following instructions to install the theme on your store. Note that most of the images are from one of our other shopify theme but the process is simply the same

  1. From your shop dashboard, go to Online Store > Themes and click on upload theme link. 
  2. Select the zip version of the theme and click on Upload button. 
  3. Once uploaded you'll see the theme listing below the published theme. Click on the publish button to make it live. 

Sample Products

Sample products has been added to the zip in case your store doesn't have any products or you want to try with the demo products. Follow the following steps to upload demo products.

  1. Go to the products tab and select the import button as can be seen in the screenshot. 
  2. Once done you need to add them to collections based on different criterias. Collections can be added by collection tab under products.

Demos Setup

Theme comes with multiple demos. Follow the following instructions to setup the store theme based on the demos. 

Sample images

Sample images has been added to the zip with the name 'demo-images' in the folder 'demos-data' in case you want to setup the store with demo data. Follow the following steps to upload demo images.

  1. Go to the settings > Files and click on upload button as can be seen in the screenshot. 
  2. Select all the files in demos-data/demo-images folder and upload to server.

Sample demo config files

Sample config json fiiles has been added to the zip with the name 'settings-data' in the folder 'demos-data' in case you want to setup the store with any of the four demos. Follow the following steps to upload demo settings files to your store.

  1. Go to the Online Store > Themes > Edit Html/CSS as can be seen in the screenshot.
     
  2. There are four config files in demos-data/settings-data folder of the zip.Open the files based on the demo that you want to setup.
  3. Select all the content of the file and upload it to the settings_data.json file of the theme located in config folder as can be seen in the screenshot 
  4. Open the store url and theme will be setup according to your demo.

Sample Products

Sample products has been added to the zip in case your store doesn't have any products or you want to try with the demo products. Follow the following steps to upload demo products.

  1. Go to the products tab and select the import button as can be seen in the screenshot. 
  2. Once done you need to add them to collections based on different criterias. Collections can be added by collection tab under products.
  3. Then you need to assign the collection on the theme settings page. 

Sample Products

Now you can also add videos against your products. All you need to do is to add a video link inside a video tag at the bottom of your product page after all the content. It should be like 
 
 [video]https://www.youtube.com/watch?v=Od8ZEmlDSn8[/video]
 
When a video is found in the product description then a video thumbnail will be added to the products images slider and clicking on it will show the video. 
 

 

Theme Customization

In order to start setting up your theme, you need to customize it. Note that most of the images are from one of our other shopify theme but the process is simply the same. To start customization

  1. Click on the customization link on the theme page

Typography

Typography options allows you to change font family and size to be used for body, header and navigations elements as can been seen in the screenshot

Header

First option is to select the type of the header design that you'd like to use. Below screenshot shows the different options available on the header settings area. In order to upload logo, click on the image links to replace or add new logo.

As can be seen i the above screenshot, menu can also be selected here for the theme header navigation.
 
On right side accounts links are shown. If they are not shown then go to the admin > settings > checkout to enable the accounts creation
 
 

Megamenu

Now its time to add megamenus to the main menu. Currently two megamenu links can be added to the main menu each having four columns. 

First the menu should be added on the navigational panel and added a single element to it as well as can be seen in the screenshot below. 

Then an item with the same name should be added to the main menu as can ben seen in the screenshot.

Next Go to Settings area and click on megamenu1 and select the menu from the dropdown as can be seen in the screenshot.

Now its time to configure the 4 columns. Each column can have a menu, collection products or an image. Select a type and then add the relevant options to the menu. 

Note that you need to have collections created before creating a menu out of it. Follow the tutorial for setting up collections. A collection menu would look like the screenshot below. 

Similarly you can set the megamenu2 per the above instructions. 

 

Section Based Theme

This is a section based theme which allows advanced theme customization.

Think of sections as individual, customizable components of a theme. Within each section, you or your client can easily add, reorder, and remove chunks of content such as products, slideshows, videos, or collections.

You can preview your changes in real-time in either desktop or mobile view, offering more options to test our updated layouts in Shopify Themes on the fly.

Here’s how easy it is to add new sections to a theme:

Adding a section to a Shopify Theme

It’s just as simple to reorder existing sections:

Reordering sections within a Shopify Theme

Below screenshot shows all the sections that can be added to our theme.

Section Slider

This is the first section that is added to most of the themes. You'll see it already added with demo. 

There a lots of options that you can customize on the page

  1. First option to either set/unset auto rotation of slides.
  2. Second field allow you to set time of each slide for display
  3. Third option allows you to select the slider design to show

Next thing is to add content. You can add two types of content. A slider image which is shown on slider and side image which are shown on some designs on the side of sliders.

A maximum of 6 sliders can be added to each slideshow. For each slider there is

  1. Image upload to background image. Leave blank if you don't want to have background image.
  2. Text fields to add title and description text.
  3. Button link fields to add link text and link

Section Adverts

This is a section for showing advertisement banners. You can create single or multiple sections out of it. There are multiple design options which you can choose from. The design options differ on the basis of showing single or multiple ad objects. 

Below screenshot shows details about filling the options.

Section Product Tabs

This section can be used to show products from multiple collections. The products are then shown in tabular view.

Below screenshot shows details about filling the options. 

Section Feature Collection

This section allows you to show products from a single collection.  

Below screenshot shows details about filling the options. 

 

Section Service Box

This is the section for showing product features. 

Below screenshot shows details about filling the options. You can get icon classes from fontawesome.io/icons/

 

Section Brands

This is the section that can be used to show brand images.

Below screenshot shows details about filling the options.

Section Instagram Feed

This is the section which can be used show an instagram feed. 

Instagram feed provide options to show photo feed from specific "user" only. "By hashtag" is no loger supported due to new Instagram policies.

Due to latest Instagram API changes you need to add access in order to show photos on your store:

  1. Be sure that you are logged in to your Instagram account, and then go to this page to Get your Access Token

  2. Once this page generates the code for you, please copy it and then paste under 'Access Token' option

Product page

Under product page section we can set the options for product page like adding extra tab for 'additional information' , enabling/disabling reviews or showing related items feed.

Below screenshot shows details about filling the options. 

 

Contact Page

In order to use Contact Us page first you need to create a page by going to

Online Store > Pages > Add Page

Add title and select page.content as template. 

The contact information are added from footer contact information. For map you need to go to google.com/maps for generating code and add that code onto theme settings > contact page settings area. 

 

Collection Page

Collection page setting allows you to configure the following options

  1. Background header image for collection pages
  2. Number of products to show
  3. Show or hide the sidebar
  4. products option to filter by tags or groups. Learn more about filtering here

Social sharing

Social sharing option can be set from  Customize Theme > Social media section.

 

Setup Multiple Currencies

1. Go to Admin > Settings > General

2. Scroll down to Standards & formats area, you'll see your Currency setting.

3. Click change formatting to open the Currency Formatting dialog.

4. Change HTML with currency and HTML without currency elements in the dialog.

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