tuanphan

You can follow this

You can use this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('a.header-nav-folder-title[href="/our-products"]').click(function() { var link = $(this).text(), href = "/our-products"; window.location.href=href; }); }); </script>

You added it to URL Mapping or Code Injection?

You can follow these steps to achieve this feature (1) You add a Text Block with 3 text, then hyperlink them, use this format. And make sure "Open in New Tab" is disabled #Engineering #Environmental #Industrial-services (2) Add 3 Gallery Sections under Text Block When you add a Section > Click Images > Choose section with (i) icon, it is Gallery Section Hover on Gallery > Click Edit Section Choose Grid Simple, adjust number of items/row and enable Gallery Caption Next, click Edit Gallery and add some text for images and add some text/url (3) Install this free tool to find ID of 3 Galleries you added https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff In my example, we will have Engineering Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd27"] Environmental Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd29"] Industrial Services Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd2a"] (4) Use this code to Individual Page Header Code Injection (Page where you added 3 Galleries) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // Show initial: Engineering $('section[data-section-id="661f1cfbe479ea22f816bd27"]').addClass('show'); // Engineering $('a[href="#Engineering"]').click(function(){ $('section[data-section-id="661f1cfbe479ea22f816bd27"]').addClass("show"); $('section:not([data-section-id="661f1cfbe479ea22f816bd27"])').removeClass('show'); } ); // Environmental $('a[href="#Environmental"]').click(function(){ $('section[data-section-id="661f1cfbe479ea22f816bd29"]').addClass("show"); $('section:not([data-section-id="661f1cfbe479ea22f816bd29"])').removeClass('show'); } ); // Industrial Services $('a[href="#Industrial-services"]').click(function(){ $('section[data-section-id="661f1cfbe479ea22f816bd2a"]').addClass("show"); $('section:not([data-section-id="661f1cfbe479ea22f816bd2a"])').removeClass('show'); } ); }); </script> <style> section[data-section-id="661f1cfbe479ea22f816bd27"], section[data-section-id="661f1cfbe479ea22f816bd29"], section[data-section-id="661f1cfbe479ea22f816bd2a"]{ display: none; transition: all 0.5s; } section.show { display: block !important; transition: all 0.5s; } </style> <style> figure[class*="gallery"]:not(.gallery-slideshow-item) { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ div[class*="-item-wrapper"]:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } </style> (5) See a demo https://tuanphan-demo01.squarespace.com/ctext-show-gallery-section-fr?noredirect pass: abc If you have problems when adding the code, just comment below

Do you use Personal or Business Plan? I can test new code easier

What is problem? Screenshot looks fine

When you add a section > Choose Classic Next, add an Image Block then choose Inline Next, choose this option

You can use a CSS code like this .pdp-layout .pdp-details .pdp-details-title { font-family: 'omnes-pro' !important; }

To apply to buttons belong a specific section, use this code [enter your data-section-id] { a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:after { position: absolute; content: ""; width: 100%; height: 0; bottom: 0; left: 0; z-index: -1; background: #000; transition: all 0.3s ease; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element { transition: all 0.3s ease; position: relative; display: flex; background-color: transparent !important; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover { color: #fff; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover:after { top: 0; height: 100%; } } Use this free tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

You can consider changing mobile overlay background color, or change logo to another logo when burger menu is open To change logo, you can use this code to Website > Website Tools > Custom CSS. Replace Pixabay image with your new logo url body.header--menu-open header#header img { content: url(https://cdn.pixabay.com/photo/2016/10/26/22/02/dog-1772759_1280.jpg); }

Can you share link to page where you added code on your site?

You can use this code to Website > Website Tools > Custom CSS fieldset#radio-702f2676-2a25-4355-8e28-1f26b5271a1b { display: grid; grid-template-columns: repeat(2,1fr); }

I just checked and it looks like there is remove SS option to make more text You can consider create custom quick view lightbox, but this will take more time to add content to quick view lightbox (but if you need this, let me know, I will give some hint)

It's quite complicated so I haven't had time to check it yet. But here I shared some custom layout, You can based on that to try to customize the items

The page doesn't work. Can you check it again?

You can remove code you used, then we can give new code to make list block clickable + exclude card on another page. Your current code is encrypted so there is no way to insert an exclude id into your code

You can use this code to Custom CSS box [data-section-id="642ed5df644676989d3164f4"]:after { content: "Simon Mannion"; position: absolute; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: -1; }

Use this code under @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1711831694026_15313 .native-video-player.video-player { padding-top: 90% !important; } }

Can you share link to a product/ we an try some CSS code

Have you adjusted all yet?

You mean add it above scrolling block, or make countdown to scroll?

When you use a link something like this, it will automatically enter password (just an example link) https://tuanphan3.squarespace.com/lottie-loading-one?noredirect&password=abc

Use this CSS code under [data-filter="lokation"].sqs-block:before { content: "Lokation"; display: block; font-size: 17px; margin-top: 20px; font-weight: bold; }

The page doesnt exist now. Can you check it again?

You can use this CSS code img.grid-item-image.grid-image-cover { opacity: 1 !important; } img.grid-item-image.grid-item-additional-image { opacity: 0 !important; } img.grid-item-image.grid-image-hover { opacity: 0 !important; }