Submenu Organization (Dawn Theme)

Store Design
1

Hi!

I would like to organize my products submenu.

Screenshot 2024-08-05 at 4.26.07 PM.png
Screenshot 2024-08-05 at 4.26.07 PM.png2714×884 150 KB

I want everything to list vertically and also look like the following:

Shop All Apparel & Accessories Sakura Collection
Best Sellers Car Accessories Holiday Themed

Clearance Consultation KANAKO
Gift Card Electronic
Keychains & Car Ornaments

Kitchen & Dining
Office & Stationary

Pet

So the explanation for the categorization is:

Left column: Basic Quick Links

Middle column: Products Categories in alphabetical order

Right column: Themed Collection

Thank you so much in advance for your help.

1 Like
2

Hi @ayoume88

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.mega-menu__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    text-align: center;
}

#MegaMenu-Content-1 > ul > li:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

#MegaMenu-Content-1 > ul > li:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

#MegaMenu-Content-1 > ul > li:nth-child(15) {
    grid-column: 1;
    grid-row: 4;
}

#MegaMenu-Content-1 > ul > li:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

#MegaMenu-Content-1 > ul > li:nth-child(6) {
    grid-column: 2;
    grid-row: 1;
}

#MegaMenu-Content-1 > ul > li:nth-child(11) {
    grid-column: 2;
    grid-row: 2;
}

#MegaMenu-Content-1 > ul > li:nth-child(12) {
    grid-column: 2;
    grid-row: 3;
}

#MegaMenu-Content-1 > ul > li:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
}

#MegaMenu-Content-1 > ul > li:nth-child(5) {
    grid-column: 2;
    grid-row: 5;
}

#MegaMenu-Content-1 > ul > li:nth-child(8) {
    grid-column: 2;
    grid-row: 6;
}

#MegaMenu-Content-1 > ul > li:nth-child(10) {
    grid-column: 2;
    grid-row: 7;
}

#MegaMenu-Content-1 > ul > li:nth-child(7) {
    grid-column: 2;
    grid-row: 8;
}

#MegaMenu-Content-1 > ul > li:nth-child(13) {
    grid-column: 3;
    grid-row: 3;
}

And Save.

Result:

Made4uoRibe_0-1722895775621.png
Made4uoRibe_0-1722895775621.png1632×581 27.2 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thank you! But it doesn’t look like yours. I added the code in base.css and at the very bottom.

Mine’s pushed to the left and kinda everywhere.

Please see the image attached.

Screenshot 2024-08-05 at 8.14.21 PM.png
Screenshot 2024-08-05 at 8.14.21 PM.png2680×1174 145 KB

4

Check this one again.

Same Instruction.

.mega-menu__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr!important;
    text-align: center !important;
}

#MegaMenu-Content-1 > ul > li:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

#MegaMenu-Content-1 > ul > li:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

#MegaMenu-Content-1 > ul > li:nth-child(15) {
    grid-column: 1;
    grid-row: 4;
}

#MegaMenu-Content-1 > ul > li:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

#MegaMenu-Content-1 > ul > li:nth-child(6) {
    grid-column: 2;
    grid-row: 1;
}

#MegaMenu-Content-1 > ul > li:nth-child(11) {
    grid-column: 2;
    grid-row: 2;
}

#MegaMenu-Content-1 > ul > li:nth-child(12) {
    grid-column: 2;
    grid-row: 3;
}

#MegaMenu-Content-1 > ul > li:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
}

#MegaMenu-Content-1 > ul > li:nth-child(5) {
    grid-column: 2;
    grid-row: 5;
}

#MegaMenu-Content-1 > ul > li:nth-child(8) {
    grid-column: 2;
    grid-row: 6;
}

#MegaMenu-Content-1 > ul > li:nth-child(10) {
    grid-column: 2;
    grid-row: 7;
}

#MegaMenu-Content-1 > ul > li:nth-child(7) {
    grid-column: 2;
    grid-row: 8;
}

#MegaMenu-Content-1 > ul > li:nth-child(13) {
    grid-column: 3;
    grid-row: 3;
}
#MegaMenu-Content-1 > ul > li:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}
#MegaMenu-Content-1 > ul > li:nth-child(3) {
    grid-column: 2;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

To organize your product submenu with the desired vertical listing and categorization, you’ll need to structure the HTML and CSS accordingly. Here’s a general approach you can use: I also used the same approach for my kitchen remodeling project. Anyhow, here is the code, you can use.

Sakura Collection

.submenu-container {
display: flex;
justify-content: space-between;
width: 100%;
padding: 20px;
}

.submenu-column {
width: 30%;
}

.submenu-column h3 {
font-size: 18px;
margin-bottom: 10px;
}

.submenu-column ul {
list-style-type: none;
padding-left: 0;
}

.submenu-column ul li {
margin-bottom: 8px;
}

.submenu-column ul li a {
text-decoration: none;
color: #333;
}

.submenu-column ul li a:hover {
text-decoration: underline;
}