Search the Community

Hi, hoping this is an easy one! I have made a one page website and want the navigation bar to anchor down to various sections. I have added the standard anchor link code blocks where relevant but no matter what I add in the nav bar they aren't working. I have tried the following: Adding full links to the nav link - https://www.dovesflightgundogs.com/home#services Adding the anchor link - #services Adding the page url and anchor link - /home#services If someone is able to help that would be great! Website: https://www.dovesflightgundogs.com/home

Hi! I am expanding my website by adding more products! I have over 100+ new products to be added and how should I make it easy for our customers to find the products they wanted? Luckily, I've found a sidebar in 'Categories Type' but we needed more than just showing main categories. For example, we are specialising in selling soju and we divided our products into two categories right now: All Soju Beyond Soju However, we want to add subcategories from the 'Beyond Soju' and be able to expand the list of subcategory section in our sidebar. Would this be possible with Squarespace by just injecting some html/css? And if so, I was wondering if anyone has a basic code if I could inject.

Hi, I created custom code block on this page to create a "Read More/Read Less" button for this jobs page (see below) that was very text heavy. The function is working properly on desktop however when I look on my phone is all jumbled up. (Resizing my desktop to a mobile size on my computer everything looks fine.) I modified the code from here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more Does anyone have an idea what is happening in mobile and how to fix it, or maybe is there a better code option that I can use for this same effect and look? Appreciate the help in advance. Thanks Website Page: https://bell-cheetah-n87s.squarespace.com/jobs PW: scratch

Hello beautiful people, I just started to code to pimp my website. Following tutorials, learning some basics. I already implemented some stuff but now I got to a point where I don't understand what to do. Is here someone nice who could help me out? I'm trying to implement this text effect to my landing page: https://codepen.io/Valgo/pen/PowZaNY But I don't know where to put the CSS, HTML and JS. I tried a few variations with code boxes, code injection, custom code. I downloaded a google font, imported it. Is there a friendly soul here who could lead me step by step through this project? Best wishes Lea

Hi, my home page URL Slug is /acasa , however I would like it to be /acasă Is there any way I can do this on Squarespace? I tried constructing my URL Slug using HTML Encoding Formatting and writing it as /acas%C4%83 with no success, since the input for URL Slug won't accept % character.

Hi guys! It's my first time posting here and I hope somebody can help me! 🤗 I have to add a 3rd-party button on my product pages (clothing) which will enable my customers to "get measured". I got the code from the software company, but I don't know how to add it to my separate product pages only (they only provide a guide for shopify websites) . If I add it to the header in the code injection it (obviously) appears in the header in all pages. What to do? Thank you in advance and great day! Julie

Hey group, I was wondering if one of you knew how to reproduce a tab like the one on this site: https://tonrevedesign.wixsite.com/kendra (which is a built in option in Wix)... I do want it to change automatically (maybe every 5 secondes) or manually - when you click on the tabs, you can switch them (I don't wanna use the next-previous on each side) Any help? Thanks! 🙂

Hi there, not sure what or why, but for some reason my type writer text effect that is in the footer has stopped working but only on the homepage. is there an obvious obstruction here that i'm missing? the homepage is the only page where there is also another type writer text effect code block on the landing page, so i'm assuming it's that but i don't know why! www.moonlitdesign.uk/home-old -bottom left on footer: • serving internationally thank you 🙂

Hey! I've signed up to Semrush and just received my report back from them and all my pages have too low of a text to HTML ratio. Is anyone else facing this and if so, any tips?

Hello everyone! I'm in need of some help with HTML coding on the website I'm managing for work. I am trying to integrate Showpass ticket purchasing directly on our website's event pages, and while the code works it pulls a button style that, frankly, doesn't look like a button. The code Showpass supplies for embedding is below (including the specific event I want the button to pull purchase information for), if possible I would like the button to match the primary button style on our website or otherwise get a button block that functions the same way this embed does. Link to Event Page: https://www.cosmopolitanmusic.org/upcoming-concerts-events/cms-spring-series-handbells I have zero coding experience other than the ability to copy-paste and occasionally modify extremely obvious pieces of the code so any assistance would be appreciated!

Help! I added a custom HTML button that opens up local retailers to cart products underneath a title on a demo site. If the button is lower on your page and you click it, it opens up the retailers in a list upward from the button. When the list opens up though, the title overlaps on TOP of the retailer results, making awkward legibility issues. I would like all items on page to be underneath the button pop up so it's legible and behaves like you would think. For reference, attached is an image of the button when it's not open, and when it is, and a close up of the issue.

