Search the Community

Site URL: https://supernatlparks.com I am building my first 7.1 site, and I used an Auto Layout list to organize content on my home page. Mostly, I like how this works: It seems like will make editing the page easier, and make it easier to keep the layout working between desktop and mobile, while using cards. However, I have realized that the images in an Auto Layout card aren't clickable, only the button. That's a pretty big problem for an e-commerce site. I want people to be able to get to the products as easily as possible. Does anyone have a solution for linking each image to a URL? (The same as the button would be nice, but manual is no problem.) I don't mind using CSS and/or scripts to accomplish this.

Site URL: https://therosemountinn.squarespace.com/ I've adjusted the site's desktop menu so that it functions as if it were mobile (ie nav bar is hidden, then the menu expands and .header-menu overly is displayed when "Menu" is clicked). However, I'd like to change the button onclick trigger to onmouseover, so that it opens when someone hovers over Menu, but I'm not well-versed enough in JS to be able to do so on my own. Website w/ password here. Would appreciate any help - thank you!

Site URL: https://octopus-glockenspiel-8yae.squarespace.com/ Hey folks - Huge thanks in advance to anyone who can steer me in the right direction here. I'm working on a site for a restaurant - they have code from their online ordering platform that opens a kind of like a lightbox-widget that allows users to order without leaving the page. I have the functionality working, but I'm trying to launch this via a navigation link. I think it's just syntax I'm having trouble with. Below is what I'm working with. That main script is in a code block in the footer, launches totally fine with that full button class in the body, but if I'm trying to get it to work in the navigation would it be a link with '#upserve-olo-opener' or...how do I fire that same action from the nav? code to order online: <script src='https://app.upserve.com/platform/olo-widget.js?kokeshi-restaurant-salem' type='text/javascript' id='upserve-olo-script'></script> button code <button class='upserve-olo-button upserve-olo-opener'>Order Online</button>

Site URL: https://www.bim-ca.com/nuestros-servicios I am working in a counter up script in two separate blocks. The first one of them works perfectly but the second one counter doesnt work. How can i solve this?

Site URL: https://onyxhive.com.au Why is it that only United States can select which state to deliver to, while the rest of the countries are not as specific? To make things possibly easier for us users, have a section where if a customer tries to checkout with a specific postcode, it declines them. For example: A section where the user enters all valid postcodes and any postcodes outside that valid postcode will be rejected. I am in NSW. Australia and only service Sydney and I have postcodes from 2000 to 2800 and it will be so much easier if there was a section to enter valid postcodes so people stop purchasing my cakes outside my delivery area. It's such a hassle refunding and giving them bad news because of the UX/UI limitations. I have prevention measures in place but the customer can choose to ignore all of it and still purchase.

Site URL: https://bellflower-reed-8eae.squarespace.com/config/design/custom-css I am trying to figure out how to eliminate Orphan/Runt text for the text portion of my paragraphs. It drives me crazy seeing one word on a line. I have looked at some things that people have created with Javascript, but I am not sure how to implement it (jQuery etc.). Is there an easier way with CSS or similar? I have been trying to find a solution, but it has me turning to ask the question in this forum.

Has anyone added a smooth scrollbar to their website? I'm not meaning smooth scrolling to an anchor, I'm meaning the entire browser. I'll use the Fireart Studio's website as an example... https://fireart.studio Thanks in advance for your help!

Site URL: https://cby.squarespace.com/ I am trying to add extra nav bars to the end of my Mobile Menu, as well as an Instagram Feed to match the attached mockup. It was working earlier, but for some reason is no longer sticking. I tried moving it to the Header Injection, however it conflicts with the Mobile Overlay pop-out when clicking the hamburger menu, and in the Footer Injection, nothing happens... Any help much appreciated! <!---Mobile Menu Footer ---> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('#mobile-menu-footer').clone()appendTo('.header-menu-nav-folder-content'); }); </script> <!---END Mobile Menu Footer --->

