UB Bookshop for Magento 2 (new)

UB Bookshop is a premium Magento 2 theme we developed from the ground up. It is packed with UB Theme Helper -- a powerful theme customisation tool, plus 3 complimentary Magento extensions including Mega Menu, Content Slider, Quick View. This documentation is to guide you through all steps how to install and configure responsive Magento theme Bookshop to your own website at the most convenient.

UB Bookshop is native with Magento 2.x. Please make sure your system meets the Magento 2 System requirements.

The download package includes:

  • Theme: single theme for manual installation
  • Extensions: contains all extensions built in the theme
  • Quickstart: is a full Magento 2 CMS version with our template and extensions already integrated to match demo
  • PSD source files: all graphic source files

DOWNLOAD NOW

There are two ways to install a UberTheme Magento theme:

  • Manual Installation: Applicable if your store is full with content that you don’t want to overwrite.
  • QuickStart Installation: Applicable if you want to get a whole new fresh site as per Demo.

Provided that you have installed the Magento base already, decide which way to install and follow steps as below.

To install UB Bookshop manually, you need to take a few steps, including:

  • Step 1: Download and extract UB Bookshop theme
  • Step 2: Copy and paste the folders to your root
  • Step 3: Enable UB Theme Helper
  • Step 4: Import Sample Data
  • Step 5: Activate theme
NOTE: Make sure you backup the store database and all Magento 2 files before proceeding installation.

Step 1. Download and extract UB Bookshop theme

Download the ub_bookshop_vx.x.x zip file from your profile at Ubertheme, and extract it on your computer. Navigate inside the extracted folder, you should see the necessary folders listed below:

installation 1

Step 2: Copy and paste the folders to your web root

1. Copy and paste the folder app of the package you have unzipped to your web root. Once done, you should see the path:

..app/code/Ubertheme/UbThemeHelper/
..app/design/frontend/Ubertheme/bookshop/

Attention for Mac OS users: When you copy the extensions files using Finder into a local directory, make sure you *merge*, not *replace* the existing folder contents, as otherwise your app folder will be gone.

The overwritten folders should have a directory layout like this:

installation 1

2. Copy and paste folder pub/media of the package you have unzipped to your web root. Make sure you *merge*, not ‘replace’ existing media folder contents. The overwritten folders should have a directory layout like this:

installation 1

Step 3: Enable UB Theme Helper

Open your terminal and go to the Magento directory. In this directory, run the following commands:

NOTE: If your Magento 2 site is in `production` mode, before having our extension enabled, make sure you switch to `developer` mode by using the command: php -f bin/magento deploy:mode:set developer. To learn more about Magento modes, click here.
  • php -f bin/magento module:enable -c Ubertheme_UbThemeHelper
  • php -f bin/magento setup:upgrade
  • php -f bin/magento cache:clean
installation 1

Once you finish the last command to clean cache, you have UB Theme Helper installed and ready for your use.

Step 4: Import Sample Data

4.1 Check which sample data sets to use

ATTENTION: This step is for one who uses Standard UB Bookshop theme (without extensions). If you use Extedned UB Bookshop (with full extensions), please discard this step.

By default, UB Bookshop uses sample data set for Extended UB Bookshop which includes three files blocks.csv, pages.csv, widgets.csv, as screenshot below:

installation 1

So you need an extra step to switch to Standard UB Bookshop theme’s sample data set:

  1. Navigate to PATH_TO_YOUR_MAGENTO_2/app/code/Ubertheme/UbThemeHelper/fixtures/
  2. Rename three files blocks.csv, pages.csv, widgets.csv to another names (for instance, blocks-bk.csv, pages-bk.csv, widgets-bk.csv)
  3. Then rename three files blocks_none_extensions.csv to blocks.csv; pages_non_extension.csv to pages.csv; widgets_none_extension to widgets.csv

4.2 Import Sample Data

Kindly note that, after importing sample data, all your existing data will be overwritten. After importing, there are added blocks, pages, widgets of UB Bookshop theme

In your Magento Admin Panel, navigate to Content | (UB ThemeHelper) Theme Configuration, then simply click Import Sample Data button.

installation 1

Step 5: Activate theme