Hi! I've a website with a few galleries on it. However when I reduce the window width, the top line (which I've formatted with an H4 tag) wraps on to the same line as original line, when I obviously want it to wrap onto a second line (see attached). Here's an example of one of the pages: https://www.walkerarchitecture.co.nz/commercial-industrial What do I need to do to fix this? Any help is greatly appreciated! The site is already live. Thanks!

Hey everyone, I'm Kamil, and I'm currently working on a webpage tailored for Geoguessr Players. One of the essential components of this project involves integrating content from Google Street View. However, I've encountered a roadblock in my efforts to provide a seamless experience for users. Google's policy prohibits the use of screenshots or extraction of Street View imagery from embedded sources. This policy ensures that any edits or removals made by Google in response to user requests are accurately reflected in projects like mine. Consequently, I've been using embedded links from Google Street View, as exemplified by the following code: <iframe src="https://www.google.com/maps/embed?pb=!4v1711973276984!6m8!1m7!1sRcD-yLeUWU0scoEx-uHRPw!2m2!1d48.85954852114744!2d2.292492465652248!3f135.72805161999918!4f28.15798239575001!5f0.7820865974627469" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> However, you might have noticed that these embedded links are causing long loading times and occasionally displaying blank screens, rendering them less than ideal for user experience. Here's an example of how this appears on my webpage: https://www.geoninja.net/mexico-city-mexico Now, I'm exploring potential solutions to enhance the user experience. One idea I'm considering is using a dynamic screenshot as a "Custom featured image." This approach would involve capturing a screenshot directly from Google Street View each time the page loads, ensuring that users always see the latest view. However, I'm uncertain if this approach is technically feasible or compliant with Google's policies. Alternatively, I could opt for a simpler solution: providing a static screenshot with a prompt such as "CLICK TO LOAD THE PICTURE," which, when clicked, would display the embedded link. I'd greatly appreciate any insights, suggestions, or experiences you might have in tackling this challenge. Thanks in advance for your help! Best regards, Kamil --- Feel free to adjust any details or wording to better fit your style or the community's norms!

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

Hello, I´m now figuring out how to index and optimise SEO. I´d like to use the text in the carousel of my main page as the H1. Any guidance on how to do that? Attached image below.

I have a flexbox with 9 boxes on the first page of my website (https://www.veritaslegalassociates.com/). The last box is lower than the rest of the boxes in the row. How do I align the last box vertically top and bottom with the rest of the boxes in that row? Here is the code I'm currently using: <style> .services-box { display: flex; justify-content: center; align-items: end; flex-wrap: wrap; } .service { margin: 20px; } .flip-box { background-color: transparent; width: 340px; height: 340px; border: 1px solid #f1f1f1; border-radius: 10px; perspective: 1000px; } .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; } .flip-box-front { background-color: #fff; color: black; border-radius: 10px; } .flip-box-front img { height: 100%; width: 100%; } .flip-box-back { background-color: rgb(18,50,73); color: #000; transform: rotateY(180deg); border-radius: 0px; } .flip-box-front h2 { position: absolute; bottom: 0; font-size: 24px; color: #fff; padding: 10px 15px; } .flip-box-back h2 { font-size: 18px; color: #fff; margin: 0px; padding: 0px 15px; } .flip-box-back p { font-size: 16px; color: #fff; padding: 0px 15px; } .flip-box-back a { text-decoration: none; font-size: 15px; color: #000; background-color: #fff; border-radius: 5px; padding: 10px 30px; font-weight: 700; } </style>

For starters I am not a coder and much of this is foreign to me, though I can usually figure things like this out with detailed instructions. I have added a third-party "book now" widget button from wetravel to my site, but am having an extremely difficult time getting it to place where I want on the website. After much trial and error (constant moving, saving, and previewing), I've been able to get it to appear properly on the desktop website when viewed at 100% zoom, but it then goes off center when zoomed further in/out or viewed on mobile devices. Currently I have only added one of these widgets until I am able to figure this out, but have plans to replace all of the "book now" buttons on my website with it once a solution is found. It seems to be the safe mode messaging thats interfering, but I cant say this for certain. This is the code that wetravel has provided for the button (I would honestly prefer it be a bit larger to match the style of the other buttons native to squarespace, but don't see a way to edit the size on their website) : <button class="wtrvl-checkout_button" id="wetravel_button_widget" data-env="https://www.wetravel.com" data-version="v0.3" data-uid="1009729" data-uuid="61034387" href="https://www.wetravel.com/checkout_embed?uuid=61034387" style="background-color:#000000;color:#ffffff;border: 0px;border-radius: 5px;font-family: 'Poppins', sans-serif;font-weight: 400;font-size: 14px;-webkit-font-smoothing: antialiased;text-transform: capitalize;padding: 13px 24px;text-decoration: none;text-align: center;line-height: 14px;display: inline-block; cursor: pointer;">Book Now</button> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <script src="https://cdn.wetravel.com/widgets/embed_checkout.js"></script> Any help here will be GREATLY appreciated!

