A Shopify store owner wants to modify dropdown menus by changing their background color (currently blending with the page) and adding product images next to each menu item.
Solutions Provided:
base.css targeting .header .js details > .header__submenu with a custom hex color valueImplementation Details:
header.liquid in the sections folderCurrent Status:
The original poster confirmed the desktop version works perfectly. However, a mobile layout issue was mentioned but appears resolved based on the final thank-you message. Two other users later requested similar assistance for their own stores.
Hello!
I just want to change the background colour of my two drop down menus “Shop” and “Sustainable product shout outs” (currently the colour is the same as the page and it blends in too much.
I also want to see if I can add an image of each product in the drop down menu like the example below.
Website is www.houseoftierney.com.au
Any advice would be much appreciated!
Hi @ktierney , This is Richard from PageFly - Landing page builder.
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
I hope it would help you Best regards,
Richard | PageFly
Hi Ktierney,
base.css :.header .js details > .header__submenu {
background-color: #ffffff;
}
You can change the color hex code to color you want
Find where the childlink stay in the code and place this piece of code under the childlink.title:
{% if childlink.type == “product_link” %}
{{ childlink.object.featured_image | image_url: width: 150 | image_tag:
class: ‘link-image’,
alt: childlink.object.featured_image.alt,
preload: true
}}
{% endif %}
The screenshot of my demo store using Dawn theme:
If you still need help, feel free to contact me.
Hi @ktierney
Go to the online store
Edit the code base.css file below paste the code
ul#HeaderMenu-MenuList-6 {
background: #fff;
}
Hello! That demo is exactly what I want with the pictures next to the item.
Sorry I don’t really understand your instructions though.
When you say “Find where the childlink stay in the code” what does this mean? I tried Ctrl “childlink” in the code but nothing came up.
Hi,
Your theme might be different. But the logic is the same. Go to sections > header.liquid > find where in the code that render the dropdown child-link (the name can be different to your theme) and apply my code above.
If you still need help, feel free to contact me.
Hello,
this worked to change the desktop screen website but it’s still the same on the mobile layout. How would I fix this?
I still need help lol
Will email you
Thank you so much for your help! It’s perfect now!
Hello Kat! I am trying to apply this to my website but haven’t been able, do you think you can help me please?
Hello I am still struggling to get this code to change the background color of the drop down menu, please can you assist me?