1. In your Magento Admin Panel, navigate to System | Tools | Cache Management, Sellect All the cache types, take Action as Refresh and Submit.

Insstallation 2

2. Then, navigate to Content | (UB ThemeHelper) Theme Configuration. You will see a grid of themes available.
3. Specify scope of Store View you want to apply the theme (if you do not set scope of Store View, Default Config will be applied). Then click Activate button to apply specific theme you select.

installation3

4. Once done, you run the following commands before you see the theme applied in the frontend.

  • php -f bin/magento setup:static-content:deploy
  • php -f bin/magento indexer:reindex
  • php -f bin/magento cache:clean

That’s all. Now you can scroll down to learn more how to configure the theme.

Quickstart package is to minimize time and effort in installing the theme as per Demo site. Kindly note that, with Quickstart, all your existing data will be overwritten. Thus, we recommend using Quickstart for your first installation or just in case you want to refresh your site to the very beginning. For step by step guide, please Click here

Before we walk you through steps to configure each page as per demo, here is an overview of static blocks you will see in UB Bookshop theme:

As seen in the screenshot, the UB Bookshop frontend has the following static blocks:

  • Customer Services
  • UB MegaMenu
  • UB Content Slider
  • Today Hightlight
  • Product Tabs
  • Deals of The Week
  • Sidebar Banner
  • Special Books
  • Brand Logo
  • Footer Links
  • Custom Tab (in Product Detail page)
Note:
Kindly note that, after importing sample data, please discard the guide in both sections: V -- Page Configuration and VI -- Static Block Configuration. guide. Simply follow these sections if you wish to reset to use default sample data of any specific block.

V. Page Configuration

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

Homepage Configuration

To configure this page, in the Admin Panel, navigate to Content | Elements | Pages | (Select Home Page) Edit.

You can choose one of the following options to create and configure contents:
Option 1: In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="home-product-list">
{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="all_products" products_count="15" template="product/widget/new/content/new_grid.phtml"}}
</div>

Option 2: In the Content tab, click Show / Hide Editor button, and click Insert Widget button

Copy and paste the following code into the “Layout Update XML” field.

 <referenceContainer name="topsl1.container">
 <container name="sections.panel.topsl1" label="" htmlTag="div" htmlClass="container">
 <container name="sections.panel.topsl1.content" label="UberTheme - Topsl1 Content" as="sections.panel.topsl1.content" htmlTag="div" htmlClass="inner">
 <block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider" as="ub-content-slider">
 <arguments>
 <argument name="content_type" xsi:type="string">slider</argument>
 <argument name="slider_key" xsi:type="string">main-slideshow</argument>
 <argument name="item_width" xsi:type="number">820</argument>
 <argument name="item_height" xsi:type="number">376</argument>
 <argument name="show_item_title" xsi:type="number">0</argument>
 <argument name="show_item_desc" xsi:type="number">1</argument>
 <argument name="single_item" xsi:type="number">1</argument>
 <argument name="show_thumbnail" xsi:type="number">0</argument>
 <argument name="show_navigation" xsi:type="number">1</argument>
 <argument name="show_paging" xsi:type="number">1</argument>
 <argument name="paging_numbers" xsi:type="number">0</argument>
 </arguments>
 </block>
 <block class="Magento\Cms\Block\Block" name="today-hightlight" after="-">
 <arguments>
 <argument name="block_id" xsi:type="string">today-hightlight</argument>
 </arguments>
 </block>
 </container>
 </container>
</referenceContainer>
<referenceContainer name="topsl2.container">
 <container name="sections.panel.topsl2" label="" htmlTag="div" htmlClass="container">
 <container name="sections.panel.topsl2.content" label="UberTheme - Topsl2 Content" as="sections.panel.topsl2.content" htmlTag="div" htmlClass="inner">
 <block class="Magento\Cms\Block\Block" name="products-tab" after="-">
 <arguments>
 <argument name="block_id" xsi:type="string">products-tab</argument>
 </arguments>
 </block> 
 </container> 
 </container>
