Client-Only Apps

These apps are for RoarTheme's clients ONLY. They are made to help extending RoarTheme templates' capability, to complete the features that cannot be implemented within template technique.

To learn how to install this app type, please follow this instruction

Express Install

Features

  • Use this app to install any RoarTheme themes you purchased
  • Install any skins you like without complex uploading steps
  • You will always have the latest version of your themes with Express Install

Installation

To learn how to install a Client-Only App like this, please follow this instruction

Usage

  • Based on the Purchase Code you provided in the install process, the theme matched the Purchase Code and its skins will be listed. Just choose the skin you like to install Express Install
  • After choosing a skin you like, click Install Now to install. You can also choose Get the theme to get the skin file, but you have to upload it to your store manually then Express Install
  • The installed theme will shortly appear in your Themes section Express Install
  • If you purchase another RoarTheme theme, you can switch to that theme by Editing the Purchase Code Express Install
  • One Purchase Code is for one store only. Therefore, you cannot share the code for any other stores for multiple usages.
  • In case you need to move to another store, please Remove the code in current store first. Express Install

Express Slider

Features

This slider is developed by RoarTheme based on the famous and powerful Revolution Slider. You can easily build your own slider or banner with your own creation. There are 100+ templates for super quick setting up.

Installation

To learn how to install a Client-Only App like this, please follow this instruction

After the installation, the Dashboard of Express Slider looks like this: Express Slider

Understanding the Express Slider

  • You MUST make your theme PUBLIC before using Express Slider. All of the settings you make will apply to the PUBLIC theme ONLY

  • Express Slider allows you to create many sliders as you like: Express Slider

  • Whenever you made changes to slider, you MUST click EMBED SLIDER to refresh the slider to your Fastor theme, as well as to get the embedded code: Express Slider

Adding a Slider

  • In the dashboard, click Create Slider Express Slider

  • Choose a way to add a slider. We highly recommend you to add from templates Express Slider

  • Choose the one you like and click Install Slider Express Slider

  • You will be asked for the import source, please choose Online Express Slider Please wait til the importing is complete: Express Slider You will see the new slider added in your Dashboard: Express Slider

Editing a Slider

To edit a slider, just choose Edit in the Dashboard Express Slider

You will be led to the editor:

  • The Slides List (1): here you can add or remove slides of the slider. Clicking a slide to make change to its content via Slide Editor (3)

  • Advanced Settings (2): here you can find all advanced settings for each individual slide. You can ignore it

  • Slide Editor (3): edit your slide content here

Express Slider

Basically, to edit text or images, just double click on them. This editor supports editing from simple to complex. Contact us if you have any advanced inquiries in regards to the editor

Express Slider

Slide General Settings

Here you can find general settings for your slider, including: type, screen layout, timing, visual, parallax effect, navigation... If you are not familiar with these bunch of settings, you should leave it as default.

Click Settings in the Dashboard to open settings for a slider:

Express Slider

Express Slider

Embed the slider into a RoarTheme Shopify Template

To make the slider visible in your store, you MUST do all the steps below:

  • From the dashboard, refresh the slider neccessary source into your theme: Express Slider

  • Copy the embedded code: Express Slider

  • In your theme settings, go adding a section: Express Slider

  • Choose Express Slider to add: Express Slider

  • Paste the emmbedded code here then click save. That's all and your slider is ready! Express Slider

Express Slider

Wishlist

Installation

To learn how to install a Client-Only App like this, please follow this instruction

Usage

To active the Wishlist function in your store, installing the app is not enough, you MUST complete the final steps below:

  • Go creating a page for wishlist. Please note that you must set the Template as page.wishlist RoarTheme Wishlist

  • In the theme general settings, enable the feature and choose the page you just created. RoarTheme Wishlist

Lookbook

Features

  • This app allows you to put lookbooks into your store.
  • You can pin anything you like, such as products, pages... on the image of a lookbook

Lookbook

Installation

To learn how to install a Client-Only App like this, please follow this instruction

App Dashboard

In the app Dashboard, you can see all of your lookbooks. This app allows you to create various lookbooks as you want

Lookbook

Usage

  • If you create a new lookbook, you will be asked to choose a background image: Lookbook

  • You can see the editor screen then. You also see this screen when editing an existing lookbook: Lookbook When adding a pin, please enter the URL and the title for it. If you enter a product URL, the app can recognize and will set the title automatically

