How to make a collection preview and not a new page

Store Design
, , ,
1

Hello,
I want this preview when you hover “collection” and not a new page like I have now! There is a example of what I want:
I use dawn theme. My store is womber.fr and password is PROPAGANDAAA

PAUL8_0-1728991548324.png
PAUL8_0-1728991548324.png1873×925 372 KB

Can you help me?
Thanks,
regards

2

Hi @PAUL8 ,

You mean you want to show it likes this theme https://themes.shopify.com/themes/impulse/styles/modern/preview?

3

Like this website: https://nude-project.com

feature only for desktop

4

Hi @PAUL8 ,

May I suggest to update code these steps:

  1. Get code here https://github.com/eboost10/2640367/blob/main/custom/megamenu.liquid

  2. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Snippets/header-dropdown-menu.liquid

EBOOST_0-1729008184701.png
EBOOST_0-1729008184701.png1302×678 38 KB

  1. Replace code in this file with code that you get at step 1
5

It’s working, but how can I delete the line below “Acceuil” when I’m not hovering it
And how can I choose which collection I want to put in the preview ?
You can see what I’m saying here: https://jd2tsoprwmfaoukh-70360858889.shopifypreview.com

PAUL8_0-1729013112164.png
PAUL8_0-1729013112164.png1861×813 271 KB

6

Hi,

  • To remove underline you can go to Assets/base.css add code below to end of file
header .header__active-menu-item {
text-underline-offset: 0;
 text-decoration: none;
}
  • To you can choose which collection I want to put in the preview ->Could you share code of Sections/header.liquid? I will help to add a settings in customize to you can do it. It only show 5 first collections in list collections now.