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:

shopify 2.0 Shopify 1.0

Please pay attention to the setting below

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.

CURRENCIE 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
  • 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:
Application is not a free!

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 can use promo code for APP discount: get promo code

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

The most popular questions

GENERAL: PROBLEMS WITH INSTALLATION

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

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

GENERAL: HOW TO HAVE SOME BLOCK FROM 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.

GENERAL: FIND, 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

GENERAL: SLOW 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.

GENERAL: HOW TO MAKE UPDATE

If briefly the procedure of update:

  • 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.

GENERAL: HOW TO SHARE PREVIEW LINK OF 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.

GENERAL: 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: REVOLUTION SLIDER SECTION: SIZES

​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: 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: MEGAMENU ARRANGEMENT

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: 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: ADD 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: BUY NOW BUTTON, BUY IN ONE CLICK

“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: 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: ADD 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: 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

BACK TO TOP