Display your lookbook

To display a lookbook, copy its embedded code and:

  • If you want to display the lookbook in Home Page, add a Custom Widget section and paste the code Lookbook

  • If you want to display the lookbook in a Page, create a page in your store admin and within the content editor, click <> button to switch to HTML mode and paste the embedded code here. Lookbook

  • If you know coding (HTML/CSS), just paste it into any places in the theme source code you want.

Ordered Products Notification

Features

  • This app can help boosting up sales by letting your shoppers know which products were purchase.
  • This app is working in 2 modes: using REAL orders data, or SIMULATION data

Ordered Products Notification

Installation

To learn how to install a Client-Only App like this, please follow this instruction

How it works?

By default, this app displays your REAL purchased products as a notification in the corner of the browser. To do this, it reads your orders data and show the ordered products.

Alternatively, if you don't like to show the real data, you can make a custom list of products you like to show. In this case, the app displays SIMULATION data. Of course, your shoppers never know if it's the fake data or note.

Customizing your message

Ordered Products Notification

In the app Dashboard, you can custom your message displayed in the notification. You can put the variables in the message, they will be replaced by the real data in front-end. HTML is also accepted if you like to use.

Here's the list of supported variables:

Variables Description
{{location}} The location of the buyer
{{product_title}} Product title
{{product_link}} Product link (URL)
{{time_ago}} Duration from the purchased time til now (in hours)
{{random_time_ago}} a random duration
{{full_name}} Full name of the buyer
{{first_name}} First name of the buyer
{{last_name}} Last name of the buyer
{{city}} City of the buyer
{{country}} Country of the buyer

For example, if I set the message:

{{full_name}} in {{location}} liked <a href="{{product_link}}">{{product_title}}</a> {{random_time_ago}}

Then this is what I have in front-end:

Ordered Products Notification

Using themes

There are 2 themes: Light and Dark for you to choose

Ordered Products Notification

Display Options

Ordered Products Notification

Using SIMULATION data

In case you do not want to use your real orders data, you can make your own custom list of products to be displayed.

First you need to enable Display custom notification instead of real data option then click Add custom notifications

Ordered Products Notification

Ordered Products Notification

360 Degree Product View

Features

This feature allows you to combine multiple images (frames) of your product from various view into an animated video. You can check the sample here

360 Degree Product View

360 Degree Product View

Installation

To learn how to install a Client-Only App like this, please follow this instruction

Usage

  • If your Purchase Code is valid and the installation is complete, you will be redirected to App Dashboard: 360 Degree Product View

  • You can make animation from up to 72 images (frames). The 360° View requires at least 2 frames to be visible. The more frames you set, the more smooth animation is 360 Degree Product View

Metafields Manager

What is Metafields?

Sometimes, you need to put more information into a certain product. For example, you need to attach a countdown of sale into a product. Basically, you cannot do this because there is no place for you to put this info in your store admin. In this case, we need metafields.

The metafields (metafields object in full name) allows you to store additional information for products, collections, orders, blogs and pages.

This app help you to add/edit metafields of any products, collections, orders, blogs, pages in your shop. Metafields CAN NOT be accessed via your store admin, it's transparent to even store owner. It can be read ONLY VIA source code. Therefore, this app is used as a supplement for other RoarTheme apps ONLY. Please use under an instruction ONLY

Installation

To learn how to install a Client-Only App like this, please follow this instruction

Access the metafields

You have 2 ways to access the metafields of an item (product, collection, blog...). For example, a product:

  • From the app Dashboard: 360 Degree Product View 360 Degree Product View

  • From your product admin: 360 Degree Product View

Add/Edit a metafield

A metafield consists of a namespace, a key and a value. Use the namespace to group different metafields together in a logical way.

For sample, if I am told to add a metafield with given info:

Namespace Key Value
additional_info warranty 2 years

Then I should do:

360 Degree Product View 360 Degree Product View

To edit an existing metafield, select it in the dropdown, then type your new value. Please note that the namespace and key can NOT be changed. You can remove an entire metafield, but cannot edit its namespace or key:

360 Degree Product View

Of course, please do remember to click Save to keep the changes.