Theme Installation
1. Install with Arena Dashboard Shopify App
Let’s begin the first step of building your dream online store!
This step-by-step guide will show you completely how to install and verify your purchased theme.
Google Chrome Browser is a requirement for installing and operating the theme and all its features.
For a complete visual tutorial, please view the video below:
Step 1: Installing Required App and Extension
In order to install the theme or the other themes in our store, you will need to install 3 essential app and extensions. They also play a pivotal role in helping you navigate and customize our theme swiftly and effectively. They are:
- Arena Shopify Admin Extension
- Arena Dashboard App
- Arena Dashboard Importer Extension
To install them, please follow the step-by-step instruction below.
Installing Arena Shopify Admin Chrome Extension
- Arena Admin Chrome Extension support to import our Demo Store Menu (Navigation) to your store. To enable it:
Installing Arena Dashboard Shopify App
- Go to .
- Click Install Button.
- Input
Your Shopify Store URL
, clickLogin
.
Shopify Store URL form are usually:[examplestore].myshopify.com
Sign in
to your Shopify account.- Click
Install unlisted app
. - Use the app in the following step.
Installing Arena Dashboard Importer Chrome Extension
Arena Dashboard Importer helps in installing our theme to your Shopify store. To enable it:
- Go to
- Click
Add to Chrome
to install this extension. - Click
Add extension
. - Arena Dashboard Importer is now ready to install your theme.
Step 2: Adding Your License Code
1. From your myShopify Admin Homepage, go to Apps, click Arena Dashboard
. 2. Click
Add Your License Key
. 3. Insert the purchase code and click
Active License Key
. You can copy and paste the code from the License certificate & purchase code you downloaded through ThemeForest (Envato).
To find your purchase code, please expand this line and do as follows:
- Log into your ThemeForest (Envato) account and hover above your username in the top right corner to access the dropdown list. Select
Downloads
. - Find the theme in the list of item(s) you have bought.
- Click the
Download
button next to the theme.
From the drop down menu, click ‘License certificate & purchase code’ (available as PDF or text file). It is better to download the text file so you can copy and paste the purchase code when adding the license key to Shopify. Open the file and you will find the purchase code.
Here is an example of a PDF License certificate and purchase code:Source
Or click here to view in another window.
After your license code was added, a confirmation banner will appear:
4. Your purchased theme will now show in the ‘Licensed’ board.
Step 3: In order to add more theme Licensed Keys, repeat Step 2.
Step 4: Install the theme
To begin working on your store, you will need to unapck and upload the theme pack.
To do that, you can install the theme via the Theme Installation Wizard by doing the following:
1. From the Arena Dashboard
app admin, click the second tab Theme Installation
.
You can also click on the Theme Installation
button on the theme tab in the License board.
2. Then when the ‘Installing New Theme’ screen appear, click Setup Wizard
.
3. Select Theme package & click Next
.
4. When the ‘Select Preset Demo Style’ box appear, select Version
and Preset
.
- You can only choose 1 from the presets the theme offers per installation. You can always choose another preset in your next installation.
Before switching your published theme
Once you bought the theme, as long as you only publish the theme for 1 domain, you can install as many presets as you want to switch between them for your site end purpose.
Please be aware that all your installed third-party apps, code modifications, ‘.js’ and ‘.css’ files will be valid for the theme you have made those modifications on.
This means when you switch to another theme, these modifications will not be apply for this newly published theme and you will have to make the same modifications again.
- Please take a look at our list of presets and live Demos on the theme’s page on ThemeForest to experience what you will get from each preset. This can be done by going to our portfolio on ThemeForest > hover your mouse over the theme’s icon > click
LIVE PREVIEW
> click on the preset you want to experience. - Preview of each preset will also appear on the left of the box with each preset you click on to help you better grasp the theme it offers.
- Click
Install Preset
. The app will install this theme package to your store right away!
For this tutorial I will install the preset ‘default’ of the version ‘1.0-fashion’ as seen below.
TIP
While there are options to skip installing the Collection and Product metafields, this will also prevent you to experience what the full extent our product can offer. However, if you are familiar with us and our product, you can choose these options to drive the installation process faster.
Please be advise: once the installation process is done, if you clicked these two
Skip
options, you can never experience them in the Demo. The only way to get them is to reinstall the theme.
If you have already has your own materials, click Skip
to pass the import Theme Package step. This will stop import new theme package process to your store.
5. Check the Content Component you would like to import & click Import
.
- Installation and activation of the Arena Dashboard Importer Extension is essential to import the Demo theme. If you had not install and activate the extension, you can click on the
Install
button to add the extension to your browser.
Please be aware that this is a Chrome-only extension and it is advisable that you install the theme and import the Demo on Google Chrome.- Wait for tasks to finish.
- While importing, a dialogue box will appear and request to open Navigation. Click
OK
. - A new window displaying Navigation section will appear. Click
Arena Menu Import
.
- Wait for the task to finish and close the window.
- Wait for tasks to finish.
***If error were to occur during import process, there are 2 possibilities:***
- You may not have installed and activated Arena Dashboard Importer Extension on Chrome.
- This is a result of a duplication in materials due to a previous unsuccessful theme install attempt or simply duplicate materials between installations.
For the first possibility, the error screen will be as followed:
- When import task finish in this manner, just click
Skip
. - Make sure you have installed and activated Arena Dashboard Importer Extension on Chrome. After that, when you click
Skip
, the ‘Uploading sample files & images to your website’ dialogue box will appear. Please go to the next step to continue.
For the second possibility, the error screen will be as followed:
- When import task finish in this manner, just click
Next
. The ‘Uploading sample files & images to your website’ dialogue box will appear. Please go to the next step to continue.
6. Upload sample images and files to your store
Click Download images.
Extract / Unzip the files. If you don’t know how to extract, please follow the link below for further details.
Read more: How to extract file.
Go to Files in the Settings button locate at the lower left corner of the myShopify Admin Homepage.
Upload all files in the folder you have extracted. Then close the window.
How to upload files on to Shopify:
- From your Shopify admin, go to
Settings
>Files
. - Select all the files in the folder you have just extracted.
- Click
Upload files
. - Select one or more files to upload. Click
Open
.
- From your Shopify admin, go to
7. Integrating Shopify App into your theme
- You can choose to Install all the suggested apps into your Shopify at this point by clicking the
Install
button on each app, or finish the theme installation process here by clicking theFinish
button. - The Integrating Shopify App details will be covered in the next article. You can access it by clicking here or scroll to the end of this page and click
Integrating Shopify App
at the lower right corner.
2. Manually
2.1 Theme Package Upload
- Download
theme package
from ThemeForest Download. - Unzip/extracted the file on your computer.
If you don’t know how to unzip, read more How to Unzip Package
You'll see 4 folders inside: . ├─ arenafont --> contains icon font arenafont and detail ├─ theme-package (aka upload) --> contains the theme's package zip files │ └─ package-theme.zip ---> Upload theme package to Shopify └─ pre-setting --> contains the sample data file `settings-data.json` as our demo. ├─ documentation --> User Guide folder └─ readme.txt
- From your Shopify admin, go to
Online Store
>Themes
- In the
More themes
area, clickUpload theme
. - From the
Upload theme
,Choose File
to select the.zip
file that you want to upload. - Click
Upload
. The theme will be added to the Themes page of your admin.
It is installed, but not published
. When you’re ready to unveil your new look to the world, click Publish theme
.
2.2 Change Demo Preset Setting
The settings_data.json file stores the theme settings data saved from the theme editor. It can include “theme styles”, also known as Presets.
- From your Shopify admin, go to
Online Store
>Themes
. - Find the theme you want to edit, and then click
Actions
>Edit code
- Locate and click on the
Config
>settings_data.json
- Replace current
settings\_data.json
by the new one atpre-setting
folder- Open
setting_data.json
inpre-settings
folder. Click to Open. - Copy & Paste content to settings_data.json in Web Browser.
- Click
Save
- Open
Publishing Theme
- Once the installation is finished, you can publish the theme to see first hand how it will play out on the web.
If you have installed the Demo package, the theme will now be lively with demo images to help you understand further the functions of each section. - If you have installed multiple Demos, the theme you choose to publish will be the one customers actually see when your store goes live.
- To publish a theme, simply go to the Arena Dashboard app in the
App
section of your myShopify Admin Homepage > choose theTheme Installation
tab > scroll down to the list ofInstalled Themes
> ClickMore actions...
button on the theme you want to publish > ClickPublish
. - After publishing the theme, you can view the theme in action on your domain [your chosen name].myshopify.com
In the next step, we will go through the installation and integration of useful Shopify apps that will help boost customer’s engagement and ease their buying process. You can access it by clicking here or click Integrating Shopify App
at the lower right corner.