In today’s digital age, online stores are becoming increasingly popular, and with the rise of e-commerce, creating a seamless user experience has become crucial for the success of any business. One of the ways to enhance the user experience on your Shopify store is by incorporating animated effects in your drop-down menus.

An animated drop-down menu not only adds an element of interactivity to your website, but it also provides a more engaging way for users to navigate through your products or collections. In this era of short attention spans, a visually appealing and interactive menu can help grab and retain users’ attention, ultimately leading to increased sales and customer satisfaction.

In my previous tutorial with video I have shared “How to show Drop Down Menu on Hover Instead of Click – Shopify Debut Theme” and In this tutorial, I am going to show you “How to add animate effect in Shopify drop down menu“

Add an animate effect in Shopify drop-down menu

The very first step is to add a css class in the Shopify theme. From Shopify Dashboard, navigate to your Theme editor

Step 1: Access the theme editor

Step 2: Open  header.liquid file

Step 3: Open  header.liquid file and add dropdown-animate class in menu ul

Step 4: Open  css.liquid file and add below css code

/******** Animate Menu **********/


.site-nav--has-dropdown:hover .site-nav__dropdown {
   display: block;
}

.site-nav__dropdown { top: 100%; }

.site-nav > li > .site-nav__dropdown {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: block;
    transform: scale(0);
    transition: ease-out 0.3s;
}
.site-nav--has-dropdown:hover .site-nav__dropdown {
    transform: scale(1);
    background: var(--predictive-search-focus);
    border: var(--color-overlay-text-focus);
    border-radius: 5px;
}
.dropdown-animate
{
	border:none;
	display: block;
  	transform: scale(1)!important;
	height: 0px;
	overflow: hidden;
	padding: 0px;
	top: 180px;
	transition: all .3s;
}
.site-nav--has-dropdown:hover .dropdown-animate
{
	display: block;
	top: 100%;
	height: inherit;
}