Latest news

Magento 2 PWA Studio Demo (Venia) Vs. TigrenPWA Theme

No comments

Progressive Web App has gained popularity and becomes a hot trend worldwide, and e-commerce websites are not exceptions. To encourage stores to catch up with the trend, Magento released Magento 2 PWA Studio. This is a tool for PWA development. However, it will take time and effort to build a PWA with it. That’s why Tigren introduced TigrenPWA – the advanced Magento 2 PWA theme. And a perfect solution for those who want to launch their PWAs quickly.

  • Magento 2 PWA Studio (Venia demo): This is a robust set of tools to facilitate the PWA storefront development and maintenance for Magento 2 websites. Helping people to imagine the results after creating a PWA, Magento offers the Venia PWA demo.
  • Magento 2 PWA Theme by Tigren (Our demo): TigrenPWA theme is developed based on Magento 2 PWA Studio’s tools, ReactJS and GraphQL. It comprises a well-design PWA storefront and APIs to connect core functions on Magento 2 backend to the new storefront. With the Magento 2 PWA Studio base, Tigren’s PWA theme inherits all essential features but gets many improvements and enhancements.

Up to now, Tigren is the leading Magento 2 PWA integration service provider. Using our TigrenPWA theme, you can save the time of converting your website to PWA significantly. More importantly, you will get an excellent PWA version optimal for both desktop and mobile devices.

This post will show you how Tigren’s PWA theme absolutely outweighs the Venia theme and others!

Comparing Magento 2 PWA Studio Demo (Venia) With Tigren’s Magento 2 PWA Theme

A. Features Comparison

As mentioned before, the TigrenPWA theme was built in the PWA Studio cornerstone. Therefore, it acquires all the great features and high-stand code from Magento.

However, Magento PWA Studio has both pros and cons.

On the one hand, it is the most reliable PWA platform for Magento websites and is updated frequently with Magento versions.

On the other hand, PWA Studio is still in the development process. There is a great deal of “coming soon” features in its road map. Consequently, many Magento core functions are currently missing in the Venia storefront. Another weak point of Magento’s official PWA development tool is the monotonous theme design.

Realizing all the advantages and disadvantages of PWA Studio Magento, we have done an enormous amount of work to enhance its design and functionality.

Below is the comparison list in terms of the functionality between the Magento PWA Studio and TigrenPWA theme:

pwa studio vs tigrenpwa features

B. Page Details Comparison

We will go through each page on the PWA demos (e.g., the home page, category page, product page, shopping cart page, checkout page…) to make a detailed comparison.

1/ Homepage

magento pwa studio
  • Magento 2 PWA Studio (Venia demo):

Similar to other Magento 2’s default themes (Luma & Blank), the Venia PWA theme has a basic design with not many elements inside.

Although the current home design is much better than the first release (with absolutely no banner), most Magento stores will probably find it unrealistic to apply such an interface to their website.

In other words, merchants must understand that the Magento PWA Studio demo aims at helping them have a clear view of how a Magento website would be after integrating with PWA in terms of functionality, instead of how their website would look like.

Therefore, if you want to convert your Magento store to a PWA using the PWA Studio tool, you should prepare for heavy storefront customization since the available design seems useless.

Let’s go into detail on Venia’s home page. What does it have?

– A currency switcher (USD/ EUR)

– A banner slider

– 3 small category banners

– 2 more banners with a description

– A product slider

– A simple footer

Overall, this is not an ugly homepage design, but nothing can impress the shoppers.

The biggest minus point on this page, perhaps, is the product slider over the footer. The products have too big and close image thumbnails. Also, the slider navigation (the grey bar) is not aesthetic at all.

  • Magento 2 PWA Theme (by Tigren):

As you can see, we have just visited the home page of the PWA Studio Magento 2 theme, but it already shows a lot of weaknesses.

If you cannot stand that design, and look for a “WOW” Magento PWA storefront design for your shoppers, let’s have a look at the TigrenPWA theme for Magento 2.

Our theme has all the features of Magento PWA Studio (and more) beneath a well-designed, polished and impressive store interface:

– Language & currency (GBP/ EUR/ USD) switchers.

– A full-width banner slider following the emerging e-commerce web design trend. What’s more? There are added effects on the banner title, buttons, and the images are automatically changed. Not yet, you can easily change the banners on the backend thanks to the built-in Banner Manager plugin.

