UB Trex Pro for Magento 2 – Furniture Theme

Important:
UB Trex Pro theme comes with 2 homepages -- Fashion and Furniture. These instructions will guide you through configuring the Furniture layout. If you want to use the default Fashion layout, please refer to the official documentation here.

UB Trex Pro is a handy multi-purpose Magento 2 theme with:

  • 2 homepages (Fashion and Furniture)
  • 6 pre-made product layouts
  • Multiple category view options
  • 3 complimentary Magento extensions including Mega Menu, Content Slider, Quick View
  • Packed with UB Theme Helper -- a powerful theme admin dashboard
  • Advanced custom product tabs
  • Up-sells and cross-sells integration
  • Infinite scroll & much more

This documentation describes the Furniture theme installation process, and shows how to configure the theme and built-in extensions.

We recommend installing our theme in a testing environment before deploying it to your production environment. The theme was tested in clean Magento 2 installations without 3rd party extensions and we can’t guarantee for compatibility with 3rd extensions.

NOTE: If you are unable to find your answer here in our documentation, we encourage you to submit a ticket via our helpdesk, we’re very happy to help you out.

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

The download package includes:

  • Theme: UB Trex Pro (single theme including UB Theme Helper and all extensions built in the theme for manual installation)
  • Quickstart: is a full Magento 2 CMS version with our template and extensions already integrated to match our demo
  • PSD source files: all graphic source files

DOWNLOAD NOW

There are two ways to install a UberTheme Magento 2 theme:

  • Manual Installation: Applicable if your store is full of 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.

The Furniture theme is packed with UB Trex Pro by default. So, you simply install the theme manually following these standard steps:

  • Step 1: Download and extract UB Trex Pro single theme
  • Step 2: Enable UB Theme Helper and our built-in Magento 2 extensions
  • Step 3: Import Sample Data
  • Step 4: Activate the theme

For more details, check out the Installation Guide (for both Manual Installation and Quickstart Installation options).

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

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

UB Trex Pro Furniture Homepage

As seen in the screenshot, UB Trex Pro -- Furniture Homepage has the following static blocks:

  • UB Top Menu (Extension: UB MegaMenu)
  • Static Block: Top Bar
  • Static Block: Slideshow (Extension: UB Content Slider)
  • Static Block: Intro
  • Static Block: Recent Products
  • Static Block: Footer links

V. Page Configuration

Furniture Homepage Configuration

Step 1: In the Admin Panel, navigate to Content | (Elements) Pages | Add New Page with configuration as follows (You can disable the default Home page of your M2 instance for now):

  • Content tab: click to see the Back-end setting (You simply leave the Content field blank. This change was made in accordance with the new update in Magento 2.3.4. It was handled by the Widgets mentioned in Step 3 below.)
  • Page in Websites tab: set Store View to Store View 6
Note: As of Magento 2.3.4, custom layout update has been deprecated. The Custom Layout Update field on the CMS Page Edit, Category Edit, and Product Edit pages has been converted to a selector. So, UB Trex Pro theme has been updated accordingly, and you will need an additional Step #3 below to configure the Widgets for related CMS blocks on the Homepage.

Step 2: After adding the Homepage with above-mentioned configuration, the storefront remains blank. You still need to add related CMS blocks to get the Homepage as per our demo, including:

  • UB Top Menu (Extension: UB MegaMenu)
  • Static Block: Top Bar
  • Static Block: Slideshow (Extension: UB Content Slider)
  • Static Block: Intro
  • Static Block: Recent Products
  • Static Block: Footer links
Please refer to section VI. Static Block Configuration to learn more about how to create each static block as per our demo.

Step 3: In the Admin Panel, navigate to Content | (Elements) Widget | Add Widget with the configuration as follows:

NOTE: This user guide primarily focuses on the Furniture layout and its built-in blocks. You can refer to the UB Trex Pro’s default Fashion Homepage user guide here to learn more about the Fashion Homepage and its built-in blocks.

1. Top Bar

Note: This block is used in all Homepages of the UB Trex Pro theme. If you already create this block for the default Fashion Homepage, please discard this section.

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

In the Content field, click the Show/Hide Editor button, then copy and paste the following code:

<p>Free Ground Shipping on <a href="{{config path=&quot;web/unsecure/base_url&quot;}}">All Us</a> Orders Over $75.</p>

Front-end Appearance:

2. Slideshow

As of UB Trex Pro v1.0.4, the Slideshow comes with 2 demo types:

  • Banner Slideshow
  • Image Slider with Product Image Hotspot enabled

You can display the slideshow at the top of the Furniture homepage as follows:

2.1. 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

In the Content field, click the Show/Hide Editor button, then copy and paste the following code:

<div class="slideshow-section"> 
{{block class="Ubertheme\UbContentSlider\Block\Slider" show_title="0" name="home-furniture-version-v1" content_type="slider" single_item="1" slider_key="home-furniture-version-v1"}} 
</div>

2.2. Then, go to Ubertheme’s Extensions | [Content Slider] Manage Sliders | click “Add New Slider” button and fill in the required configuration as per this screenshot.

After that, you click ‘Manage Slide Item’ to create slide items like this:

manage slide items

2.2.1 Create a Banner Slideshow: You can add multiple slides filled with your featured images and captions. You can use this HTML as a sample block content (Fill in the Description field with the following code):

<div class="slide-content-details"><h2 class="title">Kenya Standing<br/>Collection</h2>
<div class="desc">Integer vitae turpis quis enim luctus luctus dignissim.<br/>Mauris non commodo ligula acumin dolor.</div>
<div class="actions"><a href="#" class="action primary" title="Shop The Lookbook" ><span>Shop The Lookbook</span></a></div>
</div>
NOTE: UB Trex Pro theme built in UB Content Slider module to create and manage advanced sliders. You can refer to UB Content Slider’s user guide for more details about how to configure the slider your way.

Front-end Appearance:

2.2.2 Create an Image Slideshow with Product Image Hotspot: Click the Manage Slide Items (as mentioned in section 2.2 above), then click Add New Slide Item button to create slide items like this:

manage slide items
NOTE: UB Trex Pro theme built in UB Content Slider module to create and manage advanced sliders with Product Image Hotspots enabled. You can refer to the UB Content Slider’s user guide for more details about how to configure the slider and product image hotspots your way.

Front-end Appearance:

3. Intro

You create the Intro block with the configuration as follows:
Back-end setting

In the Content field, click the Show/Hide Editor button, then copy and paste the following code:

<div class="intro-top">
<div class="container">
<ul>
<li class="left">
<div class="info"><img src="{{media url="wysiwyg/home-furniture-v1/intro-01.jpg"}}" alt="">
<div class="details">
<p class="title">See it. Love it.<br>Shop our Instagram.</p>
<p class="desc">Integer vitae turpis quis enim luctus luctus dignissim ac nisl.</p>
<a class="intro-top-link" href="#">Shop Now</a></div>
</div>
</li>
<li class="center">
<div class="info"><img src="{{media url="wysiwyg/home-furniture-v1/intro-02.jpg"}}" alt="">
<div class="details">
<p class="title">Lighting Collection</p>
<p class="desc">Mauris non commodo dolor, vitae dolor molestie diam, odio at pharetra.</p>
<a class="intro-top-link" href="#">Shop Collection</a></div>
</div>
</li>
<li class="right">
<div class="info"><img src="{{media url="wysiwyg/home-furniture-v1/intro-03.jpg"}}" alt="">
<div class="details">
<p class="title">Decor your Home</p>
<p class="desc">Integer vitae turpis quis enim luctus luctus dignissim ac nisl.</p>
<a class="intro-top-link" href="#">Shop Now</a></div>
</div>
</li>
</ul>
</div>
</div>
<div class="intro-middle">
<div class="container">
<div class="info"><img src="{{media url="wysiwyg/home-furniture-v1/intro-04.jpg"}}" alt="">
<div class="details">
<p class="title">Storq is a multi-purpose <br>eCommerce template for <br>Fashion, Furniture, <br>and more…</p>
<p class="desc">In sodales lobortis mollis. Mauris commodo metus in est marius acumin eleifend ultrices duis ligula tincidunt ultricies enim, in iverra ligula dolo condimentum nec.</p>
<a class="action primary" href="#">Read more about us</a></div>
</div>
</div>
</div>
<div class="intro-bottom">
<div class="info">
<div class="details">
<p class="title">#Modern #Minimalist<br>2018 Collection</p>
<p class="desc">Duis autem vel eum iriure dolor in hendrerit in ulputate elit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et vehicula tortor. Sed sit amet lectus eget tortor porta.</p>
<a class="action primary" href="#">Shop Collection</a></div>
<img src="{{media url="wysiwyg/home-furniture-v1/intro-05.jpg"}}" alt=""></div>
</div>

Front-end Appearance:

4. Recent Products

You create the Recent Products block with the configuration as follows:
Back-end setting

In the Content field, click the Show/Hide Editor button, then copy and paste the following code:

<div class="recent-arrivals">
<div class="container">
<h3 class="block-title">Recent Products</h3>
<div class="block-desc">Available in stores and online. Maecenas in justo scelerisque, <br>suscipit nibh sed, dolor consectetur purus. Sed sit amet lectus <br>eget tortor porta lobortis.</div>
{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" show_pager="1" products_per_page="8" products_count="16" template="Ubertheme_UbThemeHelper::product/widget/content/default_grid.phtml" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^],`1--1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Product`,`attribute`:`category_ids`,`operator`:`==`,`value`:`9`^]^]" page_var_name="puvtgx" type_name="Catalog Products List"}}</div>
</div>
Note: Make sure you use category ID which really exists in your store -- otherwise the block won’t appear.

Front-end Appearance:

5. Footer links

Note: This block is used in all Homepages of UB Trex Pro theme. If you already create this block for the default Fashion Homepage, please discard this section.

You create the Footer links block with the configuration as follows:
Back-end setting

In the Content field, click the Show/Hide Editor button, then copy and paste the following code:

<div class="footer-links">
<div class="container">
<div class="col-1 col-wide block">
<h3 class="block-title">Sign up for our newsletter to receive <br>special offers, news, &amp; events.</h3>
<div class="block-content">{{block class="Magento\Newsletter\Block\Subscribe" name="form.subscribe" as="subscribe" before="-" template="subscribe.phtml"}}</div>
</div>
<div class="col-narrow col-2 block">
<div class="block-title"><img src="{{media url=&quot;wysiwyg/logo/footer_logo.png&quot;}}" alt=""></div>
<div class="block-content">278 26th Street 14th Floor Boulevard<br>Saint-Germain Paris, France.<br>(+33) 144 180 808<br>help@trexpro.com</div>
</div>
<div class="col-narrow col-3 block accordion">
<h3 class="block-title"><strong>Info</strong></h3>
<div class="block-content">
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div></div>
<div class="col-narrow col-4 block accordion">
<h3 class="block-title"><strong>Products</strong></h3>
<div class="block-content">
<ul>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Clothing</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Jewellery</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Watches</a></li>
<li><a href="#">Gifs</a></li>
</ul>
</div></div>
<div class="col-narrow col-5 block accordion">
<h3 class="block-title"><strong>Support</strong></h3>
<div class="block-content">
<ul>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Order Status</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Returns &amp; Exchanges</a></li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Mobile Apps</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div></div>
<div class="col-narrow col-6 block accordion">
<h3 class="block-title"><strong>Account</strong></h3>
<div class="block-content">
<ul>
<li><a href="#">Login / Register</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Track Order</a></li>
<li><a href="#">Gift Cards</a></li>
</ul>
</div></div>
</div></div>

Front-end Appearance:

All complimentary extensions including UB Mega Menu, UB Content Slider, and UB Quick View are integrated in the UB Trex Pro theme by default.

So, please refer to the UB Trex Pro’s main user guide here for more details about each module’s configurations.