A Sneak Peek of our brand new 2019 Magento 2 theme


Mar 20 Update: Let’s take a closer look at one of our latest Product Detail Pages. Scroll down this article to see what we’re working on.
Mar 19 Update: Advanced Product Tabs will be a built-in feature of this upcoming premium Magento 2 theme.

In the upcoming weeks, we’ll be releasing a brand new Magento 2 theme. In the build-up to the theme launch, we’re giving you an exclusive preview of the product page layout’s wireframes that we’re working on. Here is a glimpse at our upcoming product pages:

  • Product Page Layout #1: Classic Product Page
  • Product Page Layout #2: Horizontal Classic Product Page
  • Product Page Layout #3: Fullscreen Product page with Slider
  • Product Page Layout #4: Fullscreen Product page with content
  • Product Page Layout #5: Product Page with Accordion
  • Product Page Layout #6: Product Page with sidebar column

The product page can be difficult to get right. We try to create product page layouts and features that care consistent across the entire catalog, and try to balance between too much information and lack of information.

Magento 2 theme - UB Tree Pro demo

What turns ordinary product page into a good one?

Here are the core ingredients we started with when working on each product page layout:

Informative product images.

When shopping online, customers can’t try clothes on or physically hold and touch a product in their hands, so using high quality product images is extremely beneficial to drive users to continue to checkout.

Since using amazing product images is so important to shoppers, our design team will come up with 5+ ready-made product pages with different product image layouts to give you the best possible starting point:

  • Classic product images with horizontal / vertical thumbnail alignment (Universal)
  • Full screen product image (Image-Focused)
  • Product image sliders / long scrolling product images (Image-Focused)

Magento 2 theme - Product Image Layouts

You can continue to improve upon them. The more images that you have, the better, so show off your product at different angles, views and in different contexts.

Call-to-action

We will try different approaches to make sure that the “Add to Cart” or “Buy Now” CTA button is welcoming, prominent and easy to find. If your call-to-action button doesn’t stand out, customers aren’t going to click it.

Specific product description and information

Aside from the product description, other details like Color & Size swatches, Stock levels, SKU #, Reviews, Specs etc will be well laid out to help you describe your product effectively.

It can be tough to have a simple and effective product page design, however we will work upon and iterate to give you the best possible layouts that your shoppers enjoy browsing with valuable information.

Additional information tabs

Our upcoming product pages do include both horizontal tab and vertical tab functionality which allows you to add additional product information into the product page like Reviews, Size Charts, Brand etc.,

By taking advantage of the tab functionality, you can include the most appropriate information without it being too crowded, and without sending a visitor to another page.

Cross-sells / up-sells

Showing other product options within the product itself is one of effective ways to get more dollar value from a potential customer.

Our new product page layouts will allow you to display related or recommended products to cross-sell or up-sell directly to your customers.

Option to subscribe

Email newsletters are a powerful tool for communicating with your customers, which is why we will incorporate this element into the new product pages.

Wireframe preview: A wide variety of product page layouts

It’s a good idea to have a look through the wireframes of the product page layouts that we are working on. We hope it will give you some ideas about our upcoming new Magento 2 theme. We will add more sneak peeks of the theme here, so check back this article to keep you in the loop.

Magento 2 theme - Classic Product Page

Magento 2 theme -- Classic Product Page

Magento 2 theme - Horizontal Classic Product Page

Magento 2 theme -- Horizontal Classic Product Page

Magento 2 theme - Product Page with Accordion

Magento 2 theme -- Product Page with Accordion

Magento 2 theme - Fullscreen Product Page

Magento 2 theme -- Fullscreen Product Page with fixed content

Magento 2 theme - Fullscreen Product Page with Slider

Magento 2 theme -- Fullscreen Product Page with Slider

Magento 2 theme - Product Page with Classic Description

One of the concept we’re working on -- Product Page with Classic Description

We hope you like the wireframe preview. Let us know what you think …

PS. If you have any suggestions or question about this brand-new Magento 2 theme not just design but the features, do not hesitate to contact us on email info (at) ubertheme.com.

Written By

Head of UberTheme Team

Comments