Wokiee - responsive Shopify theme user guide

FEATURES:

  • Sections in the home page - drag and drop
  • Image autoresize to the same height
  • Countdown timezone
  • Google font
  • Purchased promo section
  • RTL
  • Catalogue mode
  • Quick View
  • Newsletter element using official Mailchimp service
  • Newsletter element using default Shopify functionality
  • Associating product options with image
  • 4 levels drop-down menu
  • Ajax filters
  • 10 FILTER GROUPS for filter options
  • Two designs of the product thumbnails

BEFORE YOU START TO WORK, WE RECOMMEND YOU TO LOOK AT THE SHOPIFY MANUAL:

Main information

DO NOT HAVE STORE YET?

Use these affiliate link to get free installation service. We are ready to process our theme installation after your regular payment to Shopify.

Free installation service includes:

  1. Theme installation
  2. Required app installation. Reviews, Wishlist, Compare. (Other apps may need an additional fee).
  3. Import demo settings
Attention:
The FREE installation service is available only for NEW stores which were created through our affiliate link with paid Shopify account.

Theme Install

To install chosen Theme, please follow the instructions below:

Attention:
Theme with the word -shopify-2-0 in the file name in folder from themeforest will support the functionality of the Shopify 2.0 admin panel
  1. Upload the theme in your store Official Documentation
  2. Publish the theme
  3. Configure the global theme settings. *REQUIRED

UPLOAD AND PUBLISH THEME:

Install theme

INSTALL PRESETS (SKINS) TO THEME WITH:

Required settings

Some customers are faced with the problem of not properly setting up their stores. Therefore, we recommend that you pay attention to the settings below to simplify the work with your online store.


CURRENCY VARIANTS

ENABLING YOUR STORE TO SELL IN MULTIPLE CURRENCIES

  • Configure currencies with shopify documentation Official documentation
  • Click on the "Customize" button and open: Sections > Header
  • Find or create tab Multiple сurrencies
    Enable Show shopify multiple currencies
  • Enable Show option Show shopify multiple currencies
  • Config currencies name with options:
    Show Currency symbol in the title,
    Show Iso Code in the title,
    Show full currency name
  • Save page

CONFIGURE CURRENCY. PREBUILD CUSTOM METHOD

Attention:
This method does not work on the checkout page. This method does not work with the Shopify method.

This is not an official currency conversion method for your store that comes from this site.

To enable this conversion, please follow the instructions below!

Insert the red code with the accuracy of each letter.

Attention:
Please be informed that the code we provided to you must not be changed. You need to change only “your currency” part of the code.
CONFIGURE CURRENCY
  • From your Shopify admin panel you need to go to Settings > General
  • Scroll down to the Store currency unit, select default currency and save preset. Set the default currency for your shop and click "SAVE" Currence settings
  • In the Store Currency unit click the Change formatting button. Click on the CURRENCY FORMATTING option and add the following red html code:

    <span class=money> your currency *Do not change red texts </span>

Currence settings

ADD NEW CURRENCY IN THEME. WORK WITH PREBUILD CUSTOM METHOD

Please be informed that you may add a new currency in the Header section

  • Go to the Online Store on your Admin Panel, go to the Themes section and click on the Customize button.

  • On the top of the Customizer page, choose Section tool and click on the Header
  • Scroll to the bottom of the screen, click on the Add content button and choose the Multiple currencies option.
  • On the Multiple Currencies page you need to fill in the Currency you wish to support field.
Add new currency

CONFIGURE PAYMENTS SYSTEM

  • From your Shopify admin go to Settings / Payments
  • Choose a payment gateway to accept payments for orders. The checkout page will works.

PAYMENTS - OFFICIAL DOCUMENTATION


ENABLE ACCOUNTS

To enable account from your Shopify admin panel you need to:

  • Open settings and choose “Checkout option”
  • Find the block Customer accounts and select Accounts are optional
  • Click save
checkout

Also for more information we recommend you to follow the link below:


ACCOUNTS - OFFICIAL DOCUMENTATION

CONFIGURE SHIPPING

You may configure your shipping settings through the “Settings” page by choosing the “Shipping” option. To enable your shipping calculator we recommend you to configure your shipping rates with the help of the guide below:

SET UP SHIPPING RATES - OFFICIAL DOCUMENTATION

Instruction:

Before you start please note:

  • When your store has only one-way shipping - it will work in the standard mode;
  • In case you have two or more ways of shipping - your store will have a “SHIPPING & HANDLING” message

