Shopify Tutorial – Creating Mega Dropdown Menu

Shopify Tutorial – Creating Mega Dropdown Menu


There are many ways to create a mega dropdown menu in Shopify but this is just one way to do it with a little bit of code on most themes.

If you’re using one of the free Shopify themes, it will probably work fine. We’re using the Debut theme for this demo.

1. Go to Themes. On your theme, click on “Action” and then “Edit Code”

2. Go to “Assets” folder, and find one of the .css or .scss files, which is usually named “theme.scss.liquid”. Depending on your theme, it may also be something like “style.scss.liquid”.

3. Click on the file, and scroll all the way down to the bottom of it. Copy and paste the following code.

/*================ Mega Dropdown Menu ================*/
position: static;

position: relative;

.site-nav–active-dropdown .site-nav__dropdown
width: 100%;
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;

The tutorial in text

Open your own online Shopify store:

Leave a Reply

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