Bookshop

Last Updated: Jul 03, 2018

NOTE: We’ve developed a native UB Bookshop theme for Magento 2. Check out the userguide for UB Bookshop here.

Responsive Magento theme Bookshop is a professional makeover for any ecommercial bookstores! Bookshop features up to 9 complementary Magento extensions including Mega Menu, Masshead, Slideshow 2, Product Slider, Tabs, Product along with Quickview. Also the Mangento theme is fully responsive and supports Off-canvas navigation.

This documentation is to guide you about how to install and configure the responsive Magento theme Bookshop to your own website.

Once downloaded Bookshop, you will get a zipped file including the following folders:

mage_ext: contains all built-in extensions of the theme.
mage_tpl: contains the theme files only.
quickstart: a full Magento CMS version with our theme already integrated to match the demo.
source: contains all source files of the theme.

Unzip the file. Please be noted that there are two ways to install a Magento theme:

General Installation: Applicable when you have installed a Magento base on your server before.
Quickstart Installation: Applicable for our Magento users. With Quickstart, you will get a site just as the same as our Demo site.

We are going through each way of installation in advance of more further configurations.

In case you have installed the Magento base already, this way of installation will help you to adapt the theme and extensions of Bookshop to fit your current site. Let’s see how to install the theme and its extensions respectively.

1. Theme Installation

Please make sure your Magento store is ready before you integrate Bookshop. If your store has not been available yet, get it done quickly by following the Magento Installation Guide.

Extension basetheme is required to be installed before installing the other extensions and theme.

The installation of Bookshop is quite simple with several following steps:

1. Upload the folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}.

2. Unzip “Bookshop” package. Next, copy the two folders skins and app to the root of your Magento site folder on the server. Accordingly, the folders will be overwritten and you should see a directory layout like this:
{docroot} /magento/app/
index.php
js/
lib/
LICENSE.txt
media/
pear/
skin/
var/.

3. Open the Admin Panel of your store, and access Magento Admin area on a stage localhost: https://localhost/magento/index.php/admin/, then log in your Magento Admin area.

4. Navigate to System >> Configuration >> Design. Simply replace the original name e.g. jm_purity with jm_bookshop.

Design Configuration

5. Fill “jm_bookshop” into the Themes folder.

Packages and Themes Settings

6. You can also change the settings for Bookshop Header.

Header Settings

7. Click the button “Save Config” to save your configuration.

You are done! Bookshop is now ready to go!

2. Extension Installation

To install the built-in extensions of Bookshop, please follow steps as below.

