Wokiee - responsive Shopify theme user guide

Frequently asked questions

• What to do if I see errors while theme uploading?
• How to get some layout/skin?
• How to have some block from the other layout?
• How to edit some text in languages section in admin edit languages?
• How to increase a store speed?
• How to make the update?
• How to share a preview link of an unpublished theme?
• How to create wishlist, compare pages?
• Home page: what sizes should be in the revolution slider section?
• Home page: why video isn’t played in revolution slider section?
• Home page: how to upload, add video in Shopify admin and then add it on revolution?
• Header: how to arrange the megamenu?
• Collection pages: how to make a vertical alignment of options, titles in product cells?
• Collection pages: how to add a custom color, image as product option?
• Product page: how to change the buy now/buy in one click button?
• Product page: how to make different/unique size guide for each product?
• Product page: how to add a video?
• How to arrange lookbook?
• Contact us page: how to change the Google map?
• Manual theme update

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:

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

• 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
• In new folder create new folder with the name "diff"
• 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
• You should copy commands and paste them in git terminal.
  Attention:

  1 line = 1 command
•  Process these 2 commands: git config --global user.email "you@example.com" git config --global user.name "Your Name"
•  You should process these commands in the terminal window one by one: git init git add . git commit -m "User version"
•  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: git add . git commit -m "New version"
•  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: git log

  Report from this command:

  
•  Command to create diff file looks like:
  
  git diff starting_number..new_version_number > userversion_to_newversion.diff
  git diff .. > 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:
    git diff 7fc4b4444e0289001db77d6d1d0627040d93dc7c ..new_version_number > userversion_to_newversion.diff
    
    
  • Copy text and set it on the second place:
    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: 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.

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.