Site URL: https://www.xystema.com/ Hi! I have a script below to change the text inside a block: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".product-price").html(function() { return $(this).html().replace(".00", " /mo"); }); }); </script> I am wondering if there is a way for this to incorporate the changing of the font style. I want the " /mo" to change the font-size and font-color. I will appreciate any help here. Many thanks.

Site URL: https://www.xystema.com/ Hi, I would like to re-arrange the product contents in the product-block (not in the product-page). I want the product-variant to be on top of the price. I will appreciate any feedback here. Thank you.

I'd like to use the below paypal code in a multiple spots on the one page, but they seem to cancel each other out. When I view the live page, only one instance of the code works. How can I use the same code several times on one page without it cancelling itself out? I've tried changing the div id for each instance. <div id="paypal-button-container-P-0N639951XH242245SMFZ55JI"></div> <script src="https://www.paypal.com/sdk/js?client-id=AVK6OAb9FUfrk9nOyAnPy5SKpT-jtF9yGVAXqaDjpONPYhQbUspycoO3XvsLq0V-GQnzr11Vu9Rr3MUV&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script> <script> paypal.Buttons({ style: { shape: 'pill', color: 'blue', layout: 'vertical', label: 'subscribe' }, createSubscription: function(data, actions) { return actions.subscription.create({ /* Creates the subscription */ plan_id: 'P-0N639951XH242245SMFZ55JI' }); }, onApprove: function(data, actions) { alert(data.subscriptionID); // You can add optional success message for the subscriber here } }).render('#paypal-button-container-P-0N639951XH242245SMFZ55JI'); // Renders the PayPal button </script> Thanks!

Site URL: https://www.m2avc.com Hi, I'm working on an integration with a major Air Conditioning company and to authorize my app I need to have a redirect URL that will display the authorization code. They recommend PHP but I can't use PHP with Squarespace. Does anyone have any ideas of where I could begin to look for how to do something like this inside the Squarespace sandbox? The example response is below. It uses a 302 redirect with query components. I need to pull out just the code, format, and display it in a web page for the client to copy and paste into an app. In this example the code is 12A3456BCD789123. Thank you all in advance. HTTP/1.1 302 Found Location: yourApp://authCode? code=12A3456BCD789123& state=a1bcd2fgh3ijkLm4opQRST

Site URL: http://lafirme.com Hi guys ! I am trying to chose the footer i want to display depending on the language of the page using a script. The site is lafirme.ca For now i am there.... /*EXCLUDE OTHER LANGUAGE FOOTER*/ if (lang == "fr") { section[data-section-id="615e0033625b2043c92d327a"] { display: none !important; visibility: hidden !important;} } if (lang == "en") { section[data-section-id="609084d63d45de554fe899f5"] { display: none !important; visibility: hidden !important;} } Could anybody give me a hand and help me figure out what i got wrong here ? Thank you very much to all for your time and all previous documentation !

Hey there! I'm currently finishing a website that was started by another user -- it hasn't been published yet. The site is mostly stock, built using one of Squarespace's templates. As far as I can tell, there is only one piece of embedded custom code which is for CanadaHelps' donation form. The code for the form is directly from CanadaHelps (and is currently working on our old website). Sometimes I can see the form in development and everything looks OK, other times I'll be working on the site and there will be an error message where the code is inserted. When I edit the page, there is an error that has replaced where the form is located that reads "Script Disabled". Does anyone have any tips on why this is happening. I am not a developer; I am volunteering to help this small non-profit launch their website. This is the code: <script id="ch_cdn_embed" type="text/javascript" data-page-id="41124" data-cfasync="false" data-formtype="0" src="https://www.canadahelps.org/services/wa/js/apps/donatenow/embed.min.js"></script> I checked the forum for similar posts and found something about viewing pages in incognito. I launched Squarespace incognito, but the error is still there when I edit the page. Many thanks for any suggestions! V