– 4 category banners with the white-fading hovering effect.

– 2 product sliders (New Arrivals, Bestsellers) with the zoom-in hovering effect. Also, when the users hover over the product images, they show the wishlist & comparison icons.

– A “Today’s Deal” product slider to help store owners boost sales for certain products at attractive prices. In the Magento backend, it’s easy to choose which sales items are displayed in the list.

– 3 more banners with different styles.

– A brand slider above the website footer.

– Newsletter subscription on the footer.

– A Top-up floating popup.

Bottom navigation (on mobile): The TigrenPWA theme looks more like a native app by adding the bottom navigation on mobile design.

There is a considerable difference between Venia storefront’s homepage and that of Tigren’s Magento PWA theme.

So, if you are seeking a PWA theme that is more practical than PWA Studio and can be applied without customization, the TigrenPWA theme is an ideal choice.

2/ Category Page

Grid Mode:

magento pwa studio demo

Category Filter:

magento pwa studio version

List Mode (Tigren Only):

pwa demo
  • Magento 2 PWA Studio (Venia demo):

Many people commented that Magento PWA Studio indeed only creates a complete design for the homepage while the remaining pages are just poor-modified designs of its mobile version. What do you think?

In the category page of the Venia PWA theme, there are three super big columns of products, filter & sort buttons, and a pager.

In most Magento websites, the navigation and filter are often in the left sidebar of the category page. However, in the PWA Studio theme, it is hidden and only shown when the users click “Filter”.

Another thing you can notice is that the multi-filter function does not work. Although we can choose many products attributes In the filter column at the same time, however, after clicking “See Results”, the results are incorrect. We think that the multi-filter is a “coming soon” feature of Venia.

  • Magento 2 PWA Theme (by Tigren):

Now, let’s move on to the TigrenPWA theme and see what we have done to tackle all Magento PWA Studio demo issues and bring a greater version to the table.

First, a category banner tells the customers which kind of products will be presented on this page. It will contribute to enhancing the visual of the page, but if you don’t like it, banner disablement in the backend is easy.

Secondly, we added the filter column on the page’s left sidebar to increase convenience for users (like in almost all of the Magento sites). The navigation works smoothly with the multi-filter functionality.

Thirdly, the customers can select between two product display modes: Grid & List. Also, the total number of items on the page is displayed under the category banner. It’s worth noting that in the desktop version, the TigrenPWA theme still shows the pager, but in the mobile one, the pager is replaced by the infinitive loading for more convenience.

Last but not least, there is a banner on the category sidebar (under the filter column) for the store owner to promote/ introduce their special items/ collections/…

It is easy to see, although Tigren’s Magento 2 PWA theme remains three product columns from the Venia theme but we resized it, put on more handy elements, and create a superior look as a result.

3/ Add To Wishlist/ Compare (Tigren Only)

Wishlist & Comparison Icons:

Wishlist & Compare Icons

Comparison Result Popup:

Comparison Result popup
  • Magento 2 PWA Studio (Venia demo):

“Add to wishlist” and “add to compare” are two Magento core features, but these are missing strangely in the Magento PWA Studio demo.

  • Magento 2 PWA Theme (by Tigren):

Since the “Add to compare/ wishlist” are two familiar and useful functions in Magento e-commerce websites, we appended them into the TigrenPWA theme.

When the users hoving product image (on the product list), it will show the wishlist and comparison icons.

It requires customer logins in order to add products to the wishlist.

For product comparison, the users can add up to 3 items to the list (without login), and there is a comparison floating popup above the top-up one.

4/ Product Page

magento 2 pwa studio demo
  • Magento 2 PWA Studio (Venia demo):

Like other Magento PWA Studio demo pages, the product page has a simple design with a few core elements such as product images, name, price, attributes/ options, SKU, description, and add-to-cart button.

  • Magento 2 PWA Theme (by Tigren):

In the product of TigrenPWA theme, there are more added-value components, for example, wishlist, compare, email to a friend, social sharing, product details, and product reviews.

