UB Atoms v1.0.0-beta3 adds improvements to the theme admin panel

We’re excited to announce that UB Atoms v1.0.0-beta3 is officially here and with it, the theme admin panel comes loaded with significant improvements. In this post, we’ll dive into some of UB Atoms’s admin area features.

Don’t miss what the first UB Atoms version brought!

UB Atoms is a modern responsive theme that looks great on both desktop and mobile browsers. It’s equipped with a dedicated theme admin panel which brings essential features for your Magento store. The theme’s features that are built-in will make life easier for you:

UB Atoms is also relatively easy to customize and suitable for every type of Magento store.

The UB Atoms’s theme admin approach

UB Atoms’s admin area is not the most extensive option at the moment. However, almost common customization can be done from the admin panel, including typography, colors, elements (Header, Footer, Button, Back to Top Button, Infinite Scrolling, Newsletter, Product tabs, etc.).

UB Atoms - Premium Magento 2 theme

UB Atoms -- Theme Admin Panel

We’ll show you some of the UB Atoms’s admin area features, scroll down to learn more.

UB Atoms typography

You can configure fonts for basic elements of a page which will be used on the frontend of your Magento store. You can define two types of fonts:

  • Google font
  • Custom font

UB Atoms - Google Fonts built-in

UB Atoms supports Google Fonts

UB Atoms utilizes Google fonts to provide you with an array of typography options. Google fonts are available on a dropdown list where you will be able to assign these fonts to selected sections of the frontend. When choosing a font name from Font Library > Font Name, each font displays a preview of the font and the previews are only generated upon demand, not loaded on page load. After selecting a font, only that specific font’s resources will load.

UB Atoms - Custom Fonts

UB Atoms supports custom fonts

If you want to create extra branded and professional style, you achieve that with the custom fonts by uploading custom font files to the same server on which your Magento is installed. HK Grotesk is a custom font pre-installed in UB Atoms by default. We will provide detailed instructions on how to define and configure a new custom font.

UB Atoms Color

UB Atoms offers the ability to configure basic colors for the entire page. The ‘base’ colors will be inherited by all sections of the page.

UB Atoms - Flexible Color Options

UB Atoms -- Flexible Color Configuration

The Color tab in UB Atoms includes a set of common colors and brand elements to be used sitewide. This enables you to form a consistent and coherent store. If you need any specific combination of custom colors, you simply select the theme color (Default, Blue, Black, Red) that you want to change under Theme > Colors, click the ‘Edit’ button, and then click any color icon to open the Color Picker like the screenshot below.

UB Atoms - Flexible Color Options

UB Atoms -- Flexible Color Options

Elements, Category View, and Product View

Beside Typography and Color, UB Atoms adds the ability to configure the options related to the category view, product view, and common elements like:

  • Element: Header/Footer, Primary and secondary button, Infinite scrolling.
  • Category view: General, Grid mode, List mode
  • Product view: Gallery, Related products, Up-sell products, Custom tabs

UB Atoms Theme Elements

UB Atoms > Theme > Elements

UB Atoms Category View

UB Atoms > Pages > Category View

UB Atoms Product View

UB Atoms > Pages > Product View

Customization & Child theme

When you want to make some custom design changes that you can’t find any settings in the theme admin panel, you can put your own CSS styles without touching UB Atoms theme files.

UB Atoms Customization

UB Atoms Customization

You can add your CSS styles directly into the Custom CSS field in the UB Atoms’s theme admin panel. Or, preferably, you can upload CSS files to the theme’s directory (app/design/frontend/Ubertheme/atoms/web/css/custom) which allows you to override the default styling of UB Atoms theme. Multiple CSS files (if any) should be separated by a comma.

If you’re using UB Atoms as the foundation of a completely custom design, you can create new child themes associated with the parent theme UB Atoms. Based on the child theme approach, there are plenty of customization possibilities.

UB Atoms Child theme

An example of a child theme implementation in UB Atoms

The Fashion theme (UB Atoms Child V1) in the screenshot above is an example of the child theme we implemented in the UB Atoms. The description ‘Child theme | Parent theme UB Atoms’ appears in small text below the theme’s title indicates that this is a child theme, and its parent theme is UB Atoms (also known as the default ‘Technology’ theme).

The child theme is based on the fallback scheme. The child theme is used first. If a configuration option is not found in the current child theme, the parent theme’s configuration will be used. Both parent and child themes come with 2 sets of configuration:

  • Default Configuration: initial default configurations of the parent/child theme
  • Custom Configuration: changes made to the default configurations of the parent/child theme. Custom configuration is always used first. If no custom configuration is found, the default configuration will be used.

That said, creating your own child theme lets you upgrade the parent UB Atoms theme without affecting the customizations you’ve made to your child theme.

How to get it

If you’re looking for a powerful, large-catalog Magento 2 theme for your store, UB Atoms may be a great fit for you. Check out our demo, learn about its innovative theme features and get the theme here.

Tell us what you think

We’d love to hear what you think of UB Atoms. Send us your feedback, including which features you’d like to see in future versions, to info (at) ubertheme.com.

Written By

Head of UberTheme Team

Comments