Latest news

Magento 2 PWA Studio Demo (Venia) Vs. Magento 2 PWA Theme by Tigren

No comments

Progressive Web App has gained popularity and becomes a hot trend for all websites around the world, and Magento e-commerce websites are not exceptions. To encourage more stores to catch up with the trend, Magento released Magento 2 PWA Studio tools for PWA development. However, it will take a lot of time and effort to build a PWA using those basic tools. That’s why Tigren introduced the advanced Magento 2 PWA theme, a perfect solution for who want to launch their PWAs quickly.

  • Magento 2 PWA Studio (Venia demo): This is a vital set of tools to facilitate the process of PWA storefront development and maintenance for Magento 2 websites. To help developers and store owners to imagine the results after creating a PWA with those tools, Magento offers the Venia PWA demo.
  • Magento 2 PWA Theme (by Tigren): This product is developed from 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 base of Magento 2 PWA Studio, Tigren’s PWA theme inherits all essential features but getting a lot of improvements and enhancements.

Up to now, Tigren is the leading service provider when it comes to Magento 2 PWA integration. By using our ready-made Magento 2 PWA theme, you can cut down the time of converting your website to PWA significantly, in comparison to developing PWA with Magento PWA Studio from scratch. More importantly, you will get an excellent version of PWA  that is optimized for both desktop and mobile devices, with all of its powerful features.

In this post, we will show you how Tigren’s PWA theme is better than Venia theme as well as other available PWA integration solutions on the market!

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.: home page, category page, product page, shopping cart page, checkout page…), similar to orders on the video, to make the comparison.

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 can be added to cart/ wishlist/ compare, and a footer.

On the desktop:

There is a huge difference between PWA Venia theme and Tigren’s PWA theme when being shown on the desktop. It’s clear that the Magento 2 PWA Studio demo is only optimized for 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 separate needs and experiences of desktop and mobile users.

pwa for magento 2 demoWhen being accessed from the desktop, PWA storefront of Tigren looks like a normal Magento website, but on mobile devices, the available options will be grouped and reduced to deliver 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 products on the selected category. 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) so the users can easily 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 are all fundamental product information like in Venia demo, plus 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 Magento 2 Progressive Web App provided by Tigren, there are extra sections (reviews and related products) compared to Venia PWA theme in order 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 3 options for users to add the item to favorites, edit the item, and remove item. Besides, the users can review information of added items on the cart (product name, quantity, price, cart subtotal).
  • Magento 2 PWA Theme (by Tigren): In spite of offering the similar elements on the shopping cart popup of 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 back. Finally, they must click on “Specify Shipping…” to select a preferred shipping method and click on “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 3 steps in the checkout, the flow in Magento 2 PWA theme of Tigren is more convenient for users. Instead of multiple clicks to turn back and continue, the users just need to click on the “Next” button to move to the following steps. As a result, it will save a lot of time from checkout and help to decrease the rate of cart abandonment.

On the desktop:

magento pwa demoUndoubtedly, checkout is the most pivotal phase in the purchasing process, which should be easy and fast. Unfortunately, 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 very 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 when it comes to customer account management. With very limited features (sign in/ out, view purchase history), Venia theme will not be able to make the users satisfied.

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.

Last but not least, it’s worth noting that we don’t sell the Magento 2 PWA theme separately but proving 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 (29 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. Magento 2 PWA Theme by Tigren

Leave a Reply

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