Rua Collection

RUA COLLECTION - HEADER REDESIGN - VERSION 7 (8 Oct 2026) Theme: Copy of Rua Collection 1.4. Works in EN / SV / ES (labels come from your menu and its translations; the code only styles them). Replaces v2-v6 - use this file only. CURRENT STATE (8 Oct): main menu order is Home, Jewellery, Women, Men, Edits, Contact Us, About Us, Policies (changed live by Claude 8 Oct). Menu block: Media type = Collection images, Accordion ON, Expand first group ON, Dividers ON. NEW IN V7 (phone menu only): - WOMEN now opens by itself too, as well as JEWELLERY, as soon as the phone menu is opened. Shoppers can still tap either one to close it. (Small script at the end of the code. It finds Women by its Dresses link, so it works in English, Swedish and Spanish.) Everything else is the same as v6. Logo, search and the right side (EUR / account / bag) stay exactly as they are. Header layout settings are NOT touched. NEW IN V5: - Desktop dropdown is now a SMALL white box that opens directly under the word you hover (not a full-width white panel). Text list only, no photos on desktop. - All 8 menu words fit on one row, so "More" is gone and "Policies" shows. Words are a touch smaller and closer together to make room. - Phone menu unchanged from v4 (big text, photos, Jewellery first). - The Custom Liquid stays ABOVE the Header (fixes the banner). Order: PART 1 (paste code), PART 2 (menu block settings), PART 3 (menu order), PART 4 (checks). Undo is at the very bottom. ====================================================================== PART 1 - THE CUSTOM LIQUID ====================================================================== 1. Online Store > Themes > Customize. 2. Left panel: the Custom Liquid must sit BETWEEN "Announcement bar" and "Header" (it already does if you moved it for v4). Never below the Header - the theme then shortens the banner. 3. Click it, select all the old code in "Liquid code", delete it, then paste everything between START and END. Save. ----- START - copy from the next line ----- ----- END - stop copying at the line above ----- ====================================================================== PART 2 - MENU BLOCK SETTINGS (for the phone photos) ====================================================================== Theme editor > Header > click the "Menu" block (inside Header): 1. Media type (under Submenu feature): Collection images (photos show in the phone menu; the code keeps desktop text-only) 2. Accordion: ON and Expand first group: ON (opens Jewellery; the code opens Women) 3. Dividers: ON Save. Do NOT change anything in the "Header" section itself. ====================================================================== PART 3 - MENU ORDER (Online Store > Navigation > Main menu) ====================================================================== Home and Policies STAY (all 8 words fit on one row). 1. No reordering needed - leave the order as it is. The code puts Jewellery above Women on the phone only. (If you already dragged Jewellery up for v5, that's fine too.) 2. Recommended, your call: under Women delete Necklaces, Rings, Earrings, Bracelets (they are already under Jewellery) - makes the Women box and the phone photo grid shorter. 3. Recommended, your call: under Edits delete Summer Collection, Date Night, Weekend Away. Save. ====================================================================== PART 4 - CHECKS ====================================================================== 1. Home, desktop: banner full height (as before). All 8 words on one row, "Policies" at the end, no "More". Hover WOMEN - a small white box opens right under the word with the list; move the mouse down into it - it stays open; move away - it closes. Same for MEN, JEWELLERY, EDITS, POLICIES. 2. Home, phone (F12, Ctrl+Shift+M, reload): open the menu - Home small at the top, then JEWELLERY, WOMEN, MEN, EDITS in bold, then Contact Us / About Us small, POLICIES bold. Tap JEWELLERY - 4 square photos; tap again - closes. Same for WOMEN. 3. Product page, phone: header same height, Add to Cart not lower. 4. /sv-se and /es-es on desktop: Spanish words are longer, so on a smaller laptop screen "Mas" may still appear. Tell me if it does on your screen and I'll tighten it. ====================================================================== NOTE (speed) ====================================================================== With Media type = Collection images, the theme quietly loads the menu photos in the background after the page has finished loading. It does not slow the first view of the page. Photos are served resized by Shopify. ====================================================================== UNDO ====================================================================== - Delete the Custom Liquid section from the header group = all styling gone (old full-width dropdown back, banner normal). - Menu block > Media type back to "None" = no photos. - Menu block > Accordion OFF, Dividers OFF = old phone menu.