“Boutique Shop” Documentation by “Quite Nice Stuff” v1.4.3

“Boutique Shop”

Created: 29/10/2012
By: Quite Nice Stuff
Email: help@quitenicestuff.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

A) Installation - top

The steps for installing the theme below assume that you've already got WordPress installed and running on your web server, if thats not the case please go to The Wordpress website for a full guide explaining how to install WordPress.

Installing The Theme

First, unzip the package you got from Themeforest, inside will be a bunch of folders, the one which contains the theme is called "boutique_shop"
Upload/copy the "boutique_shop" folder to "wp-content/themes"
Now login to the Wordpress admin panel
Go to "Appearance > Themes"
Click "Activate" for the "Boutique Shop" theme, and you're done!

B) Getting Started - top

Import Dummy Data

Some dummy data has been included to help you get started, its not identical to the demo site but hopefully it'll give you a general idea of how things work. If you run into any problems replicating something you've seen on the demo site feel free to send me a message via my user page on ThemeForest, I'll be more than happy to help.

Note: you should install the WooCommerce plugin first before importing dummy data, see the "Installing the WooCommerce Plugin" steps below
Next you need to install the WordPress Importer Plugin
Now go to "Tools" > "Import" > "WordPress" and select the "boutiqueshop.wordpress.2012-11-06.xml" file from the "Import Data" folder
Next go to "Appearance" > "Theme Options" and click on the "Backup Options" tab. Now open the "theme-options.txt" file also found in the "Import Data" folder and paste the contents into the "Transfer Theme Options Data" field and click "Import Options" then click "Save"
Go to "Appearance" > "Menus", for the Primary Navigation select "Main Menu"

Installing the WooCommerce Plugin

Boutique Shop uses the WooCommerce plugin for all the eCommerce features of the theme, this plugin does not come packaged with the theme but is free to download here. WooCommerce has a very thorough guide online which you can view here.

Adding your Logo

Go to "Appearance > Theme Options"
Click on the "General Settings" Tab
In the area labelled "Image Logo" click "Upload" and find your logo
Click "Use This Image"
Click "Save Options"
If you don't have a logo tick the box labelled "Text Logo"

Set a Colour Scheme

Go to "Appearance > Theme Options"
Click on the "Styling Options" Tab
Set the colours you want to use in the various fields
Click "Save Options"

Add a Contact Form Email Address

Go to "Appearance > Theme Options"
Click on the "Contact Settings" Tab
In the area labelled "Contact Form Email" enter your email address
Click "Save Options"

C) The Homepage - top

Explanations about each of the numbers in the screenshot can be found below

1.) Secondary Navigation

This is a menu
To set it go to "Appearance > Menus"
Create a new menu
Then set it as the "Secondary Navigation"

2.) Primary Navigation

This is the main menu
To set it go to "Appearance > Menus"
Create a new menu
Then set it as the "Primary Navigation"

3.) Footer Navigation

You guessed it, this is also a menu
To set it go to "Appearance > Menus"
Create a new menu
Then set it as the "Footer Navigation"

4.) Primary Widget Area

This is the sidebar widget area
To add widgets go to "Appearance > Widgets"
Then drag the widgets of your choice into the "Primary Widget Area"

5.) Footer Widget Area

This is the footer widget area
To add widgets go to "Appearance > Widgets"
Then drag the widgets of your choice into the "Footer Widget Area One/Two/Three/Four"

6.) Footer Image

To set a footer image go to "Appearance > Theme Options > General Settings"
Then upload an image in the "Footer Bottom Right Image" field

7.) Social Icons

These are links to social networks, to set them go to "Appearance > Theme Options > Social Settings"

8.) Logo

You can upload a logo image by going to "Appearance > Theme Options > General Settings"
Then use the "Image Logo" field to upload your image

9.) Header Icons

You can change the text and icon images for all three of these items by going to "Appearance > Theme Options > General Settings"
Make sure "Display Icons In Header" is ticked then fill out the "Icon 1 Title", "Icon 1 Sub Title" and "Icon 1 Image URL" fields accordingly
The order is 1 - 3, left to right.

10.) WooCommerce Shopping Basket

The shopping basket will automatically appear when the WooCommerce plugin is installed, to install WooCommerce see section "B.) Getting Started"

11.) Slideshow

To set a slideshow, first you need to create a page using the "Homepage" template
To do this go to "Pages > Add New" and select "Homepage" from the "Template" drop down on the right
Then go to "Slideshow > Add New" and fill out the fields accordingly
You will need to go to "Slideshow > Add New" for each individual slide you add. Slides can only be displayed on the homepage

12.) Tagline

To add this tagline go to "Appearance > Theme Options > Home Settings" and add it in the "Announcement Message" field

13.) Products

There are two ways to display products on the homepage
The first is by setting the products as "Featured"
To do this go to "Products" and then click the star icon next to the product you want to feature
Then go to "Appearance > Theme Options > Home Settings" and make sure the "Display Featured Products" field is ticked
The other way to add products to the homepage is by going to "Appearance > Theme Options > Home Settings" and entering the a product category in the "Homepage Category One/Two" fields.

14.) Products

See point 13

D) Products - top

To add a product go to "Products > Add New", if you don't have this options see the first point "B) Getting Started" about how to install the WooCommerce plugin.

Explanations about each of the numbers in the screenshot can be found below

