Search the Community

Site URL: https://cyan-grape-y4g4.squarespace.com/ Hello! I’ve been having an issue with the top navigation links on my website, which I’ll demonstrate using the above sample site. I would like the top navigation words to function as clickable links while still acting as folders that produce a dropdown menu. So, in this example, when the user clicks the “About” link in the top navigation, they will be brought to a main “About” page, but hovering over “About” will still produce the drop down menu. I’ve found this can be partially executed using this code: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-nav-folder-title[href="/about-1"]').click(function() { window.location = "about-page-main-test"; }); }); </script> Using the above, “About” still functions as a folder, but is also clickable and leads users to my desired page. However, I have found when I implement this code, right clicking “About” in the top navigation and attempting to open its link in a new tab leads me to the wrong page. More specifically, it leads me to the first page in the “About” folder—in this example, this is the “What We Do” page. Why does this occur? Is there any way to fix it? It could be addressed by having the desired page as the first one in the folder, but I’m hoping for a separate solution that doesn’t require me to add any other pages to the folder in question. Can provide the password for the site in a message upon request! Thank you! K

Hi! I followed the video below for our office headshots, and added information about everyone on the back of the photo. Is there a way to have another photo on the back instead of a solid color? https://www.youtube.com/watch?v=FwHQddkcbZ0 Thanks!

Site URL: https://bit.ly/3GARJM5 Can someone please explain why my banner background image suddenly disappears when I add a code injection block for the heading? Never been an issue before. Thank you

hi, I'm a new user 🙂 who want to find a way to add custom code to header can anyone tell me how to do it ? I find embed and code function in add block but don't know how to do this work in header Edit someone can help? : ) really appreciate best regard

Site URL: https://mustard-antelope-r3yf.squarespace.com/ <div class="splash-wrapper"> <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="100" height="auto"/> </div> <style> header.Header.Header--top { position: absolute; top: 0; left: 0; width: 100%; z-index: 999; } div#jb--job-board { margin-top: 133.5px; } </style> <style> .splash-wrapper { position: fixed; z-index: 9999; background-color: #ffffff; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; } @keyframes .splash-wrapper { 100% { opacity: 0; } 50% { opacity: 0; } 0% { opacity: 1; } } </style> This is the code that I want to inject into the header so there is the animated gif when loading pages. However when I run this it does let me edit the page and doesn't allow you you navigate the navigation bar. THE Animation is to long and im not sure how to fix it PASSWORD : 123

Site URL: https://inktractor.com I'm trying to figure out a way to add social sharing buttons through code injection on squarespace 7.1 because it doesn't have share buttons. I think there's a way I can manually add at least a like button through say facebook's "like button configurator" but it would be a manual add to every blog post through a code block. I've been told I could circumnavigate this through code injection but I don't know how to change the code to make it a different link for every blog post. Can anybody help me? Here's the code I'm trying to modify to recognize individual blog posts: <div class="fb-share-button" data-href="https://inktractor.com/fiction" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Finktractor.com%2Ffiction&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>

Site URL: https://www.caminodelvino.co.uk I've tried implementing the Google Reviews Opt-in survey into my squarespace website - https://caminodelvino.co.uk. I've been guided by the code used on this Squarespace forum thread - https://forum.squarespace.com/topic/174434-how-to-google-customer-reviews-opt-in/#:~:text=April%207%2C%202021-,Hello,-%2C - supplied by @Adiran213. I’ve applied this code in my 'order confirmation page' code block and it works on my website with the opt in survey appearing post-purchase when I run a test. However, when I click ‘yes’ (ie. I would like to participate) I receive no follow on email asking me to write a review - could anyone provide some guidance on why this is not happening/how to solve it? Thank you

Site URL: https://painlesswax.squarespace.com/ Okay! I'm using square booking system to be in my squarespace website. How can I add it to my website! I already clicked on the "Code" Which ask for my code/display code and Embed which as for URL? This is the coding types I have: URL, Embed Code and Button. When I try to put either code or Embed they don't appear, they say either "null" or something else. Please someone help me, I'm just trying to get my customers to book through my website using Square. Thank you and no I am not using Squarespace/ or Acuity as booking system.

Site URL: https://www.divinecompasshealing.com/playlists I used a code block to add this GetResponse form. I selected HTML and unchecked display source. In production, the form works. However, when I click Edit on that page, nothing happens. I cannot edit it. If I do an incognito window with /safe on my url (so scripts disabled), then I can edit the page. Is this normal? Or what am I doing wrong? <script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=xxxxx&webforms_id=xxxxx" data-webform-id="xxxxx"></script> And any plans for squarespace to have a formal integration with getresponse?

Good day. My client needs a certain code for a certain page only. The problem is, injecting a code on a certain page leads only to head tag. I need the code to be injected in footer tag for one specific page only. Is it achievable? Thank you