</referenceContainer>
<referenceContainer name="main">
 <block class="Magento\Cms\Block\Block" name="deals-of-the-week" after="socials">
 <arguments>
 <argument name="block_id" xsi:type="string">deals-of-the-week</argument>
 </arguments>
 </block>
 <block class="Magento\Cms\Block\Block" name="banner-adv" after="deals-of-the-week">
 <arguments>
 <argument name="block_id" xsi:type="string">banner-adv</argument>
 </arguments>
 </block>
 </referenceContainer>
<referenceContainer name="bots1.container">
 <container name="sections.panel.bots1" label="" htmlTag="div" htmlClass="container">
 <container name="sections.panel.bots1.content" label="UberTheme - Bots1 Content" as="sections.panel.bots1.content" htmlTag="div" htmlClass="inner">
 <block class="Magento\Cms\Block\Block" name="brands" before="-">
 <arguments>
 <argument name="block_id" xsi:type="string">brands</argument>
 </arguments>
 </block> 
 </container>
 </container>
 </referenceContainer>

404 page Configuration

To configure this page, in the Admin Panel, navigate to Content | Elements | Pages, then select 404 Not Found page to update the settings as follows:

Copy and paste the code below on the Content field:

<div id="ub-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:

About Us configuration

To configure this page, in the Admin Panel, navigate to Content | Elements | Pages, then select About Us page to update the settings as follows:

Copy and paste the code below on the Content field:

<div class="cms-layout"><iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=123+Main+st.+Los+Angeles,+CA,+90012,+U.S.A+&amp;sll=37.0625,-95.677068&amp;sspn=34.176059,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=123+S+Main+St,+Los+Angeles,+California+90012&amp;t=m&amp;ll=34.051877,-118.243704&amp;spn=0.027023,0.072012&amp;z=14&amp;iwloc=A&amp;output=embed" width="100%" height="295"></iframe>
<p>&nbsp;</p>
<p class="lead">UberTheme team has the mission&nbsp;<span>to create the most professional &amp; versatile Themes &amp; Extensions for Magento eCommerce</span>. We are experienced developers who have been breathing Magento since 2009 from the house of&nbsp;<a title="About JoomlArt - professional Joomla template provider" href="http://joomlart.com/" target="_blank">JoomlArt.com</a>.</p>
<h2>Our core values</h2>
<h4>1. Professionalism</h4>
<p>We should be! This is the main reason why the boss hires us.</p>
<h4>2.&nbsp;Passion</h4>
<p>We are sorry, Professionalism. Actually PASSION&nbsp;is the main reason.</p>
<h4>3. Commitment</h4>
<p>It&rsquo;s not about creating a site makeover only, we would love to re-craft your store&nbsp;with the most impressive and versatile eCommerce Magento themes from us. Besides that, we hard work to make sure your desired theme fits in your site seamlessly.</p>
<h2>What matter to us most</h2>
<p><em>1. Are you guys happy with our products?<br />2. What else can we do to make you happier?<br />3. How to make you a loyal user who comes back to grab even more themes?<br /></em></p>
<h2>What do we want from you?</h2>
<p>Communication.&nbsp;<span>Please TALK!</span><br /><em>Should you have any question, please&nbsp;<a title="Ask Us Question" href="http://www.ubertheme.com/ask-question/" target="_blank">ask</a>.<br />Should you need any support, please&nbsp;<a title="Request Us Support" href="http://www.ubertheme.com/ask-question/" target="_blank">request</a>.<br />Should you are interested in anything new and exotic, raise your&nbsp;<a title="Raise Your Voice" href="http://www.ubertheme.com/ask-question/" target="_blank">voice</a>.</em><br />We do believe that discussing&nbsp;means opportunity for improving. Help us please!&nbsp;</p>
</div>

VI. Static Block Configuration

1. Today hightlight