To edit this message please follow the instructions below:

  • Access the “Online Store” page, select the “Themes“ option and click on the drop-down menu “Actions”
  • Choose “Edit language” option
  • Select “Cart” and scroll to the “Shipping variants” field. Shipping

Kindly note if the “Shipping variants” field is empty the “SHIPPING & HANDLING” field will be hidden.

Install Metafield App

  • To enable product additional functions please install the app: Install ExIm App.

    Also we recommend you to look at the instructions before the use. You may check it at the link:

    How to use?

Install Review App

PLEASE NOTE! TO ENABLE PRODUCT REVIEW YOU NEED TO SELECT AND INSTALL THE ONE FROM THE FOLLOWING APPLICATIONS:

* Default shopify (FREE App)

GET APP - PRODUCT REVIEWS
Attention:
You do not need to make changes described in their documentation. All changes in the code from this application were already imported in the code of our Theme

* Ali Review App

Attention:
It is not a free application!

GET APP - PRODUCT REVIEWS

To integrate Ali Review app you need to install this app and in the Customize theme go to the Theme settings > Settings > REVIEW > Use review app > Select - Ali Review app

Attention:
Unfortunately last update for AliReviews app doesn't allow to use their software inside of any section (because this is separate section). So, we can have it only on the bottom of entire content.

Install Weglot App

To enable multilingual store please install the app:

GET APP - WEGLOT APP
Attention:
Application is not a free. You may use the promo code for this application to get a discount: LUKWG20

Install GDPR App

To enable GDPR + Cookie Bar please install the app:

GET APP - Easy GDPR + Cookie Bar

Wishlist

Follow the instructions below:

  • Access your Shopify admin panel and click the Online store. Choose the option Pages
  • Create a page with the name wishlist and select the template suffix: page.wishlist
  • Click save
  • Go to Theme option at your Online Store and click on the Customize button. Choose the "Theme settings” option
  • On the Theme settings page select the tab Settings and scroll down to the Enable Wishlist option.
  • Click save

Configure AddThis social

AddThis social works on a product page and a blog page

Attention:
AddThis does not work with mobile devices!
  • Registry your account in AddThis
  • Open Addthis home page. Scroll down and click Get Started button: AddThis
  • Click Activate in new window: AddThis Activate
  • After your presets list click button Save and Continue: AddThis Activate
  • Copy user id: AddThis Activate
  • Paste the id in the theme's file: Actions > Edit code > Snippets > addthis.liquid AddThis Activate
  • Save

Additional codes

Please take a look at the tutorials for the additional theme settings.


Fast image load (IT IS NEEDED ONLY FOR NOT USED IE BROWSER) :

Kindly note:

Theme is optimized with the lazyload effect.
Lazyload does not work with old browsers and devices.

You may do the steps below for your store:

  • Go to the Themes option at your Online Store and click on the Actions button.
  • Select Edit code option in the drop-down menu.
  • On the Edit code page click theme.liquid which is on the Layout block.
  • Copy the code below and paste the code at the end of the file before tag </body>
  • Save

Add new social icons to footer and header

Attention:
Update related to themes with version 1.9.2 and lower

In this tutorial we will add Whatsapp icon to footer and header.

If you have another icon please create or download your social icon in svg format. Open svg file in the text editor on your computer.

Go to your store admin panel and open code editor. Admin panel > Online store/Themes > in the selected theme Actions/Edit Code

Please do steps with video. Codes related to the video:

Video

1. Styles:

2. Theme option:

3. Code for snippets:

4. Whatsapp icon svg code

Frequently asked questions


What to do if I see errors while theme uploading?

You’re trying uploading not correct package. You should use the package from inside.

  • Download the package from themeforest.net (the file is in zip format)
  • Extract the file you’ve just downloaded.
  • Find a file with start name install_me_…_zip, then you just need to upload the install_me_…_zip file to your Shopify store.

    Details are also here - Theme Install

How to get some layout/skin?

Each skin/layout in our theme can be imported in the same way as default first layout.
The procedure is the same and it is described here - Details are also here - Layout/Skin install

Also, it would be useful to watch full installation video from here - Video


How to have some block from the other layout?

To see/have some blocks, some settings from the specific layout you can upload the new copy of our theme (not publish it), import in it the preset from the desired layout.
So, you will see the corresponding Homepage block, settings of corresponding blocks - what block is used, what settings are done in it etc.
After this you are able to add the same blocks with the same settings in your current main theme's version.


How to edit some text in languages section in admin edit languages?

This text and almost all texts can be edited in the Shopify admin section, Edit languages chapter. Press all tabs and change the texts to yours.

