How to show Toast message at Top In Venia ?

How to show Toast message at Top In Magento PWA?


PWA is a popular e-commerce platform that recently gained a significant user base. The platform offers several features to enhance the user experience, and one such feature is the toast message. Toast messages are small pop-up notifications that provide essential information to the user, and in this post, we will focus on how to show the toast message at the top in PWA store using CSS. Follow these simple steps to improve your user experience on PWA store.

Quick Steps to Position Toast Messages at the Top in PWA store

Elevate your Toast Messages in Venia with these Simple Steps

Top Placement for Toast Messages in PWA store: A Simple Guide

Step 1: Mapping the toastContainer.module.css file first

Open the /srcplugin/mapping.js of your PWA root directory.

Add the following code

Modify module.exports = componentOverrideMapping = to include the overriding of toastConatiner.module.css

Step 1: Mapping the toastContainer.module.css file first

Step 2: Create toastContainer.module.css in lib/componenets of your PWA root directory.

Add the following code:

.root {
composes: top-20 from global;
composes: fixed from global;
composes: gap-y-xs from global;
composes: grid from global;
composes: mb-xs from global;
composes: min-w-full from global;
composes: z-toast from global;

composes: lg_min-w-auto from global;
composes: lg_right-md from global;

Step 3: Save changes

Save your changes and in your PWA root terminal fire the yarn build command to see the changes.

Step 4: Check the toast will be at the top of the screen

Check that the toast notification appears at the top of the screen after recompiling and reloading your PWA application. Even when scrolling, it should appear fixed in place. Following these instructions, you may use PWA to display toast messages at the top of the screen. Toast messages give customers a non-intrusive way to receive crucial information, enhancing their overall experience. Consider properly implementing this strategy in your PWA projects to convey important messages and alerts.

Step 4: Check the toast will be at the top of the screen


Do you wish to enhance your user experience? Use these CSS tricks to add toast messages to the top of your PWA store and boost user engagement immediately! Elightwalk is experienced in developing Magento PWA store extensions, with many years of experience.

Our Magento development team is experts in providing excellent experience in PWA development. We provide top-notch solutions in e-commerce development. Feel free to Contact us with any inquiries or to discuss your specific project requirements.

Contact us:+91 8128405131

Email send us at hello@elightwalk.com

Jayram Prajapati
Full Stack Developer

Jayram Prajapati brings expertise and innovation to every project he takes on. His collaborative communication style, coupled with a receptiveness to new ideas, consistently leads to successful project outcomes.

Most Visited Blog

How To Create an Extension In PWA studio(Venia)?

Discover the essentials of creating extensions in Venia with our guide. Enhance Magento PWA storefront by developing and implementing extensions that provide capabilities and a personalized user experience.

Read More
How to use Routing in Venia?

Unlock the potential of routing in Venia with our concise guide. Learn how to utilize routing to customize the navigation and flow of your Magento PWA storefront for a better user experience.

Read More
Custom Route in Venia: Enhancing Your Storefront

Discover the potential of unique routes in Venia for a personalized retail experience. Improve Magento PWA capabilities by following our simple approach to customizing routes for maximum performance and user engagement.

Read More