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.

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 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
NOTE: Make sure you backup the store database and all Magento 2 files before proceeding installation.

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:

Manual installation - Theme package
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/

Attention for Mac OS / Linux 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:

Manual installation - App directory

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:

Manual installation - Pub directory

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:

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 setup:upgrade
  • php -f bin/magento setup:di:compile
  • php -f bin/magento setup:static-content:deploy -f
  • php -f bin/magento cache:clean
installation 1

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:

installation3

Click [Theme Helper] Configuration, the theme panel looks like this 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 .

Note: If you install UB Atoms theme in an existing Magento 2 installation with your own content, you can discard the Import Sample Data step. Under this circumstance, your existing data might be overwritten.
If you install a fresh Magento 2 instance and want to match the demo layout exactly, you can Import Sample Data, it includes CMS Pages, CMS Blocks and Widgets.

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

installation 1
installation2
installation3

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.

installation3

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

installation3

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

  • php -f bin/magento cache:clean

NOTE: If you make any custom changes via the ThemeHelper, you need to re-deploy static files to compile LESS to CSS.

Static view files deployment is affected by Magento modes (Default | Developer | Production). Please refer to Magento guide here to learn more about the static deployment command (php -f bin/magento setup:static-content:deploy -f)

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

installation3

And the storefront like on the following screenshot:

installation3

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.

NOTE: UB Atoms theme comes with multiple pre-designed homepage layouts (Technology, Fashion, etc.)

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

V. Page Configuration

(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)