Site URL: https://finch-plane-n82h.squarespace.com/ I am a coding novice so please forgive me if this is a very simple fix! I would like to add my client's phone number and email address as clickable links either at the top of the header bar or in a separate banner above the header bar. How can I add do this? I tried adding the below code to the header section of Code Injection for the phone number, which I found on an earlier forum post, but when I hit "save" I see the number flash at the top of the header but then it disappears: <div style="text-align: right;"><b>Contact Us at <a href="tel:555-555-5555">555-555-5555</a></b></div> Thank you in advance for your help!

Site URL: https://forum.squarespace.com/topic/203915-read-more-toggle-for-long-summary-reviews/#comment-493237 Hi guys, After a long time with Squarespace community, I found that there is one issue that many people concern about - Making the Read more and Read less toggle for the long content. Therefore, today I would like to share my solution step by step to implement it on your own. Let 's move to the cool part Step 1: In the text block where you want to hide the content if it is too long, add the word with the setting link "#read-more" for it. step 1.mp4 Step 2: Home > Settings > Advanced > Code Injection, choose the footer to add the codes <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/readmore.js@2.0.4/readmore.js"></script> <script> $(document).ready(function() { if (window.self!==window.top) { return; } $("[href='#read-more']").each(function(i, el) { // First calculate the initial space between the content and the readmore tag const contentEl = $(el).closest(".html-block, .sqs-block-content, .summary-excerpt, .image-subtitle"); const elBound = (el.getBoundingClientRect()); const contentBound = (contentEl[0].getBoundingClientRect()); contentEl.readmore({ collapsedHeight: Math.floor(elBound.y - contentBound.y), speed: 500, embedCSS: true, lessLink: '<a href="#" data-action="collapse-rmjs">Read less</a>' }) }); $(document).on("click", "[data-action='collapse-rmjs']", function() { const readmoreId = $(this).attr("aria-controls"); const contentEl = $(`#${readmoreId}`); if($(contentEl).closest('.sqs-block-image').length) { contentBound = $(contentEl).closest('.sqs-block-image')[0].getBoundingClientRect(); } else { const contentBound = (contentEl[0].getBoundingClientRect()); } window.scrollTo(0, windown.scrollY + contentBound.top); }); }); </script> <style> /* Tweak readmore js to hide the placeholder link */ [id*=rmjs] { transition: height 200ms; overflow: hidden; } [id*=rmjs] [href='#read-more'] { display: none; } body.sqs-edit-mode [href='#read-more'] { display: inline-block !important; } [data-readmore-toggle] { /* color of read more */ color: red; } </style> Notice: You can change the content in lessLink in my previous code to Less, hide,... any word you want to display when show full content step 2.mp4 After applying 2 above steps, here is the result you can achieve result-readmore-readless.mp4 Is it hard for you to follow my steps? Does it work properly on your site? If you have any question about this settings or get stuck implementing it, do not hesitate to share it with me. 'All roads lead to rome'. I hope my 'road' could be simple and helpful for our community Thanks for your attention! Support me by pressing 👍 if this useful for you

Site URL: https://www.joshwilldesign.co.uk I'm trying to add a code block to my homepage using code from codepen (https://codepen.io/rscheuer/pen/jOLKyxG) I've been unsuccessful so far, so much so that I added this code and my homepage became uneditable afterwards. Anyone able to help? Thank you in advance! Website - https://www.joshwilldesign.co.uk

Site URL: https://www.thenonsensemaker.com.au/ Hello, We are trying to add text on our shop page so that it appears bellow our products and gives our customers more information on the collections we are selling. It doesn't let you add a text box bellow products on a shop page so does anyone know how to do this with code? This is the page we are trying to add text to http://www.thenonsensemaker.com.au/art-prints And the pink text on the image shows where we want to place the text :) Thanks in advance!

Site URL: http://www.tjdigitalmarketingservices.com How do I increase my logo size on my coming soon page? I was told by Squarespace support that I would have the ability to resolve this with custom code. I understand that there was an option to achieve this manually back in 2020 but this option is no longer available. Thanks in advance!

Site URL: https://caradeckers-interieur.squarespace.com/ On the website: https://caradeckers-interieur.squarespace.com/ password: Cara1234 Page 'Projecten' I want to add a slight zoom when you hover over the images. These are poster images. I used the code below in Custom CSS, however it didn't work. .sqs-block-image .design-layout-poster img:hover {transform: scale(1.1);} Important to know is that there is text on the images and the images link to another page. The only Custom CSS code I'm using at the moment is: footer a {text-decoration: none !important;} So I don't think there is any interference. Does anybody have a solution for this? Thank you in advance!

I would like to get the information of a logged-in user to populate their landing page (the first page they visit after logging in). Is there a simple way to do this? Right now I've gone down the Profiles API rabbit hole, but as we don't have the fancy Commerce package, I won't be able to use these. Just getting the name and email address of a user onto a page after they've logged in would be hugely useful.