1.) Main Product Image

Add a new product by going to "Products > Add New"
On the right hand side of the page click "Set Featured Image"

2.) Additional Product Images

Add a new product by going to "Products > Add New"
Just above the main text area click on "Upload/Insert"
you can add as many images as you like and they will be automatically formatted into the slider shown in the screenshot

3.) Variable Products

you can add extra options for a product such as "Size", "Colour" and so on by following the steps here:

First go to "Products > Add New"
Scroll down and just below the main body text field is a field labelled "Product Data", select "Variable Product" from here
Now click on the "Attributes" tab found just below in the same area, and click "Add"
Add the attribute name such as "Size" or "Colour" then add your options in the big box to the right, separating them like so: S | M | L | XL
Its important that you untick "Visible on the product page" and tick "Used for variations"
Click "Publish"
Now click the "Variations" tab and select one of the options you added from the "Default selections" drop down, for example if you added "Sizes" and one of the sizes is "S" pick this, click "Add Variation" then fill out the details such as stock, price etc.
You can click "Add Variation" as many times as you like, for example if you have "S, M, L and XL" sizes you'll need to do it 4 times.
Click "Update" to finish
It's also worth checking the following guide which explains the above in detail with screenshots: http://wcdocs.woothemes.com/user-guide/product-variations/

4.) Product Description

Add this in the "Product Short Description" when in "Products > Add New"

5.) Additional Product Information

Add this in the large body text field when in "Products > Add New"

6.) Related Products

Related products will display here if you add a group of products to the same category or give them the same tags

C) Shortcodes - top

C.1) Accordion

[accordion]
[panel title="The Title"]...[/panel]
[panel title="The Title"]...[/panel]
[panel title="The Title"]...[/panel]
[/accordion]

C.2) Buttons

[button type=small link_url="http://google.com"]...[/button]
[button type=medium link_url="http://google.com"]...[/button]
[button type=large link_url="http://google.com"]...[/button]
[button background_color="#000" text_color="#fff" link_url="http://google.com"]...[/button]

C.3) Columns

There are 2, 3 and 4 column layouts to pick from. For the last column in the row you should add "-last" to the tag, see below for an example

[columns]
[one_half]...[/one_half]
[one_half_last]...[/one_half_last]
[/columns]

[columns]
[one_third]...[/one_third]
[one_third]...[/one_third]
[one_third_last]...[/one_third_last]
[/columns]

[columns]
[one_forth]...[/one_forth]
[one_forth]...[/one_forth]
[one_forth]...[/one_forth]
[one_forth_last]...[/one_forth_last]
[/columns]

C.4) Drop Caps

[dropcap]...[/dropcap]

C.5) Google Map

[googlemap width="50%" zoom=14 address="London, England"]

Shortcode Options

width: Any px or % value
height: Any px or % value
maptype: ROADMAP, SATELLITE, HYBRID, TERRAIN
zoom: Zoom value from 1 to 19
address: Map Address
marker_html: HTML to be displayed in the marker popup

C.6) List

[list type="arrow"]
[li]...[/li]
[li]...[/li]
[li]...[/li]
[/list]

Shortcode Options

type: circle, arrow, cross, tick or just use [list] without type specified to use a standard bullet point style

C.7) Alert Message

[msg type=default]...[/msg]

Shortcode Options

type: default, notice, success, fail

C.8) Tabs

[tabs_container]
[tab title="..."]...[/tab]
[tab title="..."]...[/tab]
[tab title="..."]...[/tab]
[/tabs_container]

C.9) Toggle

[toggle title="..."]...[/toggle]

C.10) Video

[video type=youtube id=PwdA0uOmrzM hd=false width="100%" height="215px"]
[video type=vimeo id=4090686 hd=true width="100%" height="215px"]

Shortcode Options

type: youtube or vimeo
id: video id
hd: true or false
width: Any px or % value
height: Any px or % value

C.11) Title

[title]...[/title]

C.12) Photo Gallery

[gallery]

Shortcode Options

columns: "3" or "4"
title: "true" or "false", displays title entered in the "title" field when uploading below images
perpage: numerical value such as "10", sets the amount of images to display per page before using pagination

D) Theme Options - top

All the theme options contain a pretty good explanation so it's not necessary to repeat them here. To access the theme options go to "Appearance > Theme Options".

E) Adding Content - top

E.1) Page Templates

This theme comes with a collection of page templates, to use them create a new page (Pages > Add New) and then use the drop down menu labelled "Template" on the right side of the page. The templates available are:

Default Template
Blog
Contact Us
Full Width
Homepage
Left Sidebar
Right Sidebar
Lookbook

E.1.1) Blog

Theres not much to explain here, set the blog as the page template and it will display all posts in blog format!

E.1.2) Contact Us

To create the contact page go to "Pages > Add New" and select "Contact Page" from the "Template" drop down on the right. Set the email address the form sends to by going to "Appearance > Theme Options" and then click on the "Contact Settings" tab and entering the email in the field labelled "Contact Form Email".

E.1.3) Lookbook

To create the Lookbook page go to "Pages > Add New" and select "Lookbook" from the "Template" drop down on the right. Now you can create Lookbook entries by going to "Lookbook > Add New".

F) Credits - top

I'd like to thank the people below for providing awesome resources.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Quite Nice Stuff

Go To Table of Contents