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 that is 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, 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 one hand, it is the most reliable PWA platform for Magento websites, and updated frequently with Magento versions.

On the other hand, PWA Studio is still on the development process. There are 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 both of its design and functionality.

Below is the function list of both PWA Studio and TigrenPWA so you can help a clearer view:

(coming soon)

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), 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 interface into their website.

In other words, merchants must understand that 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 by using PWA Studio tool, you should prepare for a heavy storefront customization since the available design seems to be useless.

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

– A currency switcher (USD/ EUR)

– A stick navigation (menu)

– A banner slider

– 3 small category banners

– 2 more banners with description

– A product slider

– A simple footer

Overall, this is not a ugly homepage design, but there is nothing that can impress the shoppers.

The biggest minus point in this page perhapsly 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 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 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 the product images, they also show the wishlist & comparison icons.

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

– 3 more banners with a different styles.

– A brand slider above the website footer.

– Newsletter subscription on the footer.

– A Top-up floating popup.

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

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

So, if you are seeking for a PWA theme that is more practical than of PWA Studio and can be applied without customization, 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 create a complete design for the homepage while the remaining pages are just poor-modified design 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 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 product 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 TigrenPWA theme and see what we have done to tackle all issues of Magento PWA Studio demo and bring a greater version to the table.

First, there is a category banner to tell 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, 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 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 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 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 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 pages in the Magento PWA Studio demo, 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 friend, social sharing, product details, and product reviews.

More importantly, there is a Related product block (“More Like This” with the purpose of encouraging 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, and 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 in 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 PWA Studio demo is easy to follow and fast to complete. There are two options: sign in for express checkout or checkout as guest (and create a new account quickly after checkout).

  • Magento 2 PWA Theme (by Tigren):

Since the 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):

As usual, customers will manage all of their private information and orders in one page in Magento websites. More specifically, in a regular My Account page, there are different sections namely My Account, Account Information, My Orders, My Downloadable Products, Address Book, and My Wish List.

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

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

  • Magento 2 PWA Theme (by Tigren):

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

We did not divide the My Account to 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 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 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 the visitors to 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 Magento PWA Studio demo.

In 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.

If you want to use the Venia theme, mass customization is compulsory, especially to 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, Progresive Web App is a breakthrough, the sooner you make it yours, the better.

1 Star2 Stars3 Stars4 Stars5 Stars (33 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 *