Flexbox Grid

Flexbox and CSS Grid are the most popular responsive layout models which are widely supported across platforms and browsers. Our upcoming UB Atoms theme will support by both Flexbox and CSS Grid by default. If Flexbox is disabled, the CSS Grid will be used.

In this post, we’ll take a closer at the Flexbox that UB Atoms does support and learn how it helps distribute and align content in ways that Magento pages need.

A brief introduction about Flexbox

Flexbox -- a shorter term for CSS3 Flexible Box Layout -- is a new layout mode in CSS3. It describes ways to align and size elements including the parent element (the flex container) and the child elements (the flex items).

UB Atoms theme - Support Flexbox Continue reading

UB Atoms theme tructure

April 15, 2021 Update: UB Atoms v1.0.0 stable released!

Last week we introduced a sneak peek of the upcoming Magento 2 theme at Ubertheme -- UB Atoms. We promised you a brand new theme that will be fully revamped, unlike any other Magento 2 themes that Ubertheme has offered. Today, we are happy to introduce you to the structure of the UB Atoms theme that we’re working on.

Reasoning…

When building the UB Atoms, we have been finding a uniform approach that makes the theme development and maintenance easier. The ultimate goal is to create a brand new M2 theme with good performance and extensive customization possibilities.

With that in mind, our team has thought about what we should change and how we should build a new M2 theme from scratch.

There are a number of points that UB Atoms will typically abide by: Continue reading

UB Atoms theme


April 15, 2021 Update: UB Atoms v1.0.0 stable released!
Feb 5, 2021 Update: UB Atoms v1.0.1 beta has just been released, with a new Fashion homepage added.
Nov 26, 2020 Update: We’ve just introduced the UB Atoms theme hierarchy that we’re working on here. It is fully revamped, unlike any other Magento 2 themes that Ubertheme has offered

We’re excited to introduce you to a sneak peek of a revolutionary new Magento 2 theme. It’s called UB Atoms.

Inspired by Atomic Design -- a methodology of creating modular designs, UB ‘Atoms’ is designed to be exactly what it sounds like -- establishing the basic building blocks for pages, such as form label, an input or a button, color, typography, grids, and the like, rather than just creating simple collections of web pages.

The theme structure will be fully revamped, unlike any other Magento 2 themes that Ubertheme has offered.

Magento 2 theme - UB Atoms

Continue reading

UB Content Slider v.1.1.7

UB Content Slider v1.1.7 now supports Slick carousel by default in addition to the existing OWL carousel library. This release helps to boost and increase sales in a number of ways by allowing you to display attractive banner sliders, best seller product carousels, lookbook, etc on your Magento 2 store using the Slick carousel.

We will walk you through new features and improvements in UB Content Slider v1.1.7 below. Continue reading

Carousel examples and takeaways

Designing a carousel (sometimes called ‘slider’, ‘slideshow’) that works can be a real pain and it’s true that sliders do suck if they aren’t used or designed well. You might have heard of the drawbacks around sliders such as:

  • Only a small percentage of people actually click on a slider, which almost always the first slide;
  • Sliders don’t always work well on mobile devices;
  • People tend to ignore your slider because it triggers banner blindness. Visitors will skip the messages in your slider as they consider it advertisement or promotions;

So, is the carousel really bad? If carousels aren’t that effective, why do people use them?

Actually, carousels introduce a level of complexity to an interface, however, the carousels are everywhere on the web and have been an essential web design tool for e-commerce sites.

So, let’s take a closer look at some real use cases to see the possibilities that carousels offer and learn how to make carousels work better. Continue reading

UB Mega Menu v1.2.0

We’re happy to announce the release of UB Mega Menu v1.2.0 that brings a new menu type -- horizontally stacked category dropdown. This simple solution is handy for a massive retail store with deep level categories.

Let’s take a closer look and see how you can experiment with your mega navigations.

Multiple horizontal menu levels

With the horizontally stacked category dropdown, the mega menu is visually divided into the 3-level structure: Main menu > Submenu 1 > Submenu 2.

On mouse hover, each primary category branches into submenus with corresponding second-level and third-level subcategories visible at once in one dropdown.

Magento 2 mega menu - Horizontal and Vertical menus

New menu type -- Horizontally stacked category dropdown -- UB Mega Menu

Continue reading

UB Trex Pro thumbnail

Changelog for (Magento 2 theme) UB Trex Pro -- version 1.0.7:
Latest update: Nov 2, 2020

1.0.7
  • Compatibility testing and fixing issues with Magento 2.4.1
  • Update to the latest UB Mega Menu, UB Content Slider, and UB Quick View extensions.
1.0.6
  • Compatibility testing and fixing issues with Magento 2.4.0
  • Added: Integrate new Magento 2 extension -- UB Rich Snippets by default.
  • Added: Lookbook layouts for Fashion and Furniture
  • Fixed: Inherit Layout XML with child_theme through UB Theme Helper
  • Improve Minicart style including CTA button and spacing
1.0.5
  • Change the Masshead using Category Image instead of Block CMS.
  • Add Lazyload Configuration in the UbThemeHelper (UB Trex Pro | Theme | Elements | Main | LazyLoad). Lazyload will be automatically removed when being disabled via Ub Themehelper
  • Change Static Block Content to automatically switch images when viewing in different devices
  • Change CSS Button (Primary/Secondary) for CSS optimization
  • Improved & optimized LESS
1.0.4

Continue reading

UB Rich Snippets Release

UB Rich Snippets extension uses JSON-LD to automatically add valid structured data information (using schema.org vocabulary) about your Magento 2 site in the background. This way, the extension entirely separates the markup data from the HTML code, so you do not need to tweak the HTML elements directly to integrate the snippets.

The extension will primarily focus on supporting the following types of rich snippets:

  • Product Snippets
  • Category Snippets
  • Organization
  • Breadcrumbs
  • Facebook OpenGraph
  • Twitter card (work-in-progress)
  • Sitelinks search box
  • Website

Continue reading

Shoppable lookbook

For any kind of aspirational lifestyle products (e.g.. clothing, furniture, footwear, cosmetics, etc), just showing a photo of your product isn’t always enough. You need to promote a particular product or product line in a visually appealing way. This is where a digital lookbook comes in handy.

Enter the lookbook, you’re probably familiar with the similar terms like Shop this room, Shop the look, Shop by Look, Product Tours, etc. When done right, a lookbook page helps to tell a story, engage your customers, and inspire them to buy your products. And the customers can interact and buy straight from your lookbook.

Shoppable Lookbook

Shoppable Lookbook.

Let’s take a quick look at how you can create a lookbook page for your own Magento 2 store. We’ll cover two options: Continue reading

Migrating Configurable Products

For anyone familiar with Magento 1, it’s quite common that a configurable product is one of the most popular product types and powerful when you sell complex products with multiple attributes.

However, it can be quite daunting migrating configurable products from Magento 1 to Magento 2 since Magento 1 provides fairly extensive pricing options, such as Special Price, Tier Price, and Cost. That’s why we received many questions like “does the migration tool migrate configurable products attached to the correct simple products and attribute sets?”.

In this article, we will try to cover the main differences of Configurable Products in Magento 1 versus Magento 2 and how our UB Data Migration Pro module helps to migrate all Configurable Products from Magento 1 to Magento 2 automatically. Before we dig deeper, let’s talk briefly about what simple products versus configurable products are. Continue reading