Can I successfully embed JavaScript or HTML from MailerLite (newer free version) into my Personal Squarespace Subscription. I created the embedded form, put the HTML intro a code block on SquareSpace and it looks ok but show an error message "code removed." The best I can determine is that I cannot add a JavaScript or HTML embedded form code into my "personal subscription" and need a business subscription. Correct or no? Using Zappier is not the solution to link the two because I still can't get MailerLite on SquareSpace, right? thanks!

Hello, anyone will be able to help me. I am trying to eliminate the ALL Breadcrumb to put a piece of text instead. Thank you My website: https://www.yodeschamps.com/

Hi, hoping you can help! I installed this font some time back and had it working on a couple of my sites but it had stopped working and for the life of me I can't see the issue. This is for a counter graphic on the home page - simply want the numbers to count up as you scroll down. Can anyone help identity where the problem is? Wondering whether it's in the #block-id's but can't be sure. @tuanphan? 🙏 <script> (function(){ let playInBackend = true, timing = 4, section = '', direction = 1; 1 = forwards, 0 = backwards /*Do not Adjust below this line*/ function AutoScrollLayout(e){e=""==e?document.querySelector(".user-items-list-section"):document.querySelector(e);let t,n,o,i,c,r=!1,s=e.querySelectorAll('button[class*="__arrow-button"]');function d(){t=setInterval(u,n)}function u(){o=document.querySelector("body.sqs-edit-mode-active"),i=document.querySelector(".sqs-modal-lightbox-open"),r||o||i||!c||s[direction].click()}n=1e3*timing;if(document.addEventListener("visibilitychange",function(){r=!!document.hidden}),["mousedown","touchstart"].forEach(t=>{e.addEventListener(t,function(){r=!0})}),["mouseup","touchend"].forEach(n=>{e.addEventListener(n,function(){r=!1,clearInterval(t),d()})}),window.IntersectionObserver){new IntersectionObserver((e,t)=>{e.forEach(e=>{c=!!e.isIntersecting})},{rootMargin:"-75px 0px -75px 0px"}).observe(e)}s[direction]&&d()}window.addEventListener("load",function(){let e=new Array;e.push(section),section.includes(",")&&(e=section.split(",")),e.forEach(e=>{(window.top==window.self||window.top!==window.self&&playInBackend)&&new AutoScrollLayout(e)})}); }()); </script> <script> // how many seconds do you want it to animate? var animateSeconds = 3; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1701432935919_19729").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1701432935919_19729"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1701432935919_19729"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1701432935919_19729 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-1b4046f3b88f6d347803 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-ebe95cf3e8d568fc8f4e h1"); var ongoingNum = +ongoing.textContent; // save Fourth number var ongoing = document.querySelector("#block-2933e46eda3812b43cf5 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); },

Sorry I can not provide the website because of some contracts. I have read some thread in the forum, and try change the css file by this great solution : it make the safari font-weight more closed to chrome one ,but still have some differences. My project use MUI theme to overrides the text ,and we use Inter font Safari: chrome:

Hi! I would like to add a vertical line that overlaps two content blocks, one being a testimonial. I was able figure out a workaround by adding code injection to the top/bottom blocks, but I need to do the same with the testimonial block and I'm stuck. Should I get the testimonial ID and repeat the same code injection? Any guidance would be greatly appreciated.

Hi everyone, I'm trying to figure out the bet way to bring the attached design to life and I'm lost as to where to start. I've circled in red the section in question. I love how the boxes overlap the two sections, so I would like to keep that. I can do without the icons. Any help to point me in the right direction would be greatly appreciated.

Hi group! My client would like a price table like this: https://aquado.ca/tarifs/?fbclid=IwAR0SfshP8M1blW54mlgx2WHbPAdtNMSDFZmXsdVEx7b_94tN-pt4DzjgFpk Where you click on the number and ONLY the price changes. Also, she would like a accordion just below the card title with a small description of the package. I tried to code a table but can't figure it out... Client's website: https://alau-site-web.squarespace.com/ Password: freelance Any idea?

I have a form that I want to add a disclaimer paragraph to as well as section headers. Does anyone know of a way to make this possible? Thank you!