Bstore Theme Setup

To get the Bstore Theme set-up correctly there are a few steps that you have to take

Below you will see a few links to different blank images that are in this theme

To create a image suitable for your selected theme, copy this link and follow the details of using an online image editor – SumoPaint

1. Logo

This themes sample site has a logo size of:

140 x 140 pixels (width x height)

Sample Image Link

http://static.wearequick.com/themeimages/bestbuylogo.png

You can add your new logo in the admin area by going to admin > system > settings (image tab)

Click here to view more details about how to add a logo

2. Shop Details

Now your shop has been setup, you can modify your shops name, location and currency.

You can do this in the admin area by going to admin > system > settings

The fields you should edit are:

General Tab:Store Name:
Address:
E-Mail:
Telephone:
Fax:

Store Tab:Title:
Meta Tag Description:

Local Tab:Country:
Region / State:
Currency:
Length Class:
Weight Class:

Click here to view more details about modifying the settings area

3. Home Page Slides

This themes sample site has a home page slide size of:

1150 x 438 pixels (width x height)

Sample Image Link

http://static.wearequick.com/themeimages/bstore-slides.jpg

Adding New Slides

You can add your new logo in the admin area by going to admin > system > Theme Content Slider

Click here to view more details about using the Theme Content Slider

4. Shop Colors

To modify the shop colors go to

admin > system > modules > Theme Control Module

General Tab

Default Theme: Select a pre made theme you would like to use
Enable Panel Tool: This gives you more control over the shops colors
Body Pattern: Click on a pre installed background color to use it
Use Custom Background: You can also upload your own background image and then select it
Customize Background: How the image is used / displayed

Page Setting Tab

This tab has two sub tabs available

Category Tab

The Category tab lets you modify how the site displays:

Display Product Modes
Columns
Enable Product Popup Image

Contact Tab

This lets you enter in details that are displayed on the contact page

Enter in any addition details you would like displayed in the text box

Font Tab

This tab lets you modify the fonts used on the site. There are also 3 font style area that you can use to modify different areas on the site.

You can modify:

Font Size
Enable Customize Font: (standard or Google fonts available)
Body Selector: Put CSS Selector such as body, h1, h3,h4, .box-title

5. Shop Default Image Sizes

You can modify the size of the images displayed in your shop by going to admin > system > settings ‘image tab’

If you would like to have the default sizes displayed again, you can view what they are in the image below.

6. Adding Product Categories

To make it easier to manage products we use categories. This lets you group similar products together

You can do this in the admin area by going to admin > product > categories

Click here to view more details about adding a category

This theme uses an advanced category display module called Mega Menu

Click here to view more details about using the Mega Menu module

7. Add a Product

Now your shop has at least one category, you can now start to add your products to sell.

You can do this in the admin area by going to admin > product > Your Products

Click here to view more details about adding a product

8. Update Your Shipping Options

Your shop comes setup with a few different shipping modules pre-installed

These are available by going to admin > extensions > shipping options

Click here to view more details about the different shipping modules

9. Add Shop Information

The Internet is all about Information so now is the time to add in some content to your site.

You can do this in the admin area by going to admin > information > Information Pages

Click here to view more details about adding Information Pages

10. Other Modules of interest

Featured

Click here to view more details about the Featured Module

Mega Menu Module

Click here to view more details about using the Mega Menu Category Display

install and edit Custom Module

Add module

1. Promotion

Configure these modules like the images using the ‘Source’ icon then pasting the source code listed below:

Source

<div class="media mauris_quam"><a class="pull-left" href="#"><img alt="" src="image/data/img_cus.png" /></a>
<div class="media-body">
<h1>Mauris<span> quam</span></h1>

<div class="content">
<p class="media-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu ligula velit. Proin molestie, nisi at mollis adipiscing, lorem justo facilisis est, quis lobortis metus ante id turpis. Aliquam volutpat tortor nec sem interdum cursus. Donec eu lectus vel augue consequat ultricies at ut tellus. Aliquam erat volutpat Nunc nec enim sit amet magna volutpat eleifend. Morbi orci lacus, viverra non viverra sed, sagittis eget vitae sem adipiscing vestibulum. Etiam mattis luctus dapibus</p>

<p class="pull-right"><a class="bnt" href="#">Shop now</a></p>
</div>
</div>
</div>

2. Content Top

preview

Configure these modules like the images using the ‘Source’ icon then pasting the source code listed below:

Source

<div class="newsletter-service">
<div class="row-fluid">
<div class="span6 newsletter">
<h2>sign up for our newsletter</h2>

<div class="newsletter-submit"><input alt="username" class="inputbox" name="email" size="31" type="text" value="Type your email" /><input class="button" name="Submit" type="submit" value="Sign up" /></div>
</div>

<div class="span6 service">
<h2>24/7 Customer Service</h2>

<p>Nulla rhoncus blandit lacus in scelerisque leo donec urna lobor tis molestie.</p>
</div>
</div>
</div>

3.Footer top

preview

Configure these modules like the images using the ‘Source’ icon then pasting the source code listed below:

source

<div class="listmenu navbar">
<ul class="nav">
    <li><a href="#">Fusce hen</a></li>
    <li><a href="#">Proin imper</a></li>
    <li><a href="#">Sed non sem </a></li>
    <li><a href="#">Nunc vel</a></li>
    <li><a href="#">Curabitur </a></li>
    <li><a href="#">Fermentum </a></li>
</ul>
</div>

– preview (social )

Configure these modules like the images using the ‘Source’ icon then pasting the source code listed below:

source

 <div class="social">
<h4 class="pull-left">Follow us on</h4>

<div class="custom_follow"><a class="facebook" href="#">facebook</a> <a class="twitter" href="#">twitter</a> <a class="mail" href="#">Mails</a> <a class="rss" href="#">rss</a></div>
</div>

Product Carousel

preview