Few style changes: If you only want to do few style changes, I suggest you to use Custom Css box in Theme Options > General > Display > Custom Css. (this will override all other styles and it saves in database so it stays even if you update the theme)
Heavy style modifications: If you want to do heavy style modifications, I suggest you to find custom-sample.css file in the THEME, rename this file to custom.css and enter styles inside it. Why this way? Because, this file is loaded in the end so the styles you put here will override the previous styles. Also custom.css file doesnt come with theme so this file stays even if you update the theme.
Heavy customization: In case you are a developer and want to do heavy customization like overriding files, I suggest you use blank child theme (Find it in /Resources/js-child) for your customization so that you will not loose your changes when new version arrives.
Note: Theme has been updated regularly, so few screenshots/images in this documentation might look different then actual wp-admin area, but they are still relevant regardless of their appearance.
This documentation is your guide to setting up the theme, configure basic options and getting up and running with a functional WordPress site/blog/estore. I urge you to please go through this thoroughly so you can avoid potential future problems or any incorrect configuration settings.
IMPORTANT, PLEASE READ BEFORE CONTINUING : From version 6.0 JustShop now has feature of Auto import of any of demo websites. Now There are 2 simple steps to import demo sites as-is. As soon as you activate the theme here is what you should do to setup website like demo.
Step 1: Install and Activate bundled plugins by going to Appearance -> Install plugins ( this menu is added by theme, so you will only see this when theme is active)
Step 2: Go to Theme-Options / Demo Importer for 1 click setup.
Note: Once activated WooCommerce plugin asks you to go ahead with Setup on top notice bar, you can skip that while importing demo, as that can be done later. Other plugins too put notices to enter activations keys etc to get updates. You can disable/hide all of them as you will get updated version of all bundled plugins with theme updates.
Above process is technical and might not work on all servers depending on their technical setups. Please follow above steps first and check if your website frontend has been setup as the demo you desired. If yes, you can skip all installation instructions below and move to Main Setups link from top menu of this page.
All instructions below are old, and are here only if the auto demo import does not work given the hosting problems for some customers.
If auto import didnt work well, and you want to setup things manually, below are the steps. To avoid setup problems, please follow the steps in the order they are written.
* Skip to here if above auto installer worked. * Quick list of Installation steps explained below
Please note that it is important you follow these steps in the order they are written to avoid any problems with settings.
Click 'Install Now' and wait for the success message.
Hover your cursor over theme's thumbnail and you can see a blue button to Activate it.
You will be taken to Theme Options page. At this point Justshop theme is activated and ready to be customized.
Now, if you want your site to look like demo site, go to Theme-Options -> Import export settings.
Click Import from File and paste the content if file here, which can be found in <main-download>/Resources/import-data/layout* (themeoptions files for given layout is placed in given folder.) folder of your download (This .json file contains default Theme-Options settings which apply to your site's Theme-Options automatically, so that you can immediately start working with your own content without spending too much time to customize in Theme-Options.) However, you may need to put in your own logo though.
You will see "Settings successfully imported. | Return to Theme Options"
(Note: If you see a "missing stylesheet" problem, you are uploading the wrong zip file. Please unzip the package you downloaded from themeforest and upload justshop.zip (approx. 15MB)
B) Using FTP manual upload (Skip this step if you have done steps just above this section)
First, unzip the downloaded zip archive you have received from Themeforest.net on your computer.
Look for justshop.zip file inside it and extract that folder separately onto your computer. (Note: this is the folder which actually contains all required theme files.)
Navigate to your webserver's path where wordpress is installed and go inside /wp-content/themes.
Unzip justshop.zip and upload the whole justshop 'folder' here directly.
After successful completion of the folder's upload, go to WordPress admin dashboard and click on Appearance > Themes. You should now see 'Justshop' theme listed and its thumbnail preview.
Click on 'Activate' and then you'll be directly taken to the theme's options page.
Now, please follow Step 7,8,9 from A).
Plugins (Skip if Auto import is successful)
Justshop theme has been built with robustness in mind. Its true that not everyone needs all the functionality provided in the theme. So, rather than having a website bloated with 100 features that you may not need, some additional features are kept separate just so that you can install and use only if you need them.
To make it easy for you, we have integrated a 1-click plugin installation module in the theme.
So, to install these 'recommended' plugins, please go to Appearance > Install Plugins page and select the ones you want.
Plugins integrated with Justshop
Revolution Slider (Massively popular and really cool slider plugin)
WPBakery Visual Composer (Drag and drop page builder plugin)
UVC Addons Plugin
Tip: Documentation for plugins is included in documentation/other-documentation folder.
First, you should normally go to Plugins -> Click 'Add New' and put "woocommerce" in search term and follow instructions to successfully complete its installation. If you are really facing trouble, check this 1 minute video: http://www.youtube.com/watch?v=pXQbyg7eW5k
After activating WooCommerce plugin, It is recommended to skip installing WooCommerce pages because the pages already bundled with demo data xml file (see below section).
This way we can avoid conflicts with 'slugs' and/or duplicate named pages.
Demo Data (Skip if Auto import is successful)
How to install demo data
Please go through these steps:
Go to Tools > Import.
Before clicking on 'WordPress' you might see a popup here to install the wordpress importer plugin, so please install it.
Upon successful upload, you will next be asked to 'Assign Authors'. You can choose or leave it untouched.
Select checkbox on for 'Download and import file attachments' and hit Submit.
Wait... if you see some failed messages, absolutely no need to worry about them. What matters is you should see on bottom of the page "All done. Have fun!" :-)
Note: At this stage, you will not see homepage like demo website as of now, it is explained here.
If importing went successful, you will see menu already. To Setup menu as per your need, please go through these steps:
Go to Appearance > Menus.
In Manage Locations tab, you can choose the menu from dropdown list for Primary Menu.
If you are not seeing certain block on left side, for example Product Categories, please click on "Screen Options" on top right corner and select its checkbox and reload the page.
Always hit "Save Menu" if you are satisfactorily done modifying the menu.
If you already have imported demo data xml file, then you can see a pre-built imported menu.
Go to Appearance > Menus and click on Screen Options tab on top right of your screen. Under 'Show advanced menu properties' click checkbox on for 'CSS Classes'.
Determine the top level menu item (example: Elements) which serves as the main one.
Dropdown the menu item arrow and add the text megamenu in the metabox of 'CSS Classes (optional)'
Now, when you add 2nd level sub-menu item (example: Content) under the above one, you have to add the text heading in CSS Classes (optional).
Inserting icons in menu items
We have neatly integrated FontAwesome Icons into Justshop theme. You can use them almost anywhere in theme. A fine example to see them in action is in the menu items. Just hover your cursor over the 'Elements' menu item in demo site.
Go to your menu item, dropdown its arrow and paste the code in 'CSS Classes (optional)'
Here we see how to setup homepage exactly like seen in demo website. The blocks of homepage can be enabled/disabled by going to Theme-Options > Homepage > Homepage Setup. Any particular block can also be further controlled with your own choice of settings.
Please note there is also a new widget area called 'Homepage' in the Appearance > Widgets. When you place widgets in this section, it replaces "Product Category" section of homepage (i.e. the first row of three image thumbnails below the slider).
Steps to Create homepage
Homepage is just a page with a custom page template having "Custom Homepage". So, first step is go to Pages > Add New and create a page. Select Page template as "Custom Homepage"
If you have imported demo data xml file, then a page called Homepage should already be present.
Go to Settings > Reading and choose 'A static page' > Front Page: Homepage.
We are applying this step to act that page as a the main homepage of the site.
Done. Now on homepage you will see newly created homepage with home page blocks.
Note: By default, the content area is turned off for the above mentioned homepage, but did you know... you can also activate your custom content in it? The content you enter in the page template editor box will appear on bottom of homepage.
Widescreen mode allows you to have a fluid layout. Justshop theme by default has ‘boxed’ layout having 1000px fixed width but enabling Widescreen mode allows you to have a fluid layout. Main container with white background (which has the headline “Full/Boxed width”) will flow horizontally to as much full width available.
But nevertheless, your content will still be inside 1000px width visible expanding (or contracting) accordingly on all devices.
Here you can choose to have either a Custom Logo (image) or Text Title in header.
Go to Theme Options > Quick Start and choose only one.
Custom Logo: For this, you have to upload or insert the image path to display logo. Click 'Upload' button and select your logo jpeg/jpg/png (.gif is not recommended)
Note: If your logo looks misplaced, you can set its positioning by putting values in Logo Offset found just below Custom Logo field. Also, please remember the Site Title and Tagline comes from wp-admin Settings > General
Hit 'Save All Changes' to apply the changes and visit the front end.
Choosing between 6 different Headers
You have a choice to apply any one of the 7 different Header layouts provided in this theme. You can choose only one from Theme-Options > Layout (Sidebar / Header) > Header Layout.
For a quick look, checkout the header options here: default
You can apply common settings to display custom headline content and you can also customize them for individual pages/posts.
There are some settings which you can use to further customize headline area for Pages/Posts:
Disable headline area from this page: If disabled the headline area will not appear on this post/page. The settings will not make any difference if this is globally disabled from Theme-Options panel. If disabled, breadcrumb will be shown on headline area instead.
Heading Title: Enter the headline which appears on the top in headline area as heading. Leave blank to show default that has been entered in Theme-Options.
Headline text: This text appears in headline area below heading. Leave blank to show default that has been entered in Theme-Options. (If you don't want any headline subtext particularly for this page, enter blank space.)
Hero/Slider Area Content: This content appears on the header area, you can use it to place slider particular for this page/post/product or any other image or content. Shortcodes allowed. e.g. [rev_slider portfolio-slider]
To apply global settings, go to Theme-Options > Slider & Headline > Headline Options.
If you have imported demo site, then Show Headline Section Globally and Enable Default Headline Title and Message aer already checked on by default as you can see some pre-filled Headline and Message from the images above
Setting up Portfolio/Cakes page comprises 2 parts.
Part A: Create Portfolio/Cakes Items.
Part B: Create a page to show those Portfolio/Cakes Items.
Part A: create items
Go to Cakes/Portfolio > Add New to create your own entries. It is best recommended to create new items instead of re-editing the pre-built ones already there.
Part B: setup page
Create a page first and choose 'Portfolio (or Cakes)' as its name. (You can of course give it your own name).
Then choose your required 'Page Template' from the choices given below. See these options under Page Attributes > 'Template'.
Portfolio One col
Portfolio Two col
Portfolio Three col
As you can see, the only difference in between these portfolio page templates are sizes of columns on a single row.
Once you finish setting up page (Part B), it will list all the Portfolio/Cakes items from Part A with their categories as headings which when clicked, sorts the items nicely.
Go to Testimonials > Add New and add your entries there for each of your item. If you have imported demo data xml file, then you can already see a few samples we have there. You can easily edit them.
On the testimonial editor page, you will find options
To enter Gravatar email address (If you enter this, thumbnail for this client will be fetched from his gravatar, if not, you can upload a custom thumbnail from Featured image section just on right side of this Gravatar field)
Byline (Post of the client ie: CEO of Blah, blah..)
URL (URL of clients site).
You can use a widget called JS-testimonials to show them on front-end. In case you need, there is a shortcode too for testimonials that you can use on any post/page.
You can use this shortcode in any post/page/custom post type or in a sidebar text widget or as a template tag.
[templatation_testimonials limit="10" size="100"]
Parameters for Testimonial Shortcode available are:
'limit' => 5 (the maximum number of items to display)
'per_row' => 3 (when creating rows, how many items display in a single row?)
'orderby' => 'menu_order' (how to order the items - accepts all default WordPress ordering options)
'order' => 'DESC' (the order direction)
'id' => 0 (display a specific item)
'display_author' => true (whether or not to display the author information)
'display_avatar' => true (whether or not to display the author avatar)
'display_url' => true (whether or not to display the URL information)
'echo' => true (whether to display or return the data - useful with the template tag)
'size' => 50 (the pixel dimensions of the image)
'title' => '' (an optional title)
'before' => '<div class="widget widget_woothemes_testimonials">' (the starting HTML, wrapping the testimonials)
'after' => '</div>' (the ending HTML, wrapping the testimonials)
'before_title' => '<h2>' (the starting HTML, wrapping the title)
'after_title' => '</h2>' (the ending HTML, wrapping the title)
'category' => 0 (the ID/slug of the category to filter by)
The various options for the "orderby" parameter are:
This section explains how to put widgets in different sidebars to show in different pages.
If you do not need different sidebars/widgets, please skip this section.
I kept JustShop Theme compatible with WooSidebar plugin instead of implementing this feature in theme itself. Why? Mainly because most users may not need different sidebars on different pages, but if you really want, you can do it easily using this plugin.
Install woosidebar plugin. (its already in recommended plugins list so you might have already installed it during installation process above) .. Easy way to install: Go to Plugins > Add New, search for "woosidebar" and install the 1st plugin that comes in list.
Logic of WooSidebar Plugin: This plugin creates a separate sidebar for a condition that you provide. eg Widgets placed in 'Primary Sidebar' can be shown only for Contact Us page. This new sidebar would create another widget area and it will replace Primary Sidebar in contactus page.
Step to create new widget area: Go to Appearance > Widget Areas > Add New.
For e.g. if you create a new widget area called "Sidebar For Shopping Pages" and choose to only show widgets for Pages, then you can do so (and this sidebar will not show up in posts/products etc). Then it is available to drag n' drop widgets in it.
Here you will find settings to fully customize footer widgets
You have choice to display default, 1, 2, 3, 4 columns in footer widgets. Based on the columns you select in Theme-Options > Footer Customization.
You will see Widget areas generated in the Appearance > Widgets.
To activate footer widgets, go to Appearance > Widgets and just drag n' drop in the areas provided.
I have used and included Revolution slider http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380 (extended license was bought by me, permits you use only with this theme.) with this theme because it is very powerful and at the same time really easy to use. During the installation of theme you should have already installed Revolution Slider plugin. If you haven't, please go to Appearance -> Install plugins to install and activate it.
Documentation from plugin author is included in Documentation/other-documentation folder together this file.
To setup Revolution slider on homepage:
Create (or import) a new slider and copy the generated shortcode.
Paste it in Theme-Options > Slider & Headline > Slide Settings.
By default the slider will appear only on page whose Page Attribute is set as "Custom Homepage". However, you can define separate slider/Hero area for any particular page from bottom of page editor. If you want to show slider on whole website, there is an option to enable or disable that too.
For advanced users/developers: You can use any kind of data in 'Slider Area Content' metabox (in Theme-Options) and it will be shown on the slider section (Hero Area) instead.
Justshop has several useful Page Templates, some of them are...
To use any of the above mentioned page template, just create page from Pages > Add New and select the template of your choice from Page Attributes section.
How to use Visual Composer Page Builder
Go to Settings > Visual Composer. (Changing default settings is not recommended).
When you create any post or page, you can see the blue button "Visual Composer" to activate it.
You will see options to start building (or composing) content and layout for your post/page.
Surely, you can be as creative as you want and build your page having a unique layout for itself. If you want to reuse a certain layout you have created, then you can use the "Templates" button to save your layout for future use. You can test drive Visual Composer Interface yourself.
If you have imported demo data content.xml file, then you already get several pre-built pages created using Visual Composer.
Menucard ( A better way is coming to manage Menucard very soon. )
Old method of managing menucards is deprecated.
Justshop theme comes with a visual composer plugin. All shortcodes of JustShop theme have now been implemented in visual composer itself as a component so that you can use them with visual interface. Please see below section for more details.
How to use Visual Composer Shortcodes
We will shortly list this section which I am sure you will all love and find great use for
WooCommerce is a WordPress eCommerce toolkit that helps you sell products/items on your website. It transforms your WordPress website into an eCommerce store for free. However, please make sure that your hosting package is capable of running it (know more here). If you have trouble configuring WooCommerce, please check official documentation here: http://docs.woothemes.com/document/configuring-woocommerce-settings/
If you have already imported demo, then you can skip installing WooCommerce pages which it prompts you to, because they are already bundled with demo data.
Setup Base Pages
Setting up Shop Page: Go to WooCommerce > Settings > Products (tab) > Display (link) and choose choose from dropdown list: Shop Page.
Setting up Checkout Pages: Go to WooCommerce > Settings > Checkout (tab) and choose from dropdown list: Cart Page, Checkout Page and Terms & Conditions page.
Setting up My Account Page: Go to WooCommerce > Settings > Accounts (tab) and choose from dropdown list: My Account Page.
To read more about setting up products with variations, different attributes or variable pricing, please check these useful links:
Update: From v6.0 Maginifier is not built in with the theme (unless you already had old version, then its still loaded to not break sites using old version), You can use <a href="https://wordpress.org/plugins/yith-woocommerce-zoom-magnifier/">https://wordpress.org/plugins/yith-woocommerce-zoom-magnifier/</a> this plugin which is already in suggested plugin lists of Step 1. It styles well with theme.
This turns on zoom-in for the product's image on its details page. Go to WooCommerce > Settings > Magnifier and turn it on/off upon your choice of requirements. If you disable it, clicking on product thumbnail images will open their images as a separate image in a popup box (or a new window).
From version 5.2 onwards, inbuilt support for AJAX nav has been discountinued. Due to loading issues and only 5% users ever needing it. If you would like to have a rich user experience with AJAX navigations on SHOP pages, you can download and install https://wordpress.org/plugins/yith-woocommerce-ajax-navigation/ plugin. This plugin heavily integrates with the theme.
Here is brief introduction to theme options panel for easy reference.
General Settings: This section provides interface for settings like Logo image (or text title), favicon, Breadcrumb, Custom css, Retina-ready graphics, Widescreen mode, Sticky Menu, Google Analytics code, Responsiveness, and a lot more.
Styling: Here you can apply background colors and images and also have your choice of colors to links, buttons, etc.
Typography: Change fonts or its font-family, font-size, color etc. It is advisable not to use too many different fonts because it makes your websit load its pages slower (i.e. using too many fonts hampers SEO benefits)
Layout (Sidebar/Header): Here, you can choose which type of layout you want (i.e. Left sidebar or Right sidebar). Also, choose from one of the 5 header layouts provided from here.
Slider & Headline: Enable or disable slider for homepage or apply it all throughout the site. Globally control settings for the Headline/Hero area. Apply main USP line or message, etc.
Homepage: This tab setting has 5 sections which help in arranging and customizing the homepage layout with the content you choose to display. Sections are like: 'Product Categories', 'Featured Products', 'About Us', 'Testimonials' and 'Content area'. Most of the setting have easy short descriptions for your to understand and follow.
Portfolio/Cakes: You can choose to select and display any portfolio gallery you have created if you want it to be 'featured'. Additional settings provide option to link the portfolio item to its 'lightbox' image or its own link.
WooCommerce: This tab has sections to generally choose how many products to show, enable or diable Catalog mode, show cart icon in header or also enable/disable infinite scroll when visitor browses Shop page. You need WooCommerce plugin installed and active and also a few products for this to take effect.
Footer Customization: All widgets for footer in theme can be configured and options to choose how many footer widget areas to show or customize its text to display in (left or right) side of footer. There is also a sub-section called 'Extreme footer content' to customize copyright text, etc.
Subscribe and Connect: Here you can add your social networks sharing urls and also enable Feedburner ID for the e-mail subscription form. If you want to enable 'Subscribe and Connect' on single post, there is option to choose that too and more. You also have option to enable or diable showing the subscribe and RSS icon.
Contact Page: You can put in your e-mail address if you want to use 'Contact Form' page template. You can also apply Google Map coordinates and customize it to display a map on the Contact Form page template.
Install loco-translate plugin, go to Loco Translate > Manage Translationsnd find Justshop, you might find your desired language already , click on that language. If you do not already find your language listed, click on Add Language button.
On next page, you will find strings, which are already translated, you can also translate the one which are not translated already, once you are done , click Save button
Now go to Settings -> General and on the last option of the page, choose the desired language.
The website should be translated to the desired language now. Please note that Loco translate is only a tool to manage the translations, the translation itself is to be done by human. Most of the translations are already done by our team. If you face any trouble please contact support.
For advanced users: .PO file is included with your download, you can find it in <theme-root>/lang you can translate this with your favorite .PO file editor software like Poedit and generate .mo files.
Justshop theme is designed and coded to make it easy for end user. Most of things you can control from admin panel. It fits to width of available devices. Justshop normally fits to a portal/blog kind of website, but its real highlight is woocommerce/shop on the core. Trusted by 2000+ satisfied customers
Some featured highlights:
7 layouts of header and easy to switch from Theme Options.
Shop pages are styled for 2,3,4 and 5 columns so you can decide to have as many column as you want.
Headline feature on every page/post/product post types. Option to globally disable it or provide a global headline title and message from Theme Options > Slider & Headline settings.
Common styles are in styles.css
Layout styles for desktop systems css/layout.css.
For responsiveness css/responsive.css
Woocommerce related styles in css/woocommerce.css
To write your own styles: Theme Options > Display Options > Custom css box,
Note: Please only do as mentioned above on the top of this document, instead of modifying core files directly to be safe so that you can easily upgrade theme in future.
Two options to update your theme to latest version. .
We recommend you make backup of your theme/website before updating in case something goes wrong. You can use https://wordpress.org/plugins/updraftplus/ to make it easy. Also create back of your theme settings by going to Themeoptions->Import/export->export backup.
Since version 6.0 onwards, 1-click Update functionality was added. Now you only need to enter your purchase code to Theme-options -> Theme Updates. And then you can update in future easily by going to Dashboard -> Updates ( Just like you can update WordPress or any other Native plugin, no more downloading from Themeforest required ! ).
Do & Don't
Recommended Dos and Don'ts
Each update fixes and improves a few things, brings in new features and adds useful stuff. So, your attention to some advisable suggestions below will let you know what you can be aware of when working with Justshop theme.
Backup Your Current Theme Options.
Backup Theme folder (i.e. download to your desktop)
Q: How to setup twitter?
A: Twitter has updated its API. So, now each API call should be first registered by account owner. This means, to setup twitter, please go to Theme-options > JS-twitter Setup. Please create Twitter secret key and consumer key by following on-screen instructions. Once you do that, You can click on Authorize button on same page.
Due to security reasons, since version 5.3, inbuilt twitter functionality has been discountinued. Please install any popular twitter plugin from wordpress repository. Recommended plugin is https://wordpress.org/plugins/twitter-widget-pro/ and is styled well with theme.
But this plugin is not updated for long time, so you are free to use any other plugin you would like. There is a field in Themoptions panel to enter shortcode to make tweets available on contacct us page . This youtube video shows how to get secret key and consumer key.