UB Trex for Magento 2

Last Updated: Dec 17, 2018

UB Trex (beta) is a free Magento 2 theme we developed from the ground up. This documentation is to guide you through all steps how to install and configure responsive Magento 2 theme UB Trex.

NOTE: Three extensions (UB Mega Menu, UB Content Slider, UB Quick View) are not packed with the free UB Trex theme by default.

UB Trex is a native Magento 2.x theme, please make sure your system meets the Magento 2 System requirements.

The download package includes:

Theme: single theme for manual installation
Quickstart: UB Trex without extensions (This quickstart is for free UB Trex version, without built-in extensions. You can purchase extension packages which are provided separately).

DOWNLOAD NOW

There are two ways to install a UberTheme Magento 2 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 our Demo.

Let’s start UB Trex manual installation by following these steps:

Step 1: Download and extract UB Trex theme
Step 2: Apply the theme

NOTE: Make sure you backup the store database and all Magento 2 files before proceeding installation.

Step 1. Download and extract UB Trex theme

1.1. Download and extract UB Trex theme

Download the ub_trex_beta_1.0.0 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:

1.2. Copy and paste the folders to your web root

1.2.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/design/frontend/Ubertheme/trex/

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 tree like this:

1.2.2. Copy and paste the pub/media folder 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:

Step 2: Apply the theme

1. Navigate to System >> Tools >> Cache Management, select All the cache types, take Action as Refresh and Submit.

2. Navigate to Content >> Design tab >> (Select Configuration) Edit field with the “UB Trex“.

3. Click Save Config button to finish. And clear cache again.

NOTE: If you wish to set up UB Trex like our demo, there’re a few more steps, including static block configuration and extension configuration.

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

The layout of UB Trex Homepage can be illustrated as follows:

As seen in the screenshot, UB Trex storefront has the following static blocks:

Extension: UB MegaMenu (UB Top Menu)
Static Block: Slideshow
Static Block: Our Policy
Static Block: Trending Product
Static Block: Collection
Static Block: Hot Products
Static Block: Social
Static Block: Footer links

V. Page Configuration

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

Homepage Configuration

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

Page in Websites tab: click to see the Back-end setting
Design tab: click to see the Back-end setting. You can copy and paste the following code into the “Design” field.

 <referenceContainer name="topsl1.container">
 <block class="Magento\Cms\Block\Block" name="slideshow" before="-">
 <arguments>
 <argument name="block_id" xsi:type="string">slideshow</argument>
 </arguments>
 </block>
 </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="content">
 <block class="Magento\Cms\Block\Block" name="our-policy" before="-">
 <arguments>
 <argument name="block_id" xsi:type="string">our-policy</argument>
 </arguments>
 </block>
 </container>
 </container>
 </referenceContainer>
<referenceContainer name="main">
 <block class="Magento\Cms\Block\Block" name="trending-products" before="-">
 <arguments>
 <argument name="block_id" xsi:type="string">trending-products</argument>
 </arguments>
 </block>
</referenceContainer>
 <referenceContainer name="bots1.container">
 <block class="Magento\Cms\Block\Block" name="collection" before="-">
 <arguments>
 <argument name="block_id" xsi:type="string">collection</argument>
 </arguments>
 </block>
 </referenceContainer>

 <referenceContainer name="bots2.container">
 <container name="sections.panel.bots2" label="" htmlTag="div" htmlClass="container">
 <container name="sections.panel.bots2.content" label="UberTheme - Bots2 Content" as="sections.panel.bots2.content" htmlTag="div" htmlClass="inner">
 <block class="Magento\Cms\Block\Block" name="hot-products" before="-">
 <arguments>
 <argument name="block_id" xsi:type="string">hot-products</argument>
 </arguments>
 </block>
 </container>
 </container>
 </referenceContainer>
<referenceContainer name="bots3.container">
 <block class="Magento\Cms\Block\Block" name="socials" before="-">
 <arguments>
 <argument name="block_id" xsi:type="string">socials</argument>
 </arguments>
 </block>
 </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:

Content tab: click to see the Back-end setting
Page in Websites tab: click to see the Back-end setting.

Copy and paste the code below on the Content field:

<dl><dt>The page you requested was not found, and we have a fine guess why.</dt><dd>
<ul class="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>
</dd></dl><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 Store.</dd><dd>
<ul class="disc">
<li><a 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>
<li>Follow these links to get you back on track!<br /><a href="{{store url=""}}">Store Home</a> <span class="separator">|</span> <a href="{{store url="customer/account"}}">My Account</a></li>
</ul>
</dd></dl>

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:

Content tab: click to see the Back-end setting
Page in Websites tab: click to see the Back-end setting.

Copy and paste the code below on the Content field:

<div class="about-info cms-content">
<p class="cms-content-important">With more than 230 stores spanning 43 states and growing, Luma is a nationally recognized active wear manufacturer and retailer. We’re passionate about active lifestyles – and it goes way beyond apparel.</p>
<p>At Luma, wellness is a way of life. We don’t believe age, gender or past actions define you, only your ambition and desire for wholeness... today.</p>
<p>We differentiate ourselves through a combination of unique designs and styles merged with unequaled standards of quality and authenticity. Our founders have deep roots in yoga and health communities and our selections serve amateur practitioners and professional athletes alike.</p>
<ul style="list-style: none; margin-top: 20px; padding: 0;">
<li><a href="{{store url="contact"}}">Contact Luma</a></li>
<li><a href="{{store url="customer-service"}}">Customer Service</a></li>
<li><a href="{{store url="privacy-policy"}}">Luma Privacy Policy</a></li>
<li><a href="{{store url=""}}">Shop Luma</a></li>
</ul>
</div>

Front-end Appearance:

1. Slideshow

NOTE: The extension UB Content Slider is not packed with the free UB Trex theme by default. If you purchase this extension, you can set up the slideshow block as follows:

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create a Slideshow block with the configuration like this sample: Back-end setting