Step 1: In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Today hightlight block with configuration as follows:
Back-end setting
Option 1: In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="today-hightlight">
<div class="title"><span>Today hightlight</span></div>
<div class="content">{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" products_count="4" template="product/widget/new/content/new_grid.phtml"}}</div>
</div>

Option 2. In the Content tab, click Show / Hide Editor button, and click Insert Widget button

Front-end Appearance:

2. Product Tabs

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Product Tabs block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="product-tab" data-mage-init="{&quot;tabs&quot;:{&quot;openedState&quot;:&quot;active&quot;}}">
<div class="product-tab-title">
<div class="product-tab-title-inner">
<div id="tab-label-hot-books" class="data item title hot-books active" data-role="collapsible"><a id="tab-label-hot-books-title" class="data switch" tabindex="-1" href="#hot-books" data-toggle="switch"> Hot Books </a></div>
<div id="tab-label-bestsellers" class="data item title bestsellers" data-role="collapsible"><a id="tab-label-bestsellers-title" class="data switch" tabindex="-2" href="#bestsellers" data-toggle="switch"> Best Sellers </a></div>
<div id="tab-label-staffpicks" class="data item title staffpicks" data-role="collapsible"><a id="tab-label-staffpicks-title" class="data switch" tabindex="-3" href="#staffpicks" data-toggle="switch"> Staff Picks </a></div>
</div>
</div>
<div class="tabs_content">
<div id="hot-books" class="data item content active" data-role="content">{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="" products_count="6" template="product/widget/content/tab.phtml" conditions_encoded="a:1:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]]"}}</div>
<div id="bestsellers" class="data item content" data-role="content">{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="" products_count="5" template="product/widget/content/tab.phtml" conditions_encoded="a:1:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]]"}}</div>
<div id="staffpicks" class="data item content" data-role="content">{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="" products_count="4" template="product/widget/content/tab.phtml" conditions_encoded="a:1:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]]"}}</div>
</div>
</div>

Front-end Appearance:

3. Customer Service

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Customer Service block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

 <ul class="customer-services">
<li><em class="fa fa-phone"></em>(012) 345 6789</li>
<li><a href="{{store url="customer-service"}}"><em class="fa fa-question-circle"></em>Shipping &amp; Customer Service</a></li>
</ul>

Front-end Appearance:

4. Deals of the week

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Deals of the week block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div>
{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Special Price" products_count="3"
template="product/widget/content/sales_grid.phtml" conditions_encoded="a:3:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]s:4:`1--1`;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Product`;s:9:`attribute`;s:17:`special_from_date`;s:8:`operator`;s:2:`==`;s:5:`value`;s:10:`2015-08-26`;]s:4:`1--2`;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Product`;s:9:`attribute`;s:15:`special_to_date`;s:8:`operator`;s:2:`==`;s:5:`value`;s:10:`2020-08-26`;]]"}}
</div>

Front-end Appearance:

5. Brands Logo

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Brands Logo block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

 <ul class="brands">
<li><img src="//bookshop.demo.ubertheme.com/media/wysiwyg/logo/1.jpg" alt="Book" /></li>
<li><img src="//bookshop.demo.ubertheme.com/media/wysiwyg/logo/2.jpg" alt="Book" /></li>
<li><img src="//bookshop.demo.ubertheme.com/media/wysiwyg/logo/3.jpg" alt="Book" /></li>
<li><img src="//bookshop.demo.ubertheme.com/media/wysiwyg/logo/4.jpg" alt="Book" /></li>
<li><img src="//bookshop.demo.ubertheme.com/media/wysiwyg/logo/5.jpg" alt="Book" /></li>
<li><img src="//bookshop.demo.ubertheme.com/media/wysiwyg/logo/6.jpg" alt="Book" /></li>
<li><img src="//bookshop.demo.ubertheme.com/media/wysiwyg/logo/7.jpg" alt="Book" /></li>
</ul>

Front-end Appearance:

6. Sidebar Banner

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Sidebar Banner block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

 <div class="block block-banner">
<div class="block-content"><a title="Our customer service is available 24/7. Call us at (555) 555-0123." href="#"><img src="//bookshop.demo.ubertheme.com/skin/frontend/default/jm_book/images/media/col_left_callout.jpg" alt="Our customer service is available 24/7. Call us at (555) 555-0123." /></a></div>
</div>

Front-end Appearance:

7. Special books

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Special books block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="block block-special-books">
<div class="block-title"><strong>Special Books</strong></div>
<div class="block-content">
<div id="special-books">{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider.special-books" number_items="2" number_items_desktop="2" number_items_desktop_small="2" number_items_tablet="2" number_items_mobile="1" title="Special Books" show_desc="0" show_readmore="0" single_item="0" content_type="latest_products"}}</div>
</div>
</div>

Front-end Appearance:

8. Banner ADV

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Banner ADV block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

 <div class="banner-adv"><img src="//bookshop.demo.ubertheme.com/media/wysiwyg/banner/banner01.jpg" alt="Book" />
</div>

Front-end Appearance:

9. Footer links

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Footer links block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="block block-shipping">
<div class="inner">
<ul class="list-shipping">
<li class="shipping-item"><em class="fa fa-plane"></em> <span class="title">Free Shipping</span> <span class="desc">on orders over $49</span></li>
<li class="exchange-item"><em class="fa fa-refresh"></em> <span class="title">1st Exchange Free</span> <span class="desc">on 3 days</span></li>
<li class="support-item"><em class=" fa fa-comments"></em> <span class="title">Online support 24/7</span> <span class="desc">123 456 7890</span></li>
<li class="friends-item"><em class="fa fa-gift"></em> <span class="title">Tell Friends and get $5</span> <span class="desc">a small gift for you</span></li>
</ul>
</div>
</div>
<div class="block-browser col-1 first">
<div class="col-inner">
<div class="block-title"><strong><span>Browser</span></strong></div>
<div class="block-content">
<ul>
<li><a href="{{config path="web/unsecure/base_url"}}books.html/">Books</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}gift-cards.html/">Gift Cards</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}teens.html/">Teens</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}nook-books.html/">Nook Book</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}kids.html/">Kids</a></li>
</ul>
</div>
</div>
</div>
<div class="block-information col-2">
<div class="col-inner">
<div class="block-title"><strong><span>Information</span></strong></div>
<div class="block-content">
<ul>
<li><a href="{{config path="web/unsecure/base_url"}}about-us">About Us</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}customer-service/">Customer Service</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}privacy-policy/">Privacy Policy</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}search/term/popular/">Search Terms</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}sales/guest/form/">Orders and Returns</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}catalogsearch/advanced/">Advanced Search</a></li>
</ul>
</div>
</div>
</div>
<div class="block-my-account col-3">
<div class="col-inner">
<div class="block-title"><strong><span>My account</span></strong></div>
<div class="block-content">
<ul>
<li><a href="{{config path="web/unsecure/base_url"}}customer/account/login/">Sign In</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}checkout/cart/">View Cart</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}wishlist/">My Wishlist</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}checkout/">Check out</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}sales/order/history/">Track My Orders</a></li>
<li><a href="{{config path="web/unsecure/base_url"}}contact/">Contact us</a></li>
</ul>
</div>
</div>
</div>
<div class="block-location col-4 last">
<div class="col-inner">
<div class="block-title"><strong><span>Location</span></strong></div>
<div class="block-content">
<p>Address: 2411 Any Street. Any Town. United Kingdom.</p>
<p>Mail to: <a title="support@yourstore.com" href="mailto:support@yourstore.com">support@yourstore.com</a></p>
<p>Phone: +123 456 7890</p>
<p>Fax: +123 456 7890</p>
</div>
</div>
</div>
 Front-end Appearance:

10. Popular Products

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Popular Products block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="popular-book">
{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="all_products" products_count="2" template="product/widget/new/content/popular.phtml"}}
</div>

Front-end Appearance:

11. Contacts Map

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Contacts Map block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

 <div class="contact-info">
<div class="inner"><iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=123+Main+st.+Los+Angeles,+CA,+90012,+U.S.A+&amp;sll=37.0625,-95.677068&amp;sspn=34.176059,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=123+S+Main+St,+Los+Angeles,+California+90012&amp;t=m&amp;ll=34.051877,-118.243704&amp;spn=0.027023,0.072012&amp;z=14&amp;iwloc=A&amp;output=embed" width="100%" height="295"></iframe>
<div class="info-inner">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<div class="info-inner2">
<ul class="list-info">
<li class="address"><em class="fa fa-home">&nbsp;</em><span>Address:</span> 123 Main st. Los Angeles, CA, 90012, U.S.A</li>
<li class="phone"><em class="fa fa-phone">&nbsp;</em><span>Phone:</span> (315) 457-0000</li>
<li class="fax"><em class="fa fa-print">&nbsp;</em><span>Fax:</span> (315) 457-1324</li>
<li class="email"><em class="fa fa-envelope-o">&nbsp;</em><span>Email:</span> admin@email.com</li>
</ul>
</div>
</div>
</div>
</div>