Site URL: https://www.parkbrewing.company/ I have been using a custom script (https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1) for background image parallax, but recently it became buggy and started having lots of issues displaying correctly. I fought with it for a while and had some success, but finally decided to dump the script and revert back to the native square-space image effects. Our site mostly uses the tilt effect, but when I apply native image effects on background images, the image often flips horizontally (or vertically?) it displays upside down. What gives, why is this happening and what can I do? I just want to have slight parallax on background images to add some depth to our artwork. I've also noticed that the background images that are flipped (displaying upside down), travel or tilt in the opposite direction (or correct direction for proper parallax). I've tested on a couple of different devices and browsers and the issue isn't isolated to the editing browser. Can you change the native tilt direction of the image, assuming we can sort out these other issues first? Also the first image on this page https://www.parkbrewing.company/lineup is somehow cut off by a white box, I imagine its some type element style - overflow "hidden" issue or image card wrapper, but I can't resolve this.

Site URL: https://www.tjbreshears.com/test I attempted to add a widget from bookshop.org to my site. I added the custom code they provided. The widget looks great on desktop, but then when I look on mobile, the entire widget gets cropped and moved to the middle. I looked for padding issues but couldn't find any. Code provided for widget: <script src="https://bookshop.org/widgets.js" data-type="book" data-affiliate-id="6188" data-sku="9781984826718"></script> Page Password: test123

Hello dear forum, Im working with javascript from http://will-myers.com – wich is easy to use with a premium plan. I installed some scripts for a Slider and it worked properly – BUT: Not everytime I view the site. Its very strange: At some time I can open the site from an external browser and It works – at another time at the day when I open the Homepage the Slider is not working – WITHOUT changing ANYTHING on the site. So how could this be? The issue I described is NOT there when I edit the page with the site editor as you suggested. In the login editing-preview the site is always shown with script working – but not always when I open the site as an external user. Not depending on browser. Did anyone got this before? Any ideas? A Squarepsace issue? Wanted to go online in two days – so very strange and annoying issue.

This is a tricky one: I'm having trouble at mergebusiness.co (pw: thug) [business plan] with my header text -- I'm using a 'live' .typeit script and on mobile it runs the text back/forth onto the next line. I would love to add a mobile-only change to this code block to insert a <br> in the text to avoid that happening on mobile. However, since that's not super likely, I created a duplicate .typeit code block tweaked for mobile beneath it, and have tried to hide the desktop code on mobile, and vice-versa. BUT the .typeit second code does not work because it only runs one .typeit script on a single page, it seems. Even when the first .typeit code block is hidden, the second .typeit code block won't run. My solution to this is to try and swap the order of these blocks when viewing on mobile, so the mobile version of the code block takes priority. Can I swap these blocks completely when viewed on mobile? (Neither is hidden right now.) OR-- if you can help me run two .typeit code blocks on the same page simultaneously that would solve it. I can just hide one on desktop and mobile. Thanks to whoever can crack this one. Need to launch this website later this week, so help is appreciated. USING: ".mobile-typeit-container" and ".desktop-typeit-container"

Site URL: https://www.anqi-wu.com/ hello! i'd like to add a scroll to top function on my website (placed on the bottom right hand side of the website). any help on coding for custom css to add this function to my website would be greatly appreciated! i'd like to use this icon for my scroll to top button: thank you!

Site URL: https://www.gorsecottage.co.uk/ Today I added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Any page without the widget on is fine, so it's clearly interfering with the layout somehow. The background on the cropped section has also defaulted to a green from the site palette (white would have been less of an issue!) When I messed around with it, it seems to be the first part of the code inside the <script> tags which is bugging it. Can't seem to find a workaround since it's an interference rather than a setting, can anyone help? The web page: https://www.gorsecottage.co.uk/ This is the code: <script type="text/javascript" class="" src="https://cdn.lodgify.com/portable-search-bar/1.43.3/renderPortableSearchBar.js"></script> <div><div id="lodgify-search-bar" data-website-id="326152" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/gorsecottage/en/#/335012" data-dates-check-in-label="Arrival" data-dates-check-out-label="Departure" data-guests-counter-label="Guest" data-guests-input-singular-label="{{NumberOfGuests}} guest" data-guests-input-plural-label="{{NumberOfGuests}} guests" data-location-input-label="Location" data-search-button-label="Search" data-new-tab="true"> </div> <style type="text/css"> html { --lodgify-ui-action-color: #183f39; --lodgify-ui-action-darker-color: #13322e; --lodgify-ui-action-lighter-color: #a3b2b0; --lodgify-ui-action-contrast-color: #ffffff; } </style> </div>