More importantly, there is a Related product block (“More Like This” to encourage customers to buy more and more.

5/ Shopping Cart Page

magento 2 pwa studio
  • Magento 2 PWA Studio (Venia demo):

Venia theme’s cart page includes item list, options to move items to favorites/ edit/ remove from cart, shipping cost estimation, coupon code, gift card application, and the order total.

Nonetheless, the functions of “move to favorites” and “edit item” are not working properly.

  • Magento 2 PWA Theme (by Tigren):

In essence, TigrenPWA’s cart page has similar elements to that of Venia PWA. However, we provide a more eye-catching design, and all of the built-in functions do work.

Moreover, we put a related product block on this page, which can be used for upselling or cross-selling.

6/ Checkout Page

pwa studio magento
  • Magento 2 PWA Studio (Venia demo):

The checkout page of the PWA Studio demo is easy to follow and fast to complete. Two options are: sign in for express checkout or checkout as a guest (and create a new account quickly after checkout).

  • Magento 2 PWA Theme (by Tigren):

Since Venia’s checkout flow is already good, we don’t change anything but upgrading the design.

7/ Customer Account

My Account (Tigren Only):

my account

Account Information:

account information

Order History:

order history

Address Book:

address book

My Wishlist (Tigren Only):

my wishlist
  • Magento 2 PWA Studio (Venia demo):

Customers will usually manage all of their private information and orders on one page on Magento websites. More specifically, on a regular My Account page, there are different sections: My Account, Account Information, My Orders, My Downloadable Products, Address Book, and My Wish List.

However, PWA Studio split these sections into different desolate pages with little information on each page for unknown reasons.

Not yet, there is no My Account page, which led to confusion for many of us.

  • Magento 2 PWA Theme (by Tigren):

There is a big difference between the Magento PWA Studio Venia theme and TigrenPWA theme when it comes to customer account pages.

We did not divide the My Account into smaller pages but providing a complete My Account page as usual.

The users can easily update their account information, view history orders, check subscription options, change addresses… in different tabs of a single page.

8/ Search Page

Search Bar:

magento pwa studio setup

Search Result Page:

magento pwa studio theme

Search No Result Page:

pwa studio magento 2
  • Magento 2 PWA Studio (Venia demo):

Similar to the category page in the Venia demo, there is no filter column on the sidebar of the search page. And the search no result page appears with a lot of white space.

  • Magento 2 PWA Theme (by Tigren):

In the search result page of the TigrenPWA theme, there is a fixed navigation and filter column so the customers can filter the search results and quickly find out what they want.

Besides, the no result page also is designed with carefulness. It shows users a search bar, encouraging them to try again.

9/ Other Pages (Tigren Only)

Advanced Search Page:

Advanced Search

Orders & Returns Page:

Orders and Returns

The Advanced Search page helps visitors look for a certain product throughout the site in no time.

Meanwhile, the Orders & Returns Page allows guests to check the status of their orders, print invoices, and track shipments by providing an accurate Order ID, Billing Last Name, and Email Address/ ZIP Code.

It’s a pity that both of these two sites are removed in the Magento PWA Studio demo.

In the TigrenPWA theme, we re-created the Advanced Search and the Orders & Returns pages to maintain their benefits for Magento stores after being upgraded to Progressive Web Apps.

Final Words

To sum up, Magento 2 PWA theme by Tigren can outweigh Magento 2 PWA Studio demo (Venia) in most aspects, from the design to functionality.

Mass customization is compulsory if you want to use the Venia theme, especially for the desktop view. Conversely, Tigren’s Magento 2 PWA theme is a comprehensive solution to convert your website to a PWA.

Besides the features that we mentioned in the post, there are a lot more advanced ones that you can find here.

Last but not least, Progressive Web App is a breakthrough; the sooner you make it yours, the better.

1 Star2 Stars3 Stars4 Stars5 Stars (35 votes, average: 5.00 out of 5)
Loading...

Related Posts:

5 Common Misconceptions About Magento PWA

Successful Examples of Progressive Web Apps (PWAs)

Why We Love Progressive Web App For Magento (And You Should, Too!)

Magento Progressive Web App For Online Businesses: Yes or No?

Magento 2 Progressive Web Apps: Do Advantages Outweigh Disadvantages?

What Is The Role Of Progressive Web Application In Improving Your SEO?

April LeeMagento 2 PWA Studio Demo (Venia) Vs. TigrenPWA Theme

Leave a Reply

Your email address will not be published. Required fields are marked *