Please notice the details here


How to increase a store speed?

We can give you such recommendations regarding speed up a site.

  • Shopify is cloud software. We don't control basic core files and a lot of JS. So, we can't improve them and work in the measures of basic default functionality.
  • Please, read this article - The Problem with Google PageSpeed Insights
    Author carefully explains why it is hard for Shopify software to get good metrics from google. For example suggestions google like usage of modern image formats (like *.webp) will not be supported by some browsers or OS and your customers will have compatibility problems. Not sure, that this is good for you.
  • Your performance also depends on the number of content that is placed on the page. Please, reduce the quantity of content blocks and you will get better results. Each new element on a page slows down page speed.
  • Each new app adds JS and CSS. Loaded from a new server. DNS lookup, connect to new server all these slowdowns page load. Choose only needed apps. It's up to you what is more important for your store, additional features or some more points for page speed.

How to make the update?

If briefly the procedure of update:

Attention:
This procedure available for shopify admin panel - shopify-1.0
  • Upload the latest theme version on your domain
  • In your old theme version go to Edit code > Config > open file settings_data.json
  • Select all and copy
  • Go to Admin panel > Themes
  • In new theme version go to Edit code > Config > open file settings_data.json
  • Select all and replace with copied settings_data from old version.
  • Save file
  • Transfer your custom JavaScript, HTML, CSS codes to new theme version.