Hi can anyone help Im trying to add a elfsight widget to my site for google reviews but when I add the code it says script disabled?

Site URL: https://www.night-manifesto.com/ PASSWORD : manifesto Hello, I have created a section with tabs - and a button so that when i click on it i display only one of the blocks of the section that is an embedded video player and this part works fine. Now what i'd like to do is to have medium sized section and when i click on the button the section would change its height to small so that it would match the video player's eight. And this for mobile too. So i've written this line of code to inject CSS with JQUERY $(aboutTabButton).click(function(){ $("#60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}) ; }); it doesn't work i've tried this other line and it doesn't work either if ($( "#galleryTab" ).hasClass('active-tab')) { $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}); else { $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘medium’}); } I have tried numeric value for the height too and it didn't work either. Here is the entire script : <script> $(function(){ let galleryTab = '#block-d378e56b7083e4d48c24'; let aboutTab = '#block-yui_3_17_2_1_1625405642353_6184'; let contactTab = '#block-yui_3_17_2_1_1625405642353_6708'; let codeTab = '#block-yui_3_17_2_1_1625406080854_3785'; let galleryTabButton = '#gallery-tab'; let aboutTabButton = '#about-tab'; let contactTabButton = '#contact-tab'; /*Initiate the Tabs*/ $(aboutTab).addClass('non-active-tab'); $(galleryTab).addClass('active-tab'); /*Add Actions to Each Button*/ $(galleryTabButton).click(function(){ $(galleryTab).addClass('active-tab').removeClass('non-active-tab'); $(aboutTab).add(contactTab).add(codeTab).addClass('non-active-tab').removeClass('active-tab'); }); $(aboutTabButton).click(function(){ $(aboutTab).addClass('active-tab').removeClass('non-active-tab'); $(galleryTab).add(contactTab).add(codeTab).addClass('non-active-tab').removeClass('active-tab'); }); /* $(aboutTabButton).click(function(){ $("#60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’ }) ; }); */ $(contactTabButton).click(function(){ $(contactTab).addClass('active-tab').removeClass('non-active-tab'); $(aboutTab).add(galleryTab).addClass('non-active-tab').removeClass('active-tab'); }); /* if ($( "#galleryTab" ).hasClass('active-tab')) { $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}); else { $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘medium’}); } */ }); </script> and i've also tried this in the CSS aboutTab.active-tab{ [data-section-id="60df82096aa9df24b6d23124"] { min-height: unset !important; ; } @media screen and (max-width:767px) { [data-section-id="abcxyz"] { min-height: unset !important; height: 250px !important; } } THIS IS FOR THE SECTION CALLED CHAPTER ONE FOR NOW BUT IT WILL BE APPLIED TO ALL CHAPTERS.

Site URL: https://www.touchofgingerrecipes.com/ I'm not sure if this is the right forum, but the reviews on the recipes on my website are not showing up on google search. I have attached a picture of what one of my recipes comes up like on google search. Mine is the first recipe pictured that says "no reviews." But, it does have a review (I use a powr plugin). Does anyone know how to fix this?

Some websites are set up so that if you copy some text from their site, it adds a link to their site when you paste it. Does anyone know a way to achieve this in Squarespace? For someone with little to no coding skills (ideally a simple script or code snippet they can add to their site customisation). NOTE: I am aware that it not possible to completely stop people copying content, so please do not explain how people can just take a screenshot etc. My objective is to add whatever deterrents I can even if it won't solve it completely. I found an article about a script called Copy-Magic-Paste but it's from 2015 so I can't tell how to use it with Squarespace.

Site URL: https://www.charliefollows.com Hello, I am trying to embed Vimeo videos onto a page but the script is disabled. Does anyone know how to fix this?