Progressive Web App has gained popularity and becomes a hot trend worldwide, and e-commerce websites are no exception. 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 – a Freemium Magento 2 PWA theme – a perfect solution for those who want to launch their PWAs quickly.
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!
Notes: The images in this blog post demonstrate the old version of TigrenPWA. Our themes are now upgraded in terms of both design (3 storefront designs) and functionality (additional built-in features and add-ons).
Contents
Comparing Magento 2 PWA Studio Demo (Venia) With Tigren’s Magento 2 PWA Theme
- 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.
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.
In short, all of the Magento core features supported by PWA Studio are also available in TigrenPWA theme. At the same time, we try to add and improve many functions including:
| Enhanced customer sign up page My account navigation Enhanced account dashboard Enhanced account profile page Enhanced address book Enhanced order history & order details Enhanced wishlist Product comparison Email to friend | Category grid/list mode Category display type (static block/product list) Improved special price display Tax display with associated price Detailed summaries in cart & checkout pages Password strength bar Print order Print comparison list Improved product image zoom Product customizable options Related products Merge and minify CSS Custom script from backend configuration Logo configuration | Customizable footer from a CMS block Editable promotion message from a CMS block Improved form validations Category description display Reorder Up-sell products Cross-sell products SEO improvements URL Rewrites Product add-to-cart from search result pop-up Cart clearing option on the cart page Preloaded fonts More supported image types and fonts Lazy load page builder components |
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 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:
Category Filter:
List Mode (Tigren Only):
- 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 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 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 retains 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:
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 to the TigrenPWA theme.
When the users hoving the 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 (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 (Venia demo):
Venia theme’s cart page includes an 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 work.
Moreover, we put a related product block on this page, which can be used for upselling or cross-selling.
6/ Checkout Page
- 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 upgrade the design.
7/ Customer Account
My Account (Tigren Only):
Account Information:
Order History:
Address Book:
My Wishlist (Tigren Only):
- 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 provided a complete My Account page as usual.
The users can easily update their account information, view history orders, check subscription options, change addresses, etc. in different tabs on a single page.
8/ Search Page
Search Bar:
Search Result Page:
Search No Result Page:
- 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:
Orders & Returns Page:
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 from 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 themes 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.
Last but not least, Progressive Web App is a breakthrough; the sooner you make it yours, the better.
Read more:
