ShopApp - WooCommerce Theme

Contents

1. Getting Started with ShopApp

2. Select a Home Page

3. Select Blog layout (2 Columns, Smal, No Image, Central)

4. How To add a Social menu

5. How To use WooCommerce

6. How To use Visual Composer

7. How To add categories filter on the Shop page

8. Enable/Disable Quick View

9. How To Create a Contact Page

10. Select Product Layout on Shop page

11. How To create a Top Bar

12. Disable Animations

13. Create a Full width Shop page

14. Add Content before the Shop page

15. How To create the About Us page

16. How To change the Site layout

17. Display or Remove Login Icon from Header

1. Getting Started with ShopApp

Welcome to the Getting Started guide for ShopApp Theme, please you can take a look at the information below to start using the theme.

Index




Installing the Theme

So you've purchased our theme and you're ready to get started-- great!

When you purchase a ShopApp license from ThemeForest & download the theme package, you will receive a zipped folder titled "themeforest-xxxxxxxx-shopapp...".  Unzip this first folder. 

Within the unzipped theme package, you will find a number of folders such as design, license, etc. There is also 1 additional folder within, titled "Theme".

Inside this folder is the ZIP file with the actual theme, this file is called "shopapp.zip".

Important: DO NOT unzip this "shopapp.zip" folder! This particular .zip folder should remain zipped.

That's the ZIP file you have to upload to install the theme.

So let's go to your WordPress Admin Panel, and then to Appearance > Themes, then click on "Add new":

Then click on "Upload Theme":

Click "Choose File" > find your zipped "shopapp.zip" file > Click the "Install Now" button.

Once the theme is successfully installed on your WordPress, you can "Activate" it:


Please note: If you try installing the entire zipped theme package or another incorrect file, you'll likely receive this error message:

"The package could not be installed. The theme is missing the style.css stylesheet. Theme install failed."

If you receive this error message, please be sure that you're installing the ZIPPED file titled "shopapp.zip".

More info about that error on this link:

https://help.market.envato.com/hc/en-us/articles/202821510-Theme-is-missing-the-style-css-stylesheet-error


Back to Top



Recommended Plugins

The theme includes plugins that you should install and activate to enable certain options.

Note: these screenshot are for demostration purpose, your theme may not need all the plugins in the screenshots. Just follow these steps and the theme will know which plugins to install.

Step 1 Right after installing the Theme you will see these next step:

Cursor_y_Manage_Themes_‹_Generic_—_WordPress

Click on Begin installing plugins

Step 2 Click like the image to select all plugins in the list:

Cursor_y_Install_Required_Plugins_‹_Generic_—_WordPress

Then select Install and click Apply

Cursor_y_Install_Required_Plugins_‹_Generic_—_WordPress

The installation process will begin.

Step 3 Once all plugins are installed click on Return to Required Plugins Installer:

Cursor_y_Install_Required_Plugins_‹_Generic_—_WordPress

Step 4 All plugins are installed, now we have to activate them. Like before, select all plugins from the list, and this time click Activate:

Cursor_y_Install_Required_Plugins_‹_Generic_—_WordPress

Step 5 That’s it! Once all plugins are activated you will see this:

Captura de pantalla 2016-02-17 a las 14.58.16


Back to Top


Importing Demo Data

Optionally, you may install our demo data, which will populate your site with the pages you see on our live demo. This can give you a head start in setting up your site. Once you get your site setup and get the hang of it, you may delete the unwanted posts or pages as you see fit.

You can download only the XML Import File if you want or you can use the One Click Demo Install, this way with just one click you get the same site that you see on the demo.

For this, first make sure you have installed the One Click Demo Import plugin. You can follow the instructions in Recommended Plugins to install this plugin.

Ok, now let's go to your Admin Panel > Appearance > Import Demo Data:

There you will see all the demos aveilables, you can click Import on the one you want.

This may take a few minutes, just wait until it says it is done.

For the demos that have a Slider from Revolution Slider, you will have to import those slider separately. 

First, download the Sliders from here:

Slider 1

Fullscreen

Go to your Admin Panel > Slider Revolution, and click on Import Slider:

And select the Slider to import:

Click Import Slider and that's it, now you will have your site like the demo, including the sliders.


Note: All the images were replaced with placeholders, this is to make the import process much faster and to avoid copyrights issues with the images.


Back to Top




Theme Options

All theme’s options are in the WordPress Customizer Appearence > Customize. Here you can select things like the styling colors, change typography and much more.



Back to Top



Change Colors

All color options are in Appearence > Customize > Colors. Select the color you want and then click on “Save & Publish”.


Back to Top



Child Theme

Using a Child Theme has many advantages, for example you can do any modifications you want to the files without loosing them on future updates.

So, if you want to start a Child Theme use this template as starting point: ShopApp Child Theme

2. Select a Home Page

You can use any pages as home page on your site. On the demo site we use the Shop page as home page.

To do this, go to your Admin Panel > Settings > Reading and select any page as Front page:

Then click on Save Changes.

3. Select Blog layout (2 Columns, Smal, No Image, Central)

There are 4 type of layout for the blog than you can choose from:


Go to you Admin Panel > Appearance > Customize > Blog Options:

And there select which one you want:

Click Save & Publish  and that's it.

4. How To add a Social menu

You can create a social menu just by adding your social URLs as a menu item.

First go to your Admin Panel > Appearance > Menus and click "create a new menu"

You can name it "Social" then start adding Custom Links with your social URL, like this:

Add all you social profiles and it should look something like this:

Then select the Menu Location, in this case will be the Social Menu location, and you will see the menu in the footer or on all other location where the social menu should be.

Click "Save Menu" and that's it.

On your site should look something like this:


5. How To use WooCommerce

This theme supports WooCommerce plugin to install it, please follow the instructions here:

Getting Started with ShopApp > Recommended Plugins

If you need help on how to use WooCommerce, please take a look at the plugin's documentation:

WooCommerce Docs

All the Theme's options for the shop are in Admin Panel > Appearance > Customizer > Shop Options

6. How To use Visual Composer

Visual Composer is a plugin that will help you managing your content on your WordPress sites and create stunning layouts in few minutes without coding.

You can create pages as always in WordPress or use the Visaul Composer as help.

Visual Composer is included in Glaciar, follow the instruction here to install it:

Getting Started with ShopApp > Recommended Plugins

And here you can find the documentation for the Visual Composer itself:

 Visual Composer Documentation.

7. How To add categories filter on the Shop page

If you are using WooCommerce, you can add a filter on the shop page with your categories:


Select the categories you want for that filter by going to Admin Panel > Appearance > Customizer > Shop Options

And check the categories you want:


Then click Save & Publish

8. Enable/Disable Quick View

If you go to the Shop page on our demo, you can see a really cool effect when you click on any product:

http://demo.quemalabs.com/shopapp/


This is a Quick View, this way customers can see more details about the product without leaving the main shop page.

You can enable or disable this feature on your Admin Panel > Appearance > Customize > Shop Options > Show Quick View:


Also you can customize the background for the images on this Quick View. This is for a better look with your images.

Right next to the previous option you will find the color picker:


9. How To Create a Contact Page

Go to your Admin Panel > Pages > Add New and click Backend Editor:

This will show the Visual Composer editor, then click on Add Template:

Select Contact Page from the list:

You will see this content on your page:


For the Contact Page we are using the contact form shortcode from Jetpack, so make sure you have installed Jetpack

If you edit that text block, you can edit the form or create a new one using this button:


10. Select Product Layout on Shop page

There are two layouts for the products on the shop page, one with only the image and other one with image and text:

You can select this on your Admin Panel > Appearance > Customize > Shop Options > Product Layout:


11. How To create a Top Bar

If you want you can use a Top Bar on your site, there you can include a text and a WP Menu:

For this go to your Admin Panel > Appearance > Customize > Top Bar Options:

There you can enable the Top Bar, choose your text and the background color.

If you want to add a menu, go to Appearance > Menus, create a new menu and select Top Bar as location:


12. Disable Animations

By default the theme has some animations to make the user experience more pleasant, if you don't want this animations, you can disable them by going to your Admin Panel > Appearance > Customizer > Site Options

Then select Disable for the Site Animations:

Click Save & Publish and that's it.


13. Create a Full width Shop page

By default you have a narrow shop page:

But you can have a full width shop page like this:


Just go to your Admin Panel > Appearance > Customize > Shop Options > Shop Page Layout:


14. Add Content before the Shop page

By default WooCommerce doesn't allow to add content on your Shop page. But with ShopApp you can.

Just create a regular page with any content you want and then go to your Admin Panel > Appearance > Customize > Shop Options > Page before Shop:

And then you will see the content from that page before your Shop page.

This is useful if you want to add banners or sliders above your Shop page.


15. How To create the About Us page

There are two About templates created by default that you can use. You will need the Visual Composer plugin installed, follow the instruction here to installed in case didn't already:

Getting Started with ShopApp > Recommended Plugins

Now go to your Admin Panel > Pages > Add new,  you can put any title, in this case "About".

Switch to the Backend Editor from Visual Composer:

Then click on Add Template:

There you will see the two About templates, let's select the "About Me" for example:


That will add every element automatically:


Now you can start editing the elements to fit your needs. If you need help on how to use the Visual Composer, please take a look at the documentation of the plugin:

Visual Composer Documentation



16. How To change the Site layout

You can choose from 2 layouts, the header at the top and the header as a sidenav:


For this, go to your Admin Panel > Appearance > Customize > Site Options and select a layout:


17. Display or Remove Login Icon from Header

As you can see on the demo there is a Login icon on the header:


You can add or remove this icon from your Admin Panel > Appearance > Customize > Shop Options > Display Login Icon on header:


This icons links to your "My Account" page on your WooCommerce Settings: