Search the Community

I am rebuilding a page and began by duplicating the existing page (https://memc.co.nz/our-doctors). I upgraded the page to Fluid Engine because it made the rebuild much easier - but it has broken the layout behaviour of the page header code, which toggles the visibility of the markdown block contents. In the old page, the vertical space between block rows was minimised as a default and expanded to accommodate the markdown content when it was toggled on. With Fluid Engine, the row space is stuck at the amount required for the markdown content even when it is toggled off. Anyone have an idea how to fix this? Here is the header code: <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script>

Hi I have a photography website and my main portfolio is a gallery (masonary) type, it already has a lightbox pop up when images are clicked revealing a little bit of info about the picture. Is there a way of adding a button to the lightbox view only so when pressed it can take you to that particular item in the shop? basically a button added to lightbox view only, thanks, Dan

Using code I found from @tuanphan, I got the logo to change color on a fixed, scroll-back header. Does anyone know how to change the color of the mobile burger menu on scroll? I have the mobile menu activated for desktop. https://helicon-oval-8wh9.squarespace.com/ PW: admin

Hi! I'm trying to embed Zola's RSVP function into my Squarespace wedding website so visitors don't need to navigate to an external page. I found a code someone else used but when I try to use it, I receive an error that says "zola.com refused to connect". Appreciate any help.

Hello, In an attempt to comply with the new UK laws with regards to BNPL I am trying to integrate Stripe Payment Method Messaging Elements into my site next to products but I am currently having no luck. I am using this method on stripes own page and have it set up in a test page on my site. I have used the custom code injection to insert <script src="https://js.stripe.com/v3/"></script> into the 'head of my HTML file' as request in the description. I have then used custom code blocks for stages 2 and 3 to outline where the placeholder element will live. <div id="payment-method-messaging-element"></div> Followed by the following to define the payment messaging element // Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('pk_test_51IxBONAh1CQRtcUDgb7IhoWfqGqjW4jbWmz1znyawspSHEQANyffOxsYcDmSgimF4P2GkVw1D3nRUgkfLS0OAg3c00w1LyXhnq'); const elements = stripe.elements(); const options = { amount: 9900, // $99.00 USD currency: 'USD', // the country that the end-buyer is in countryCode: 'US', }; const PaymentMessageElement = elements.create('paymentMethodMessaging', options); PaymentMessageElement.mount('#payment-method-messaging-element'); I have tried multiple variations of where the previous code blocks should be inserted, including adding them into the page headed code injection in the advanced page settings with little success. I have been updating the test key to my publishable key on each attempt Any help that can be provided would be greatly appreciated. Thank you in advance Nicole

Hi there, I'm kind of at a loss here. I incorporated some fun JSON/Lottie animations into my website following the steps provided by Carl Johnson on his YouTube page. Everything was working great all week until this morning. Somehow, all the animations, including others I tried (whether made by me or from different sites), don't seem to be working anymore. Strangely, nothing was changed. Does anybody recognize the problem or know what could be happening? The site is https://www.onderdompelen.nl/ Password is: barrydebaars I injected this code in the header: <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> And this code for the player as a code-block: <lottie-player autoplay controls loop mode="normal" src="https://lottie.host/410ebfb0-554a-4e32-bb7b-cb1601551c25/PBnNRsz69i.json" style="width: 320px" > </lottie-player> Hope somebody can help 🙂

Hi, I have a video on my homepage that I tried to resize for mobile view when my website is viewed on mobile but everytime I change the video size in the mobile view edit, it also affects the size in the desktop view edit. I would like my video to remain big for desktop view and to automatically resize smaller proportionally when my website is viewed on mobile. Thanks! My website is http://www.detroitbuyholdinvest.com

Site URL: https://www.heyuhuman.com/the-foundation Hello community! For a limited time, we are doing a promotion/bonus for people who purchase before a specified date. I know there is coding to show a countdown timer on the page but is it possible to have the section hidden after the time expiry. Having a countdown showing BONUS EXPIRED is a purchasing deterrent so I'd rather the section just be hidden so it's just purchasing as normal. Thank you so much for your expertise!

Hi I'm trying to make a video on my squarespace page link to another page on my website. The behavior I'm hoping for: 1. You go to my website and the home page is a video. 2. The user clicks the video and it takes them to another page on my website. I've gotten close to the solution but I'm stumped on fixing some bugs. Currently im putting this in the code injector and its almost working properly: <body onclick="window.location.href='https://www.timothyhoggan.com/motion-1';" style="cursor:pointer; width:100%; height:80%;"></body> Bug #1: its not excluding the header. Meaning if someone goes to my home page and try's to navigate to the "photography" page it will jump to the wrong page because it navigating to "motion-1" instead. so i need to figure out how to exclude the header form the "click zone"... Hope that makes sense. Bug #2: it only works the first time youre ont that page. If you navigate back to that page it wont be clickable again. Im currently runing on squarespace 7.0 under the york template. Im on a personal plan. My website is www.timothyhoggan.com Thanks, Tim

Hi! I recently started building my first Squarespace website and it's been great! After publishing my website to my business domain, I encountered a problem. The videos I've embedded using the following code snippet do not appear on the live website meanwhile they seem to work perfectly in the editor <video style="width: 100%" loop autoplay playsinline muted src="https://beige-bellflower-bw9x.squarespace.com/s/Website_Studio_vid_small.mp4"> <source type="https://beige-bellflower-bw9x.squarespace.com/s/Website_Studio_vid_small.mp4"> </video> Any tips on how to fix it? The picture I've attached is how it looks in the editor (multiple instances of this throughout the website) Thank you so much for your attention and participation. (viewer code for the website is "hej")

Hey guys, and thx in advance for the help ! I have a portfolio website with the main page being just a gallery of images. Once you hover on the different images I have a little code that will replace the image by an animated GIF. The problem is that even with a very fast connection all the different images are loaded and displayed on the website opening but it seems the GIFs are not pre-loaded on the opening of the page and are trying to load ONLY when the mouse is hovering them, leading to a black frame for an instant which is not very fluid. Even if you let the page charge for 5mins when you will hover the images you'll see only then it start to load the GIF. I would love to have a possibility to pre-load the different GIF images so that when the user is hovering them they are displayed without any latency. My website is here : https://camillemarotte.com/ Thx a lot !

Hi, Site URL https://caterpillar-crocodile-jbdl.squarespace.com/config/pages Could someone please help me input the correct code to change the height of our banner slideshow on the homepage for mobile? Happy with sizing on desktop. I've tried inputing a couple different ones but I must be missing something. Cheers in advance

Hi there, I use Flodesk and I love their popup. The only issue is that my advertiser wants me to turn it off for my sales page and thank you page. Does anyone know how to do this? Thanks!

Hi community! I want to add the following shareaholic code to event pages of my website. I was able to do it for my blog pages by going to Page Settings > Advanced > Page Item Code Injection. But it seems for event pages there's no Page Item Code Injection option, only Page Header Code Injection (attached screenshot). Is there anyway I can tweak this code to only show up on the event pages and not the event page landing? Code here: <!-- BEGIN SHAREAHOLIC CODE --> <link rel="preload" href="https://cdn.shareaholic.net/assets/pub/shareaholic.js" as="script" /> <meta name="shareaholic:site_id" content="3910f41d5db90ac8072e79f044c119b0" /> <script data-cfasync="false" async src="https://cdn.shareaholic.net/assets/pub/shareaholic.js"></script> <!-- END SHAREAHOLIC CODE -->

I want my visitors to upload files. To be more specific JPG file. I want it on my pop up sign up form. is there any code that i could use? I know nothing about coding. but i do have a code that i used on my "add to cart" page that allow customers to uplaod JPG file.

The first section of many pages on the site are dark so I'd like to invert the logo to be white on those sections only. The rest of the pages below are lighter color so I want it black for those sections. Is this possible? I haven't been able to get any code to work. It seems like the logo loads once per page and that's what you're stuck with. Is this correct? Is there a way to do this with Javascript? https://helicon-oval-8wh9.squarespace.com/ PW: admin

I've previously tired to use this code (below) to add a show more and show less feature to this page, initially showing 9 images and then revelling 9 more and so on. However, it doesn't appear to work when I use #expand-5 as this tutorial shows It only appears to show items that are more than 5 rows down and its not clean. Any tips? <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var SHOW_MORE = 'Show More' var COLLAPSE = 'Show Less' $(window).load(function(){ $('a[href^="#expand"]').each(function(){ var n = parseInt($(this).attr('href').split('-')[1]); var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n) next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>'); $(this).click(function(){ var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery') if (target_gallery.is(':visible')){ $(this).text(SHOW_MORE); } else { $(this).text(COLLAPSE); } target_gallery.slideToggle(); return false; }); }); }); </script>

Hello I have issue with some code. 1. Can you give me an additional code so that when I hover over the project folder it shows the red line on the subcategories? 2. Also my client sent me a screenshot of the site where when he is on one page for example home there is a red line beneath but when he clicks on "projekte" there is another line and when he hovers over a third title there a 3 red lines even though you can't open a page when you are on "projekte". Is it possible to remove that red line from the projects main title because there is no page on the main title 3. Is it possible that the text underneath the project folder are left aligned? 4. On the phone view there is a red button for some reason that I can't get rid off the website password is: password website url: https://www.invest-bau.ch this is the code /* Fix dropdown menu */ .header-nav-item--active a { background-image: none !important; } /* Change the underline color of the top menu links */ .header-nav-item a { position: relative; text-decoration: none !important; color: #FFFFFF; /* Set the color of the link */ } .header-nav-item a::after, .header-nav-folder-item.header-nav-folder-item--active a::after { content: ""; position: absolute; left: 0; bottom: -2px; /* Adjust the positioning of the underline */ width: 100%; height: 2px; /* Adjust the height of the underline */ background-color: #D60001; /* Set the color of the underline */ visibility: hidden; opacity: 0; transition: opacity 0.4s; } .header-nav-item>a:hover::after, .header-nav-item>a:focus::after, .header-nav-item--active>a::after, .header-nav-folder-item.header-nav-folder-item--active a::after { visibility: visible; opacity: 1; } /* Optional: Change the underline color when the link is active or focused */ .header-nav-item--active>a::after, .header-nav-folder-item.header-nav-folder-item--active a::after { background-color: #D60001; /* Set the color of the underline when the link is active */ } div.header-nav-item a { display: inline-block; } span.header-nav-folder-item-content { background-image: none !important; }

Hello, I have a tracking link from a 3rd party that I need to add on my websites. When I go into code injection to place the script, it doesn't save for either the header or the footer. Is this an issue with my squarespace or the script? Please see below for the tracking script. <script type="text/javascript" src="//realtyads.com/px/4210"></script>

Hey Squarespace users! I have a site that helps music students and we have a lot of play-along tracks for the books. Does anyone know of a Squarespace plug in or platform I can use on my Squarespace site that will allow students to slow-down the audio to whatever speed they need without changing pitch? I currently have several tracks that are full speed, 80% speed, 60% speed, etc. but it’d be so nice for students to have total control on their end to do whatever speed they need it to be. Any help would be greatly appreciated thanks!

I hid my header using the code below in the "page header injection" section of advanced on my main page. However, now I want the header back, and I don't know how to "delete" said code, or if I need to inject another code prompt. I'm concerned about injecting any additional code with my limited knowledge before checking... Anyone know how to do this? Here's the code prompt I used: <style> .Header { display: none; } </style>

I am looking to have this animation for a site, where the home page is faced with a video that enhances on click (when the play button disappears) and all other text and graphics move out of the screen. Would this be possible in Squarespace? Website above fold idea.mp4

Site URL: https://www.nbdesignstudio.com/ Hello, I am using 2 different gallery types on my website (Grid Strips & Strips) and individual image blocks. I would like to be able to resize the Grid Strips, Strips, and Individual image blocks for mobile version if possible and I would like the images for all to also appear 2 side by side for less scrolling . I been hunting around for a code to revise with my information and use but its not working out for me. If someone can help me with a solution that would be very much appreciated ! Also this side of my site is not public yet. I have added a password Duchess2001 I have tagged the duplicated portfolios w/ "Need Assistance" with the issues I am having

Hi, I'm sharing a site I'm doing for a client. She was looking to have her image gallery on the bottom of her home page move to the left upon scroll. Is there any way to do this within Squarespace? I tried two different gallery setups (as you can currently see on the site) with no luck. The Gallery slideshow reel section is very similar to the look I want, however, the images move upon click instead of scroll. Here is the photo she shared with me for inspiration: https://www.tarynkent.com/ Website link: https://mj-photo.squarespace.com/ Password: Madeline

I have a site which i've created with custom code which works on the Squarespace system, but code is not working when the site is live. The things that aren't working are: - Navigation hover and active underline - Hover on logos on home page - Custom fonts on 'Business Assets' pages - I've attached an example for the custom fonts. Has anyone experienced this and is there something stopping the code from working? Support would be welcome please.