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): This theme is developed based on Magento 2 PWA Studio’s tools, ReactJS and GraphQL. It comprises a well-design PWA storefront and API 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 optimal for both desktop and mobile devices.

This post will show you how Tigren’s PWA theme is better than the Venia theme and other!

Comparing Magento 2 PWA Studio Demo (Venia) To Magento 2 PWA Theme by Tigren

We will go through each page on the PWA demos (e.g., the home page, category page, product page, shopping cart page, checkout page), similar to the video’s orders, to compare.

1/ Homepage

On mobile devices:

magento pwa studio

  • Magento 2 PWA Studio (Venia demo): There is a header (including hamburger menu, favicon, search & cart icon), a list of several categories for the users to choose from, and a footer.
  • Magento 2 PWA Theme (by Tigren): The header consists of email, hamburger menu, brand logo, search, & cart icon, customer quick access. The main content includes a banner slider, a list of products that we can add to cart/ wishlist/ compare, and a footer.

On the desktop:

There is a considerable difference between the PWA Venia theme and Tigren’s PWA theme on the desktop. It’s clear that the Magento 2 PWA Studio demo is only optimal on mobile devices; its display on both desktop and mobile devices are very similar and basic. On the contrary, Magento 2 PWA theme by Tigren has different views to satisfy desktop and mobile users’ particular needs and experiences.

pwa for magento 2 demoWhen accessed from the desktop, the PWA storefront of Tigren looks like a regular Magento website. However, on mobile devices, the available options will be grouped and reduced to deliver a lively app-like experience.

2/ Category Page

On mobile devices:

magento 2 pwa studio

  • Magento 2 PWA Studio (Venia demo): There is a simple grid list of the selected category products. Besides, there is a pager on the bottom of the page.
  • Magento 2 PWA Theme (by Tigren): There is a breadcrumb, category banner, product sorting (by position/price/name), optional display mode (grid/list), product filter, pager, optional number of items per page, lists of products on wishlist/ comparison list, and the product list that can be added to cart/ wishlist/ compare.

On the desktop:

magento 2 pwa veniaLayered navigation is one of the most crucial features in a Magento e-commerce website, but it is removed in the Magento 2 PWA Studio demo. Realizing the importance of this feature, we added it on all categories pages (on both desktop and mobile devices) to quickly filter products as they want.

3/ Product Page

On mobile devices:

magento 2 pwa studio demo

  • Magento 2 PWA Studio (Venia demo): There are the product name, price, images, attributes, description, SKU, and add-to-cart ability.
  • Magento 2 PWA Theme (by Tigren): There is all basic product information like in Venia demo, stock status, taxes, add-to-wishlist/ add-to-compare/ email abilities, product details/ more information/ review, and a related product block.

On the desktop:

magento pwa venia demoOn the TigrenPWA, there are extra sections (reviews and related products) compared to the Venia PWA theme to help the stores boost sales.

4/ Shopping Cart 

On mobile devices:

magento 2.3 pwa studio

  • Magento 2 PWA Studio (Venia demo): On the shopping cart popup, there are three options for users to add the item to favorites, edit the item, and remove the item. The users can also review information of added items on the cart (product name, quantity, price, cart subtotal).
  • Magento 2 PWA Theme (by Tigren): Despite offering similar elements on the shopping cart popup of the Venia theme, it’s much easier for the users to update and remove the selected items on the cart.

On the desktop:

how to use magento 2 pwa studioThe users will go to the new page when editing the cart (like the default Magento website flow), while on the Venia theme, only the content on the shopping cart changes.

5/ Checkout Page

On mobile devices:

magento 2.3 pwa studio setup

  • Magento 2 PWA Studio (Venia demo): After clicking on the “Checkout” button on the shopping cart popup, it will show a list of the required information to complete checkout. First, the users must select “Add Shipping Inform…”, enter all required fields, and then click on “Use that address” to turn back. Next, they have to click on “Add Billing Informat…” to add billing address and click on “Use card” to turn around. Finally, they must click on “Specify Shipping…” to select a preferred shipping method and click on the “Use method” to turn back. Once all information is fulfilled, the users can click on the “Confirm Order” button to complete their checkout process.
  • Magento 2 PWA Theme (by Tigren): Although there are still three steps in the checkout, the flow in the Magento 2 PWA theme of Tigren is more convenient for users. Instead of multiple clicks to turn back and continue, the users need to click on the “Next” button to move to the following steps. As a result, it will save much time from checkout and decrease cart abandonment rates.

On the desktop:

magento pwa demoUndoubtedly, checkout is the most pivotal phase in the purchasing process, which should be easy and fast. Unfortunately, the Magento Venia demo that requires many repeated actions can’t meet these criteria. On the other hand, Tigren’s PWA checkout flow is smooth and intuitive, guiding the users step-by-step.

6/ Customer Account

On mobile devices:

magento 2 pwa demo

  • Magento 2 PWA Studio (Venia demo): After login, the users can only view their purchase history or… sign out.
  • Magento 2 PWA Theme (by Tigren): After login, the users can review their account information, edit their profile information (name, email, password), check order information (#, date, ship to, order total, status,…), manage their addresses, and view/ edit products on their wishlist (add notes, add to cart, change quantity).

On the desktop:
pwa demo for magento 2

Again, Tigren’s PWA theme defeated Magento 2 PWA Studio’s default theme regarding customer account management. With minimal features (sign in/ out, view purchase history), the Venia theme will not satisfy the users.

Final Words

To sum up, Magento 2 PWA theme by Tigren can outweigh Magento 2 PWA Studio demo (Venia) in all aspects, from the design to functionality. Since the Venia theme is only optimized to serve mobile users, you will have to make significant customizations to make it work on the desktop. Conversely, our Magento 2 PWA theme is a comprehensive solution to replace your current Magento frontend completely with different views optimized to each device.

Finally, it’s worth noting that we don’t sell the Magento 2 PWA theme separately but prove the PWA integration service with the theme implemented. Contact us now if you are interested in our service.

(info@tigren.com).

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