Front-end Appearance:

12. Masshead

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Masshead block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="masshead">
<img src="//bookshop.demo.ubertheme.com/media/wysiwyg/banner/banner01.jpg" alt="Masshead" />
</div>

Front-end Appearance:

13. Custom Tab

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Custom Tab block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="pview_info" style="line-height: 22px; margin: 8px; display: block;">In order to demonstrate the concepts and terminology of databases, we will work with a simple example of storing information about books.<br /> Each table in a database has a unique name and each column within a table has a unique name within that table.<br /> <br /> <strong>Each column in a database table also has a data type associated with it, </strong>.<br /> <br />
<table border="0" cellspacing="1" cellpadding="3" bgcolor="#cccccc">
<tbody>
<tr>
<td align="center" bgcolor="#ddd" width="105"><strong>Title </strong></td>
<td align="center" bgcolor="#ddd" width="127"><strong>Author</strong></td>
<td align="center" bgcolor="#ddd" width="116"><strong>Gender</strong></td>
<td align="center" bgcolor="#ddd" width="116"><strong>Publisher</strong></td>
</tr>
<tr>
<td align="center" bgcolor="#ddd"><strong>The Hobbit</strong></td>
<td align="center" bgcolor="#ddd">J. R. R. Tolkien</td>
<td align="center" bgcolor="#ddd">Male</td>
<td align="center" bgcolor="#ddd">Houghton</td>
</tr>
<tr>
<td align="center" bgcolor="#ddd"><strong>Slinky Malinki</strong></td>
<td align="center" bgcolor="#ddd">Lynley Dodd</td>
<td align="center" bgcolor="#ddd">Female</td>
<td align="center" bgcolor="#ddd">Mallinson</td>
</tr>
<tr>
<td align="center" bgcolor="#ddd"><strong>Hairy Maclary</strong></td>
<td align="center" bgcolor="#ddd">Lynley Dodd</td>
<td align="center" bgcolor="#ddd">Female</td>
<td align="center" bgcolor="#ddd">Mallinson</td>
</tr>
<tr>
<td align="center" bgcolor="#ddd"><strong>Mechanical</strong></td>
<td align="center" bgcolor="#ddd">Bob Kerr</td>
<td align="center" bgcolor="#ddd">Male</td>
<td align="center" bgcolor="#ddd">Rendel</td>
</tr>
<tr>
<td align="center" bgcolor="#ddd"><strong>My Cat</strong></td>
<td align="center" bgcolor="#ddd">Tom</td>
<td align="center" bgcolor="#ddd">Female</td>
<td align="center" bgcolor="#ddd">A.W</td>
</tr>
<tr>
<td align="center" bgcolor="#ddd"><strong>Natural</strong></td>
<td align="center" bgcolor="#ddd">William</td>
<td align="center" bgcolor="#ddd">Female</td>
<td align="center" bgcolor="#ddd">Paley</td>
</tr>
<tr>
<td align="center"><strong>Praying</strong></td>
<td align="center">Rosemary</td>
<td align="center">Male</td>
<td align="center">Jensen</td>
</tr>
</tbody>
</table>
</div>

Front-end Appearance:

Standard UB Bookshop 2.0 is packed with base theme only, with no built-in extensions. If you select Extended UB Bookshop 2.0, depending the extension you purchased, please follow specific userguides below:

1. UB Content Slider extension

In the Magento Admin Panel, navigate to Content | UB Content Slider | Manage Slider and configure the default settings as the Back-end setting.
Now your slider should be displayed in the frontend.

For more detail about steps to install and configure UB Content Slider, please check out UB Content Slider Documentation

2. UB Mega Menu extension

This section provides detailed instruction to configure Mega Menu style as per our UB Bookshop demo site.