Upload folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}). These files will overwrite default folders skin and app in your Magento folder. Thus, you should see a directory layout like this: {docroot} /magento/app/
index.php
js/
lib/
LICENSE.txt
media/
pear/
skin/
var/.
Log into your Magento Admin area (i.e. access Magento Admin area on localhost: https://localhost/magento/index.php/admin/).
Navigate to System >> Configuration.
The installed extensions will show off. To enter the extension configuration page, click the extension’s name tab.

3. Create Static Blocks

Go to Magento Admin Panel >> CMS >> Static Blocks.

Click “Add new Block” button.
Fill in all fields as below then click “Save Block” button:
- Title: Right module
- Identifier: right_block
- Store View: All Store Views
- Status: Enable
- Content: fill in all syntax quoted as you would like.
To edit the existing static blocks, go to CMS >> Pages and then select the page in which blocks you want to edit.
In General Information tab, fill in the Content field with syntax quoted.

To display a new static block, copy and paste the following code in the “Layout Update XML” field in “Design” tab.

<html>
<reference name="right"> 
<block type="cms/block" name="jmtabs" before="-">
<action method="staticblock">
<title><strong><COLOR=Red>New block</COLOR></strong></title>
<identifier><strong><COLOR=Red>new_block</COLOR></strong></identifier>
</action>
</block>
</reference>
</html>

Clear cache if needed (in System >> Cache Management >> Save cache settings). Refresh your Homepage to see the change applied.

Quickstart package is to minimize time and effort in installing your eCommercial sites with the contents just like the Demo sites. Please be kindly noted that, with Quickstart, all your existing data will be overwritten. Thus, we recommend using Quickstart for your first installation with our Magento theme or just in case you want to refresh your own site to the very beginning.

Please follow steps as below.

Download the Quickstart package from Magento download section.
Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that includes all sample data.
Create a database for your Magento store (using phpMyAdmin).
Start the installation process by opening a browser and navigate to your URL (where the Quickstart package uploaded) to load the default Magento installer.
Kindly follow each step of the Installer so that the installation process can be set.

Note:

Do not use “localhost” in URL, otherwise you could not log into your Admin area (you should use your local IP in case of installing on your computer).
Leave “Tables prefix” field blank.

The layout of Bookshop Homepage can be illustrated as below.

Page Configuration

In the front-page, Bookshop has these following static blocks.

To create a new block, refer to the above guide for details.

This section will guide you to configure your pages just as the Demo site of Bookshop.

I. Homepage

See the detailed layout of Bookshop Homepage below.

Page Configuration

To configure this page, in the Magento Admin Panel, please navigate to CMS >> Pages. Firstly, create a new page named {Homepage} in “Page Management” section.

Page Information Tab: click to see the Back-end Settings.
Design Tab: click to see the Back-end Settings.

Copy and paste the following code into the “Content” field.

<reference name="tops1">
<block type="cms/block" name="position-2">
<action method="setBlockId"><block_id>position-2</block_id></action>
</block>
<block type="cms/block" name="position-3">
<action method="setBlockId"><block_id>position-3</block_id></action>
</block>          
</reference>
<reference name="tops2">
<block type="joomlart_jmtabs/core" name="jmtabs">
<action method="addTabs_staticblock">
  <title>Hot Books</title>
  <identifier>position-4</identifier>
</action>
<action method="addTabs_staticblock">
  <title>Best sellers</title>
  <identifier>position-5</identifier>
</action>
<action method="addTabs_staticblock">
  <title>Staff Picks</title>
  <identifier>position-6</identifier>
</action>
</block>
</reference>
<reference name="tops3">          
<block type="cms/block" name="position-7">
<action method="setBlockId"><block_id>position-7</block_id></action>
</block>  
</reference>
<reference name="mass-top">         
<block type="cms/block" name="position-8">
<action method="setBlockId"><block_id>position-8</block_id></action>
</block>  
</reference>
<reference name="mass-bottom">
<block type="cms/block" name="position-9">
<action method="setBlockId"><block_id>position-9</block_id></action>
</block>        
</reference>
<block type="core/text_list" name="mass-head" as="mass-head" translate="label">
<label>Content Mass Head</label>
</block>

Content Tab: click to see the Back-end Settings.

Note:

Other fields should be left blank.

II. 404 Page

To configure this page, in the Admin Panel, navigate to CMS >> Pages, select 404 Not Found 1 page to edit the following settings.

Page Information Tab: click to see the Back-end Settings.
Content Tab: click to see the Back-end Settings.

Copy and paste the following code into the “Content” field.

<div id="jm-error">
<div class="page-head-alt">
<h2>404</h2>
</div>
<h3>The page you requested was not found, and we have a fine guess why</h3>
<ul class="none-disc">
<li>If you typed the URL directly, please make sure the spelling is correct.</li>
<li>If you clicked on a link to get here, the link is outdated.</li>
</ul>
<dl><dt>What can you do?</dt><dd>Have no fear, help is near! There are many ways you can get back on track with Magento Demo Store.</dd><dd>
<ul class="none-disc">
<li><a onclick="history.go(-1);" href="#">Go back</a> to the previous page.</li>
<li>Use the search bar at the top of the page to search for your products.</li>
</ul>
</dd><dt>Follow these links to get you back on track!</dt><dd>
<ul class="none-disc">
<li><a href="{{store url=""}}">Store Home</a></li>
<li><a href="{{store url="customer/account"}}">My Account</a></li>
</ul>
</dd></dl></div>

Front-end Appearance:

Introduction

General Installation

1. Theme Installation

2. Extension Installation

3. Create Static Blocks

Quickstart Installation

Note:

Layout and Block Positions

Page Configuration

I. Homepage

Note:

II. 404 Page

Static Block Configuration

1. position-1: Customer Service

2. position-2: Slideshow

3. position-3: Top 10 books

4. position-4: Hot Books

5. position-5: Best sellers

6. position-6: Staff Picks

7. position-7: Deal of the week

8. position-8: Shop our store now

9. position-9: Company Logo

10. position-10: Shipping

11. position-11: Newsletter

12. position-12: Browser

13. position-13: Information

14. position-14: My Account

15. position-15: Location

16. featured-product: Featured Products

Note:

17. latest_products: Popular Books

Note:

18. contactinfo: Contacts Map

19. addshare : Social Share

20. colors: Colors

Extension Configuration

1. Slideshow Extension

2. Products Extension

3. Masshead Extension

4. Basetheme Extension

5. Tabs Extension

6. Mega Menu Extension

7. Product Slider Extension

8. Quickview Extension

9. Daily Deal Extension

10. Label Configuration

Mega Menu Configuration

1. Home Menu

2. Books Menu

Note:

Responsive Layout Configuration

Note: