UB Atoms for Magento 2

UB Atoms is a stuninng responsive Magento 2 theme, a technically robust and flexible theme that looks sharp across devices and suits a wide range of product and industry types.

It contains ready-to-use layouts, advanced features (such as a mega menu, rich content slider, ajax-add-to-cart quick view, rich snippets), a newly revamped theme admin panel, and performance improvements.

This documentation describes the 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 compatibility with 3rd extensions.

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

The download package includes:

• Theme: UB Atoms (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 demo

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.

Let’s start installing UB Atoms manually following these steps:

• Step 1: Download and extract UB Atoms 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

Step 1. Download and extract UB Atoms theme

1.1. Download and extract UB Atoms theme

Download the ub_atoms_(version) 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 Magento 2 root folder. Once done, you should see the path:

..app/design/frontend/Ubertheme/atoms/

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 Magento 2 root folder. Make sure you *merge*, not ‘replace’ existing media folder contents. The overwritten folders should have a directory layout like this:

Step 2: Enable UB Theme Helper and our built in Magento 2 extensions

2.1. (Required) Install PHP Mobile Detect Resource APIs

You have to install the PHP Mobile Detect Resource APIs using Composer by requiring the mobiledetect/mobiledetectlib in your project. You can check out How to install PHP Mobile Detect Resource APIs here.

2.2. Install UB extensions & Deploy static files
Open your terminal and go to the Magento 2 directory. In this directory, run the following command:

• php -f bin/magento setup:upgrade
• php -f bin/magento setup:di:compile
• php -f bin/magento setup:static-content:deploy -f
• php -f bin/magento cache:clean

Once you finish the last command, navigate to your Magento Admin Panel | Ubertheme’s Extension, you should see the extension’s menu respectively as follows:

Click [Theme Helper] Configuration, the theme panel looks like this screenshot:

(View the full size screenshot)

Step 3: Import Sample Data

Now that you’ve installed UB Atoms theme and all built-in extensions, let’s move on to the next step — Import Sample data.

Sample data refers to all CMS pages, CMS blocks and widgets we created for UB Atoms .

In your Magento 2 Admin Panel, navigate to Ubertheme’s Extension | (Theme Helper) Configuration, then simply click Import Sample Data button.

Step 4: Activate the theme

1. In your Magento 2 Admin Panel, navigate to Ubertheme’s Extension | (Theme Helper) Configuration. You will see a grid of themes available.
2. 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.

After you click ‘Activate’ button, you should see the screen below:

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

• php -f bin/magento cache:clean

After you complete all commands above, your theme admin panel should look like this:

And the storefront like on the following screenshot:

Note that this screenshot was captured when we installed UB Atoms theme manually on a fresh Magento 2.4.x instance without any sample data.

That’s it. 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. The Quickstart package includes Magento 2, UB Atoms theme and our extensions built in the theme, and sample data. 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 Atoms Homepage can be illustrated as follows:

As can be seen in the screenshot, the UB Atoms’s default storefront (Technology) has the following static blocks:

• UB Top Menu (Extension: UB MegaMenu)
• Static Block: Slideshow (Extension: UB Content Slider)
• Static Block: Sale Items
• Static Block: Today’s popular picks
• Static Block: Season Sale Items
• Static Block: New Products
• Static Block: Category Sales
• Static Block: Shop by Categories
• Static Block: News/Updates
• Static Block: Brands
• Static Block: Free Shipping
• Static Block: Quick Links

(Coming soon)

(Coming soon)

The premium UB Atoms theme is packed with four featured extensions (UB Mega Menu, UB Content Slider, UB Quick View or UB Rich Snippets). Below you can find a list of userguides available for each extension:

(Coming soon)

(Coming soon)