Step 1 -- Create the Top Menu group
In the Magento backend, navigate to Content | (UB Mega Menu) Manage Menu, then click Add New Menu. In the popup, you can configure as per this screenshot (Make sure you insert menu key as main-menu).

Once done, you should see the new menu group visible as illustration in the following screenshort:

Step 2 -- Create menu item in the Top Menu
Supposed that you have some sample products in place already, now we start to create menu items for the mega menu. In the same Menu Group panel, go to Select | Manage Menu items:

Step 2.1 -- Create Books and its sub-menu items:

Click Add New Menu Item button to create each of menu item, and follow configuration below:

  1. Books: Configuration steps -- menu setting 1 > menu setting 2
  2. Categories: Configuration steps -- menu setting 1 > menu setting 2
  3. Biography: Configuration steps -- menu setting 1 > menu setting 2

Step 2.2 -- Insert Product banner into Mega menu

Create Products banner item (by clicking Add New Menu Item) as sub-menu of Books > Banners following settings below:
Setting 1 > Setting 2 (Make sure in the Setting 2 step, you insert Custom Content)

Step 2.3 -- Create Product List menu items
Front-end Appearance:

WEEK’S BIGGEST BOOK: Configuration steps -- Setting 1 > Setting 2 (Make sure in the Setting 2 step, you insert Custom Content as per screenshot)

For more detail about steps to install and configure UB Mega Menu, please check out:
UB Mega Menu Documentation

3. UB Quick View extension

In the Magento Admin Panel, navigate to Content | UB Quick View | Setting and configure the default settings as the Back-end setting

Front-end Appearance

For more detail about steps to install and configure UB Quick View, please check out:
UB Quick View Documentation

The documentation below will guide you through steps to customize our Magento 2 theme with UB Theme Helper.

Please note each theme might come with extra or different settings or features, so beside checking the standard UB Theme Helper Documentation above, make sure you scroll down this guide to see specific settings for UB Bookshop theme.

1. Theme configuration

1.1 Typography setting

1.1.1 Base font size:

Base Font Size: The font size of most of other elements (eg. heading elements ) will be automatically calculated relative to this value. Default value: 14px.

Note:

After you edit your active theme’s Typography settings, you must run deploy command to apply the changes. Go to your root and run the command:

  • rm -R var/*
  • rm -R pub/static/*
  • php -f bin/magento setup:static-content:deploy --theme Ubertheme/[theme_name]

Depending on which active theme you are using, you fill in with the correct [theme_name] as follows:

  • UB BOOKSHOP: theme_name is “bookshop_default”
  • UB BOOKSHOP BLUE: theme_name is “bookshop_blue”
  • UB BOOKSHOP GREEN: theme_name is “bookshop_green”
  • UB BOOKSHOP VIOLET: theme_name is “bookshop_violet”
  • UB BOOKSHOP XMAS: theme_name is “bookshop_xmas”
  • UB BOOKSHOP YELLOW: theme_name is “bookshop_yellow”

1.2 Element Settings

1.2.1 General Settings

  • Show author: Set “Yes” to show author name on all pages. Make sure you clear Magento cache to apply the change to this setting.
  • Other settings are as per our standard UB Theme Helper Documentation.

1.3 Color Settings

1.3.1 Pages Color

UB Bookshop supports primary color and secondary color as follows:

  • Primary Color: Primary color refers to the color scheme of theme design. We recommend you leave this setting unchanged, unless you want to make custom graphic UI. Default color: #f0141e. If empty, default value will be used.
  • Secondary Color: (This is a work-in-progress feature) to be updated in the next version. Default color: #d8121b
  • Primary Text Color: Default color: #777. If empty, default value will be used.
  • Secondary Text Color: Default color: #999. If empty, default value will be used.
  • Primary Link Color: Default color: #000. If empty, default value will be used.
  • Primary Link Hover Color: Default color: #f0141e. If empty, default value will be used.
  • Primary Border Color: Default color: #eee. If empty, default value will be used.
  • Secondary Border Color: Default color: #000. If empty, default value will be used.

1.3.2 Header color

1.3.2.1 Head Background
Front-end Appearance:

To change Head background, you can choose of one three types: Background color; Background image; or Background image, color.

  • Background Color
  • Simply fill in the color of your choice using the Color picker.

    Note: To apply the changes you made, make sure you run deploy command, as per this note

  • Background Image:
  • Head Background Image: Upload the image from your computer. To delete a selected image by check delete box. Allowed file types: png, gif, ipg, jpeg, svg.
  • Head Background Position: Support three types of values: Length values (eg. 100px 5px); Percentages (e.g. 100% 5%); Keywords (e.g. top right, center bottom, inherit)
  • Head Background Repeat:
    • Repeat: The background image will be repeated both vertically and horizontally. This is default
    • Repeat-x: The background image will be repeated only horizontally
    • Repeat-y: The background image will be repeated only vertically
    • No-repeat: The background-image will not be repeated
    • Inherit: Inherits this property from its parent element
  • Background Image, Color:
  • This setting simply combines both options mentioned above — Background Image and Background Color.

    • Head Text Color: Default color: #999. If empty, default value will be used.
    • Head Link Color: Default color: #999. If empty, default value will be used.
    • Head Link Hover Color: Default color: #fff. If empty, default value will be used.

    Note: To apply the changes you made, make sure you run deploy command, as per this note

    1.3.2.2 Header background

    • Header background: Similar setting as per afore-mentioned section Page Color | Header | Head background
    • Header Background Color: Similar setting as per afore-mentioned section Page Color | Header | Head background Color

    Note: To apply the changes you made, make sure you run deploy command, as per this note

    Front-end Appearance:

    1.3.3 Main Content color configuration

    Main Content Background: You can select one of three options: Background Color, Background Image, or Background Image, Color.

    • Main Content Background: Similar setting as per afore-mentioned section 1.3.2.1 Page Color | Header | Head Background
    • Main Content Background Color: Default color: #fff. If empty, default value will be used.
    • Main Text Color: Default color: #666. If empty, default value will be used.
    • Main Link Color: Default color: #000. If empty, default value will be used.
    • Main Link Hover Color: Default color: #f0141e. If empty, default value will be used.

    Note: To apply the changes you made, make sure you run deploy command, as per this note

    2. Page configuration

    2.1. Catalog (Grid)

    2.1.1. Product Columns (Desktop)

    The section allows to specify the number of product columns, if the browser viewport width >= 1024px.

    • Product Colunms -- One column Layout: this setting applies for One column layout. Simply set the number of product columns you want.
    • Product columns -- Two colums Layout: this setting applies for Two column layout. Simply set the number of product columns you want.
    • Product colums -- Three colums layout: this setting applies for Three column layout. Simply set the number of product columns you want.

    2.1.2 Product Columns Tablet (Landscape)
    Specify the number of product columns displayed if the browser viewport width (≥992px).

    2.1.3 Product Columns Tablet (Portrait)
    Specify the number of product columns displayed if the browser viewport width (≥768px).

    2.1.4 Product Columns Mobile (Landscape)
    Specify the number of product columns displayed if the browser viewport width (<768px).

    2.1.5. Product Columns Mobile (portrait)
    Specify the number of product columns displayed if the browser viewport width (<480px).

    2.1.6. Product Grid Image Settings
    Set your own image width and height values. Default value Width is 170px and default value Height is 225px. If empty, default value will be used.

    Note: To apply the changes you made, make sure you run deploy command, as per this note

    2.2. Product view

    2.2.1 Gallery Settings

  • Gallery navigation loop: Set to ‘No’ if you wish to hide Gallery navigation loop on image the product.
  • Display alt text as image title: Set to ‘Yes’ to display alt text as image title.
  • Turn on/off fullscreen: Set ‘No’, to turn off the full screen mode of image
  • Sliding direction of thumbnails:
    • Horizontal: Image thumbnails will be repeated horizontally.
    • Vertical: Image thumbnails will be repeated vertically.
  • Transition effect for slides changing: You can choose of one three type: Slider; Crossfade; or Dissolve. You can read more here.
  • Transition duration: Set transition duration. Value in ms.
  • Front-end Appearance:

    Note: To apply the changes you made, make sure you run deploy command, as per this note