Language files can be copied from an old version: Locales/*.json
But nevertheless you should check if all fields of language are filled in the latest version. Go throughout all tabs in Edit languages admin chapter: Language documentation

The correct professional way of working with changes in files is using of some version control software, for example, GitHub repository or some SVN software etc.
In such case you will store all changes in files made by your developers and place them again after files' uploading.
Or the other way is to compare file manually. But this is a time-consuming way because each file should be compared. In such cases software like Beyond compare or SmartSynchronize or else.


How to share a preview link of an unpublished theme?

You can give a link to any unpublished theme, this is core Shopify functionality.

Such recommendation is written regarding Shopify:

  • Create a theme preview link for unpublished or published themes you wish to get feedback on.
  • To create a preview link inside the Shopify Admin, go to Online Store, and then Themes.
  • For the theme you want to share, click on Actions, and then Preview.

How to create wishlist, compare pages?

Wishlist adding:

  • Check if the button wishlist is activated on the products in Theme settings -> Settings -> Wishlist in theme
  • All information is written here - wishlist
  • Some configuration features are shown on the video - video

Compare adding:

  • Check if the button compare is activated on the products in Theme settings -> Settings -> Compare in theme.
  • You should create a compare page in the admin Pages and set page suffix as page.compare here. Also, here please keep attention what link is generated by default Shopify to your compare page:

Please read also such information - compare


Home page: what sizes should be in the revolution slider section?

​All settings regarding the Revolution section can be done directly in its section in SLIDER SETTINGS, like this:

If you untick the option Fullscreen image size you will be able to write your own width and height to resize slides.

Also, such video can help - Video

All what you can see in the slider functionality comes from the default script of the Revolution slider. Our theme uses the whole script functionality and can’t change their source code.
For sure if you upload images with horizontal proportions (big width and small height) they will be good arranged on the desktop but cut off on mobile. Because mobile devices have vertical proportions (small width and big height).


Home page: why video isn’t played in revolution slider section?

Unfortunately video playing is fully connected with the browsers' privacy policy limitation.
Autoplay can work after first user activity on a page.
This isn't connected with theme's functionality.


Home page: how to upload, add video in Shopify admin and then add it on revolution?

You should upload your video/image in Admin Shopify -> Settings -> Files

A link will be generated. And you will be able to add it in the section

Also, such video can help - video


Header: how to arrange the megamenu?

All details about megamenu arrangement you can either read in our documentation:
create megamenu
megamenu options
video

If briefly the first thing is to create the menu in your store Admin panel -> Online store -> Navigation. You should create main items and subitems.
Then go in the Editor, Sections -> Header and arrange each of item to display it on the full-width megamenu functionality.

For example:


Collection pages: how to make a vertical alignment of options, titles in product cells?

Firstly, you can make the same length of product titles in Theme settings -> Product item-> Truncate product title.

To make options be placed on one line you should either add to each product the same number of options or choose the dropdown type of each option. Finally, check if the product images are resized to be the same. In Theme settings -> Product item -> Scale products.


Collection pages: how to add a custom color, image as product option?

By default, theme shows CSS colors default colors - Color scheme

If you need to add some color with specific name or with specific image you can add this option using such instructions - Colors and images


Product page: how to change the buy now/buy in one click button?

“But it now” button (dynamic checkout button) is a core Shopify feature that is not being changed from the theme. We would like to change it but it can not be done technically. Shopify allows users to use this button as a simple shortcode without ability to change inner code.

Regarding dynamic checkout button you can read such default manuals: Shopify documenytation

The checkout method that's displayed on the button depends on a few factors: your payment settings, the customer's browser, the customer's device, the customer's personal payment history


Product page: how to make different/unique size guide for each product?

You can make this block unique for each product by using Metafields functionality.
Please watch the video for detail instructions - video


Product page: how to add a video?

From the latest version of our theme you can add a video/3d models to a product in the same way as in default Shopify in a product editing page in admin, in the field Media.

In the same way the functionality with Metafields works - video


How to arrange lookbook?

Please watch all details in the videos. All available functionality in our theme is here:
Lookbook Section
Lookbook Masonry Section


Contact us page: how to change the Google map?

Google map in our theme uses the official google Map widget from the official site. We haven’t changed this functionality, and we’re unable to manage the map in our theme.

Contact page

You need to configure your own map with google API API Key and Billing Errors

Source code of the map you can find here: Sections > contact-template.liquid


Manual theme update

We don't provide diff files in the package because everyone has customized websites. And this file may not be suitable for all customers.

Starting original version may be anyone from 1.6.0 to 2.1.0, so you will always have a different diff file.
This instruction is dedicated to help you in determining what changes were done and making updates in your current theme.

We can offer you an automatic update solution. But this automatic mode may overwrite your personal custom code and app settings. So we don't recommend it. We will describe this way at the end of this instruction.

We suggest using a diff file. And this instruction part will describe diff file creation.

Let's start - Diff file creation.

Please, make sure that you need the last update.You can read about update in the Changelog section -
Wokiee themeforest (at the end)

Attention:
If you don't need these changes, please ingnore this update. You will save your time :)
  • Download your item. By the theme's name you can define what basic Shopify version is supported. If you see in the name shopify2.0 it means that you are working with Shopify2.0 theme files.
  • Download the latest theme version - Themeforest instruction
    You should unzip the source package and choose the corresponding file according to your basic software admin version.
  • Transfer files in 1 same folder new created folder. To make the process easier, please make it in the root disc C.
  • Please, download this software and install it - https://git-scm.com/downloads
  • Open folder where we have copied version that we want and your theme up00
  • In new folder create new folder with the name "diff" up01
  • Please, copy your theme in diff folder. We will make source of your repository.
  • After you have copied theme in diff folder, click on the right mouse button. In the context menu you need to click: GIT BASH HERE up02
  • You should copy commands and paste them in git terminal.
    Attention:
    1 line = 1 command
  •  Process these 2 commands:
  •  You should process these commands in the terminal window one by one:
  •  Delete everything from folder "diff".
    After that you should copy the last theme version that is on the level up and paste it in folder diff.
    We exchange your theme with the new theme.
  •  Go to the terminal window and process each command one by one:
  •  Right now we need to determine serial numbers for each commit to get a diff file. You should launch this command in the terminal window:

    Report from this command:

    up03
  •  Command to create diff file looks like:
    git diff starting_number..new_version_number > userversion_to_newversion.diff
  •  To create command for the diff file, please follow instructions below: (Instruction is like example, you will have other codes)
    • Copy second text and set it on the first place: up04
      git diff 7fc4b4444e0289001db77d6d1d0627040d93dc7c ..new_version_number > userversion_to_newversion.diff

    • Copy text and set it on the second place: up05
      git diff 7fc4b4444e0289001db77d6d1d0627040d93dc7c..5098d104dbe0d3aead4661e945bf0751b896556e > userversion_to_newversion.diff

    • Resulted code insert in terminal window and press enter.

  •  In folder diff you can find a file with the changes in the theme: up06 File should be open in the text editor. To have highlighted text you can us notepad++
  •  Open in the browser your store with uploaded themes. Don't forget to make a backup with the original theme. Please, work on a duplicated theme.
Attention:
!!!This is not easy 5 min work. It requires your attention and some skills.

If you don't like the above described long process and are ready to sacrifice your customizations you can use another method.

  • Upload latest Wokiee theme version;
  • Install the app ExIm - Export / Import data from shopify app store. App is free. "ExIm - Export / Import data" allows to download all theme settings from your current theme;
  • When information is downloaded, you can import it in a new theme version;
  • When information will be transferred, you can copy your custom updates in the new installed version.
BACK TO TOP