Site URL: https://www.kraftsbyk.com/shop Hi all! I am attempting to hide the price of a single listing on my store/shop page. I am offering a custom work option, and I was able to figure out how to remove the price from the product page itself, but I can't figure out how to remove the price on the store page. I don't want to hide the prices for the all the items, just the custom work listing. And that's where I run into a snag...is there any way to hide just the one price? And if so, how? Thanks! Site password is 0251.

Site URL: https://charlessellerphotography.com/cart I have a complicated problem, My site is in two languages, English and French, as you can problably see. Normaly I have a page in English and I duplicate it in French. When I do that I apply some some custom code to hide the other languages pages in the header. As far as I understand I can't have two basket pages, one in french and one in English. So I need to make my basket page english and french. I would like to hide the header, and modify the text on all of the page to have it in both english and french Has any one got an idea of the code that I need to use and where I inject it ? Thanks in advance

Site URL: https://www.thetravellerscollective.com/ Hi All, I have a small site built on Mojave. I added some header code injection to force the homepage logo to show as an alternative, all white, logo version and at a larger size than the main site logo. The full colour site logo is then to show on all other pages on a white header. The issue i'm having is that this works correctly on the editor but on the live site if I move from Home > About, the white logo shows on the about page until I refresh the browser and vice versa, About > Home, the full colour site logo shows on the homepage until i refresh. Code in homepage code injection is below. Any help greatly appreciated. Thanks! <style> .Header-branding { display: block; max-width: 100%; max-height: 230px; content: url("https://static1.squarespace.com/static/60300f1f15f56c38924a9609/t/6035439b1e31cf7ace586335/1614103451610/TheTravellersCollective-logo-white.png") !important; } </style> <style> .Mobile-bar-branding-logo { display: block; max-width: 100%; max-height: 124px; content: url("https://static1.squarespace.com/static/60300f1f15f56c38924a9609/t/60354bb3553c1e7fc257fe9d/1614105524002/TTC-LOGO-LINEAR-TEAL.png") !important; } </style>

Hi there, Our business has been threatened with a lawsuit unless we upgrade our website to W3C standards for ADA compliance. I have managed to make all of the fixes required thus far via my limited coding skills or work arounds. I also downloaded a great (and free!) accessibility widget that seems to offer a lot of nice functionality. However, the dropdown menus in my product pages still can not be read by an e-reader and I can not figure out how or where to add custom code to modify them. I have found the code required but despite having gone into developer mode, I don't see where to inject this code in order to modify the drop downs and make them compliant. Has anyone else done this or can they point me to the right place? Or is this simply not doable on the Squarespace platform? Any thoughts or advice are welcome.

Site URL: https://www.thedrop.ca/doterra-healthy-essentials Hi there, I'm having an issue with words splitting up and wrapping to the next line when I narrow the width of the window I'm using (both chrome and safari). This seems to be a site-wide issue, so I can't use the codes provided in similar threads that use block IDs. It seems to be when I have multiple columns of text. It's fine on mobile view since it stacks the columns instead of having them side by side, but once my desktop browser gets to about 836px in width, it breaks up the word and doesn't even add a hyphen. If you narrow the window more it eventually switches to stacking the columns on top of one another like in the mobile view, but there's a really awkward period between full screen and mobile size where it splits the words. It also happens on ipad. Mobile view is fine. Any ideas?

Site URL: https://www.warners-stores.co.uk/beaus-bakehouse Hi all, I've created this page (https://www.warners-stores.co.uk/beaus-bakehouse) with the images on the right hand side on desktop with text on the left. When viewed on mobile I want the images to sit at the top of the page, and the text beneath. At the moment they go to the bottom of the page on mobile. Is there a way to change this? Thanks!

Site URL: https://combicreative.com/ Hello! I have a question regarding custom column widths....I'd ultimately like my portfolio site to go as follows: I am using the FLATIRON TEMPLATE 1st row: 1st column would have 1 large image 2/3rds width of pageon the left 2nd column, same row, would have 2 images stacked taking up 1/3rd the width of the screen on the right 2nd row (would be opposite of the first) 1st column, would have 2 images stacked taking up 1/3rd the width of the screen on the left 2nd column would have 1 large image 2/3rds width of page on the right and then this would repeat down the page, alternating rows. Also, At the largest, I only want 2 columns talking up the width of the screen ever....not sure if I can lock this in? See screenshot site reference screenshot and wireframe of ideal layout for reference

I'm trying to use the custom code block and the editor is coming up blank. The default "Hello World!" text is visible on the page, but nothing in the editing block (see image). Things I have tried that did not fix it: commented out all of my custom code and CSS turned off my browser extensions logged into squarespace on a different browser logged into a different squarespace account Has anyone else encountered this and did you find a fix? This is the first time I've ever had a problem like this and I'm stumped. Thanks in advance for your input.