Hello @LadyJewellery ,
Welcome to Shopify!
→ Making the header menu open on hover (instead of click)
The Trade theme uses <details> and <summary> for dropdown menus, which normally open on click. To make them open smoothly on hover, we added a small CSS animation and a bit of JavaScript.
Step 1 – Add this CSS
Go to:
Online Store → Themes → Edit code → assets → base.css
Add this at the bottom:
.header__submenu {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.header__inline-menu details[open] > .header__submenu {
opacity: 1;
transform: translateY(0);
}
This adds a smooth fade + slight slide effect.
Step 2 – Add this JavaScript
Go to:
Online Store → Themes → Edit code → layout → theme.liquid
Scroll to the bottom and paste this just before </body>:
<script>
document.querySelectorAll('.header__inline-menu details').forEach((menu) => {
const summary = menu.querySelector('summary');
let timeout;
summary.addEventListener('click', (e) => {
e.preventDefault();
});
menu.addEventListener('mouseenter', () => {
clearTimeout(timeout);
menu.setAttribute('open', '');
});
menu.addEventListener('mouseleave', () => {
timeout = setTimeout(() => {
menu.removeAttribute('open');
}, 200);
});
});
</script>
Now the dropdown opens on hover and closes smoothly when the mouse leaves.
→ Changing long variant list into dropdown menus (Size & Colour)
If your variants (like ring sizes and colours) are showing as a long list, you can switch them to dropdowns from the theme editor.
Go to:
Online Store → Themes → Edit Theme
Then at the top center dropdown, select:
Products → Default product
On the left panel:
-
Click Product information
-
Click Variant picker
-
Under “Style”, choose Dropdown instead of Pills or Buttons
-
Save
This will display:
-
Size → Dropdown
-
Colour → Dropdown
Much cleaner, especially for jewellery products.
Let us know if you need further assistance!
