conversiontracking

(Paid) Solutions for conversion tracking and Acuity redirects If you are up for a paid solution, I have a couple of products which could be helpful here. 1) Acuity conversion tracker tracks conversion with custom Google Tag Manager + Javascript setup. It's really realiable. 2) Acuity redirect plugin redirects. 3) Sometimes my clients like to hire me 1-on-1 which is possible as well (but more expensive) If you want conversion tracking, don't use redirects! Redirects are bad for conversion tracking in Acuity. In tools like Jotform or Typeform we need redirects to get field values. BUT! With Acuity we get them with JS messages, so REDIRECTS ARE NOT NEEDED. Redirects only cause problems for conversion tracking: Redirects can result in multiple conversion counts per single booking due to browser refreshes, especially on mobile devices (iOS safari loads the last page -> duplicate events). This leads to inaccurate conversion data. Redirects often introduce irrelevant referrers or poor traffic sources. Though this issue is mitigated with Acuity scheduling because the window.top.location = ... method doesn't work anymore and we use postMessage andwindow.addEventListener('message' for redirects, but it still complicates conversion tracking. Redirects have  personal identifiable information (PII) in URLs, which Google Analytics prohibits. To clean those up, unnecessary and expensive customisations with Google Tag Manager are required to cleanse URLs. But there is no reason to redirect because we can conversion track by sending and listening to Acuity JS messages. Problems with using Acuity built-in conversion tracking While Paul is right about Acuity having built-in conversion tracking integrations, unfortunately my clients often face problems with them. The biggest problems are A) Because Acuity is an iFrame inside our website (which looks like a part of our website but it's not) it does not have the traffic information like GA4 Client ID, cookies, the traffic source (info where the visitor came from, like organic google, google ads, instagram, youtube whatever) Acuity attempts to transfer all that stuff from our website into the Acuity iFrame, but the results are not reliable. You often see (not set) or "Unassigned" for Acuity as their traffic source in GA4 Sidenote: These annoying problems are NOT Acuity's fault! Every iFrame based widget faces this same issue with conversion tracking. Same thing with Calendly, GoHighLevel calendar, Typeform, Jotform, Tally Forms. iFrames are not part of our website so they're hard to track with GA4, Google Ads etc. Custom coding is always needed. B) The Acuity "Custom Conversion Tracking" doesn't even try to share the information from our website to Acuity. This makes sense because Acuity doesn't know what you're trying to track: TikTok, Meta. Pixel, Google Ads, Linkedin Insight Tag, Twitter pixel or hundred others. So while you can add tracking code to Acuity, it does not work because the conversion is not linked to the traffic source. For example if you have try to track Google Ads, the Google Ads conversion is missing the Google Click ID (GCLID) _gcl_aw cookie. So while Acuity tells Google Ads that there was a booking, it will not show up in your conversions because Google Ads thinks it's just organic traffic. Same with FBCLID (Facebook Click Identifier) and all others. Website conversion "👋 Hey Google Ads, we got a new booking " "🙂Great where did the client come from? Did they click on Google ad before booking?" "✅Yes. They came from Google Ads, from our spring sale campaign" "💰 Great, we'll show the conversion in Google Ads " Acuity Custom Conversion Tracking "👋Hey Google Ads, we got a new booking" "🙂Great, where did the client come from? Did they click on Google ad before booking?" "💁‍♂️ We have no idea!" "🤔Well...we can't show a conversion in Google Ads even if they came from Google Ads. We can't just randomly take credit for all website traffic. We have 0 conversions" Acuity custom conversion tracking is also sandboxed. It's an iFrame inside an iFrame, making things even more difficult. Offline conversion tracking Another more advanced approach is to store UTM parameters, or GCLID or FBCLID in local storage, and populate those to hidden fields in Acuity by dynamically creating the Acuity iFrame. This allows Google Ads offline conversion tracking, measuring revenue instead of just number of bookings, and also tracking even if people use ad blockers. Packages, gift certificates, and subscriptions One thing to keep in mind is that Acuity conversion tracking does NOT work for Packages, gift certificates, and subscriptions. These can only be tracked by Offline conversion tracking, e.g. make.com with the previous method mentioned 👆

Good news and bad news Bad news first... Solutions are not free. They have taken me years to make. You read that right. I have spent years solving this exact problem. I'm now the best in the world at solving it. Good news ✅I have perfect solutions which solve both of the problems – Acuity redirects and Acuity conversion tracking. ✅ The solutions are a one-time payment. Unlike like Typeform for example, where you gotta pay $95 EVERY MONTH for conversion tracking. My solutions are not Squarespace forum copy-paste hacks done in 5 minutes, that maybe almost work. I do professional stuff. One client who uses my Acuity conversion tracking took over 12,000 (twelve thousands) Acuity bookings last month via their 50+ Acuity accounts in multiple US states. All tracked with my setup. They make $ millions, and use my custom tailored setup to track Acuity conversions. Short story 1) You can buy a readymade solution for both, or hire me to implement Acuity conversion tracking or Acuity redirects for you. 2) If you want conversion tracking, do NOT use redirect. Use another method to track conversions. I'll explain why below, but trust me. Do NOT USE REDIRECTS IF YOUR GOAL IS ACUITY CONVERSION TRACKING. USE REDIRECTS IF YOU WANT REDIRECTS 🙂 3) Sometimes people want to hire me 1-on-1. You can get in touch via my website. I don't keep track of messages in this forum. Long story Acuity conversion tracking is difficult. It's difficult because Acuity Scheduling widget is either A) An iFrame inside our website. It looks like a part of our website but it's not. B) Another website, so user goes from example.com 👉 acuityscheduling.com/?appointmentType=62671380 Problem 1 We can't know what happens inside acuity. Thats on purpose – if we could spy inside we could also spy users adding credit card numbers. We don't have access. So we cannot use normal conversion tracking methods like Google Tag Manager form submit. Those don't work. Problem 2 Acuity tries to solve the problem by having a built-in Google Analytics 4 integration, and this custom conversion tracking box. The reason why the Google Analytics integration doesn't work realibly, is the fact that visitors land on our website. They don't land inside acuityscheduling.com/our-thing. So the GA4 Client ID, cookies, the traffic source (info where the visitor came from, like organic google, google ads, instagram, youtube whatever) is in our website. Acuity attempts to transfer this info from our website to Acuity, but the results are not reliable. My clients often see (not set) or Unassigned for Acuity as their traffic source in GA4 When done properly using my custom setup, it's a different story Problem 3 Where GA4 setup at least tries to share the GA4 cookies from our website to Acuity iFrame, the Acuity "Custom Conversion Tracking" doesn't even try. It's also sandboxed so it's an iFrame inside an iFrame, making things even more difficult. Problem 4 Redirection used to be possible with window.top.location = ... but browsers tightened security, because if iFrames can redirect you, spammy ads could redirect you to a scam website selling Viagra without your permission. Browsers no longer allow it. Solution 1 The way to track Acuity Scheduling conversions online (or redirect after booking) is by using JavaScript to send a custom message from Acuity Custom Conversion tracking box. And then add a Javascript listener via Google Tag Manager custom HTML tag, transfer all the conversion info like $ price, appointment name, email etc. Populate a data layer, push a custom event in to the DL, fire custom event trigger and send our event tags from our website (not from Acuity) This way the GA4 event, Google Ads conversion, Facebook pixel event etc are all tied to correct cookies and traffic sources in our website. We will also use the Acuity booking email and send it to Google Ads for more accurate Enhanced Conversion Tracking. Google can then track visitors even if cookie-based tracking fails, e.g. if a client clicks on your ad with a phone but books with their laptop. Advanced stuff. Solution 2 Another more advanced option is to dynamically generate Acuity iFrame, and pre-populate conversion info to hidden fields in Acuity, to do e.g. Google Ads offline conversion tracking by sending the GCLID (Google Click ID) into Acuity itself. If Acuity is used for lead generation (e.g. lawyer, not a massage therapist) this lets you track ROAS, $ not just how many bookings but how much revenue. Redirect VS Conversion tracking If you want redirects, use redirects. If you want conversion tracking, do not use redirects. Why not? 🆘 Redirect is a terrible way to track conversions 1) Redirecting to a custom thank you page often sends multiple conversions for one booking. The reason is that whenever a client will refresh their browser we send new conversions. This happens surprisingly often because when someone books on their phone and they reopen their browser it will refresh the last page leading to inaccurate data. 2) Usually redirects will also provide unwanted referrers or bad traffic sources. With acuity scheduling that's no longer an issue actually because the old redirection version is not possible but still makes redirects bad idea for conversion tracking purposes. 3) "PII" Personal information in the URL Google Analytics does not allow personal information like email addresses in the URL for page views and the only way we can get that information is in the URL. So we need a lot of expensive custom Google Tag Manager stuff to clean that our URL, up and there's just no point in doing that or making Acuity tracking more difficult than it already needs to be. If you need both redirect and conversion tracking, then we need a javascript that will add the acuity booking ID into local storage and only sends conversions for first page load but not refreshes. We also need to remove emails from URL because we need the URL for Google Ads enhanced conversion variable BUT it must not go to Google Analytics. Having both is most expensive. Packages, gift certificates, and subscriptions Currently there is a bug in Acuity where Packages, gift certificates, and subscriptions do not track conversions. Acuity knows it but has not fixed it although it's been a long time. Only way to track these is by pre-populating hidden fields and using "offline conversion tracking", e.g. make.com, CRM, Google Sheets, GCLID, FBCLID or Meta Conversions API etc. Payments We can get the conversion value, how much client paid and do GA4 ecommerce tracking, Google Ads conversion with value. Stripe and Square work. PayPal doesn't work because we redirect to PayPal where we can't track stuff. I recommend not using PayPal. Embedding Acuity must always be embedded as an iFrame (or using Squarespace Scheduling block). Do not use Booking button, although it's an iFrame on desktop, on mobile it will lead visitors from your website to Acuity stopping conversion tracking from working. Make a booking page example.com/book-here and add Acuity iFrame with a GTM conversion tracking setup. Google Ads - import via GA4 or cross-domain funnel..? Bad ideas. GTM Conversion Linker tag can be configured to do cross-domain stuff, but that does not work with Acuity. If you have an iFrame, the info is not transferred as in my testing a <a> link click is required. Also, Custom Conversion Tracking is sandboxed within a second iFrame where we can't send any info. You could in theory import Google Analytics conversions into Google Ads, but it's very inaccurate. Problem 1) we can't to enhanced conversion tracking which is a must-have nowadays Problem 2) ad blockers are more aggressive on Google Analytics than Google Ads conversions in my testing, may take 30% traffic out 3) Acuity cookei sharing is unreliable. Also GA4 usually has different conversion attribution models counteing less conversions in Google ads So with GA4 -> Google Ads import is terrible idea in my opinion. If you use a real GTM setup, you can import GA4 as a secondary conversion not used for bidding. But it will just show you less conversions. No point. Advanced stuff Dropff rates! We can also track acuity steps. A lot of clients ask for this. We make a GA4 visual funnel with drop-off rates 1) See Acuity widget 2) Interact with the widget, choosing appointment type of date and time 3) Book and pay GA4 User ID I'm also investigating turning the Acuity email to a GA4 user-id, so we can see if the same user buys multiple times, get customer lifetime value calculations etc. If your clients book multiple times like IV therapy, car wash etc. this can be super useful to see how well your business is doing. Google My Business links Must always go to Acuity where we never want to go. This needs a custom setup, links always include a "rwg_token", in URL we can create second GA4 property and filter sessions where landing page contains that. I'll try and make time to do a full video explanation. Sorry I don't have a free solution. It's taken me years to learn this stuff. Even know it's Saturday night, and I'm working on Acuity conversion tracking 🙂 ps. fun fact. A client asked me to solve this Acuity conversion tracking problem years ago. That project lead me to stop doing Squarespace design stuff and only conversion tracking full time. I basically do Acuity conversion tracking every day.

hey man, makes total sense. Was in a hurry and just popped it to my Amazon S3 external script. I took out the info as you're correct with everything

Nice work! 👏 That's definitely a great, and easy option for a vertical timeline. However, as Squarespace is built around the idea of not having to write or edit HTML code I wanted a solution fully editable in 7.1 fluid engine: It's a bit more minimalist to fit into the Squarespace aesthetics, and of course design is editable in Squarespace Site Styles. It also has subtle scrolling animation option Free tutorial for vertical timelines So if you're interested in an option with less coding, more visual editing, you can check my free tutorial on how to build a timeline with 7.1 fluid engine for a simple DIY version. (Paid) plugin with animations and mobile design ..or try out this vertical timeline plugin, with scroll animations, mobile-friendly design, custom styling etc.

Hey, Here's an easy free tutorial that'll get you started on creating a classy, minimalist vertical timelines in Squarepace using the 7.1 Fluid engine and little CSS. If you don't want to code yourself If you don't want to tinker with CSS but want a well designed, responsive or even animated timeline, you could also take a look at this blog post about different types of vertical timelines and this (paid) Squarespace Vertical Timeline Plugin with multiple options, including turning a portfolio page to animated timeline.

Hey 👋 Solution for Acuity Redirect after booking Acuity redirects have become more and more difficult, but don't worry, it's still very much possible. The problem, in a nutshell is that browsers are becoming more strict about iFrames (Acuity Scheduling in a website is an iFrame) having the required permissions to redirect the parent page (your main website where Acuity is embedded, as an iFrame). so code like this which used to work... <script> window.top.location = 'https://example.com/thank-you/'; </script> ...now leads to this error There was a workaround by adding a custom sandbox -attribute in the iFrame that seemed to work for a while, however that has also become more unreliable, as browsers seem to require "user activation", meaning that user interacts (e.g. clicking) with the iFrame to launch the redirect, which is not what happens in Acuity conversion. The current reliable solution, is to send a message from Acuity to the parent website, ideally having all the if-else logic there to redirect by appointment type. Once your website "hears" the javascript message from the Acuity iFrame, it'll "redirect itself" without permission problems. It's very unlikely that browsers or Acuity will, or even could block this method, so it's very reliable for years and years to come. A thing to keep in mind is that there will be a tiny tiny delay before the redirect kicks in, so I recommend using Custom CSS to design a loading spinner to make the experience smoother. Otherwise users may be confused by the flash of the normal Acuity end screen and a sudden redirect. My Acuity Redirector Plugin uses all the methods above, making it super reliable, smooth, flexible and easy to use. Solution for Acuity Scheduling Conversion Tracking @Clean seems to be after conversion tracking. If you want conversion tracking then a different solution is recommended. It's quite similar, in that we'll send a message from Acuity iFrame to the parent window, and then listen for that message. However I'd usually recommend implementing conversion tracking instead of redirects. For a long time, the problem was that the Acuity redirect would cause issues in Google Analytics, because the traffic source would be faulty because of the redirect. So even if traffic came from e.g. Facebook Ads, the traffic source would look like it's Acuity, even though it was only a detour. This problem is not fixed at least in my products like the Acuity Redirector Plugin. It will even include the conversion information in the redirect url. But I still usually recommend using the Acuity message to do conversion tracking, instead of redirects if conversion tracking is what you are after. I also have a plugin for Acuity Conversion Tracking here. It's a very, very difficult setup to make. Most of my clients tell me they've paid sometimes even 3 developers, but none of them couldn't do it as it requires quite deep understanding of JS, conversion tracking and Google Tag Manager, so unfortunately it's not the cheapest product. If both redirect and conversion tracking are needed, then Acuity Redirector Plugin is a good starting point. But this setup is very very very complex, so I usually try to stick with more simple version of Acuity Conversion Tracking as even that is vert complex. I do have a conversion tracker that works with the Acuity Redirector Plugin, because it will require a custom setup but I don't like the added complexity. If using the basic versions of both plugins, there is a risk that the redirect happens before conversions are sent successfully so that's not recommended.

Hey everyone, Reading everything so far, it seems like the 5 main problems are: Having something that doesn't require manually editing each link. Takes too much time. Having a solution that requires less technical knowledge to implement, not having to worry about specific format for links or using a weird "hack" A solution that only targets external links, without affecting navigation links or other internal links A solution that works for different types of content like blog posts, summary blocks, gallery blocks, etc. Solution that's reliable and always works, and will include bug-fixes or 1-on-1 support. With these requirements, I've made a small (paid) plugin that does all of that, and more. You can see a video demo below I also added a simple on/off switch, and an optional icon so visitors can easily recognise external links from internal ones. If you want to try my plugin you can find it here

Thanks Marc! Glad you like it. That's a great tip – I'll make sure to add it to Ghost Marketplace as well 🙂

Can't get exactly the same but we can get close. Or do even better. Similar page transition animations for Squarespace 7.1 & 7.0 A (paid) plugin - quick and easy option if you don't want to tinker with code. I've made a free step-by-step video tutorial for adding page transitions to Squarespace. This is for code nerds 🤓 who want a free DIY solution tailored and learn more code stuff. Either way I recommend using the awesome Animsition jQuery plugin to make page transitions. Both the Squarespace Page Transitions plugin and the video tutorial use that as a foundation. Animsition is great because it has 58 animations, fade, zoom, rotate, flip etc. Although latest version is from 12th Aug 2017 – that just means the browser support is going to be very broad! Animsition had a lot of people contributing to it so I trust it to be quite robust. Remember – with a loading animations if you have a bug it might prevent loading of the page fully! So make sure to use something reliable (like the options above) Animation for laterwolf.com – Squarespace 7.0 Brine family only I made a "plugin" where you can easily edit the color and opacity. Add to Custom CSS: /* 🎩 Squarespace Brine Animated Transitions */ //Edit loading slider color and opacity @loaderColor: blue; @loaderOpacity:40%; .Loader { height: 100vh !important; } [data-mercury-loading] .Loader { background-color: fade(@loaderColor, @loaderOpacity); } [data-mercury-loading='done'] .Loader { // custom styles here when loader is at 100% in the right edge } /* 🎩 Squarespace Brine Animated Transitions */ Explanation – how the laterwolf.com animation code works https://www.youtube.com/watch?v=-nYZIYU6ChQ The website laterwolf.com uses Squarespace 7.0 Brine family, which has something called "ajax-loading" feature. With the ajax loading enabled the template will have a small 5px white high loading bar on top. It goes from left to right once the page load. We can turn the small 5px bar into full-heigh 100% "curtain" that sweeps through the entire page. When the animation is loading, the <body> element will have [data-mercury-loading] attribute which makes the loading bar go to 60%. Once it's loaded that attribute turns into [data-mercury-loading='done'] and it reached the right edge, or 100%.

You're right. I've seen other report this as well and also do not see sales in my own GA4 / Squarespace. I wonder if GA4 is so unpopular that no one has complained to Squarespace..? Personally I've had very hard time using the data compared to UA.

Web_Solutions This thread is for the next / previous PRODUCT links. So when you click on a product, there's a button to go to next product. Your screenshot is the product list pagination, which means going to the next page on the product list. Different thing 🙂

Hi jenq 👋 Try the tagasisstant.google.com to make sure the GA4 is installed correctly and getting data. Here's video showing how Google Chrome – at 14.46 4.mp4 Get in touch if you want me to help you with this!

Thanks! Yeah, I've noticed this alert in my UA dashboard, and you're 100% right... However I'm still a little unsure what's the plan gonna be, as EU has pretty much stated that all Google Analytics usage is illegal. I've tried some cookieless legal options like Plausible and Fathom, and they're great except with the e-commerce stuff which is important 😞

Hi MayaViolet, 👋 I'm the developer of the Automatic dark mode plugin for Squarespace. Will try to push you in the right direction. To make the dark mode plugin, I've spent 3+ months solving this problem. My plugin switches between 2 themes, but the way I've coded it would work for multiple color themes as well. Here's a video explanation on how I would solve this Squarespace 7.1 color themes Squarespace 7.1 has 10 different color themes that are easy to edit. The way they work is by adding a specific CSS class to the sections. Here are the CSS classes and matching color themes: LIGHTEST 1: .white LIGHTEST 2: .white-bold LIGHT 1: .light LIGHT 2: .light-bold BRIGHT 1: .bright-inverse BRIGHT 2: .bright DARK 1: .dark DARK 2: .dark-bold DARKEST 1: .black DARKEST : .black-bold So basically, the way to code the functionality you're describing we would make a function that would add a specific css class to all sections on the page, thus making the entire page have a specific theme. The only smart way is to take advantage of the Squarespace 7.1 color themes! This function would remove the "wrong classes" from each section: // ℹ️ HELPER FUNCTION FOR REMOVING ALL THEME CLASSES EXCEPT DARK MODE CLASS var removeNonDarkModeClasses = function(){ var themeClasses = ['white', 'white-bold', 'light', 'light-bold', 'bright-inverse', 'bright', 'dark', 'dark-bold', 'black', 'black-bold']; //console.log("themeClasses: " + themeClasses); var filteredArray = themeClasses.filter(function(e) { return e !== darkModeClassName }) //console.log("other section classes but not dark mode class: " + filteredArray); $.each(filteredArray, function( index, value ) { darkmodeTargetedElements.removeClass(filteredArray[index]); }); } ...this would add them back. // ℹ️ HELPER FUNCTION FOR ADDING BACK THE THEME CLASS FOR EACH SECTION var addBackNormalNonDarkModeClass = function(){ darkmodeTargetedElements.each(function(){ $(this).addClass($(this).attr("data-section-theme")); console.log("Adding back section class: " + $(this).attr("data-section-theme")); $(this).addClass($(this).attr("data-header-theme")); console.log("Adding back header class: " + $(this).attr("data-header-theme")); }); } This would style all the sections with a specific class from the class list above var darkmodeTargetedElements = $(".page-section, .header"); darkmodeTargetedElements.addClass(darkModeClassName); -Fenix P.S. If you ever need help with advanced Squarespace coding, you can get in touch 🙂 P.P.S You could also look into the source code of the soultwin.studio's website. ⛔️ Do not copy, it's not legal. But you can inspect and get inspired. The javascript that makes that functionality looks like this: (function ($) { $(document).ready(function () { /* Define vars ============================ */ const moods = [ { label: 'Editorial', fontFamily: 'SVG', fontSize: '8vw', letterSpacing: 0, color: 'f6f7f1', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0df1826d54b3c06ddfc87/1607524128469/Editorial.gif', }, { label: 'Venom', fontFamily: 'Font Select One', fontSize: device.mobile() ? '16vw' : '9.5vw', letterSpacing: device.mobile() ? '-3px' : '-8px', color: '657034', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0df5aab2d482295e9d729/1607524197530/Venom.gif', }, { label: 'Hot Embers', fontFamily: 'Font Select Three', fontSize: device.mobile() ? '12vw' : '8vw', letterSpacing: device.mobile() ? '-5px' : '-8px', color: 'F4663B', textTransform: 'uppercase', backgroundImage: 'https://static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0e0971c49363a9b566c4a/1607524514270/MOSHED-2020-12-7-21-37-46+2.gif', }, { label: 'Lilac', fontFamily: 'Font Select Nine', fontSize: device.mobile() ? '15vw' : '8.5vw', letterSpacing: '-4px', color: 'ECE1EF', textTransform: 'capitalize', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fc953f37fb1013a0d54db08/1607029747945/Lilac-09.jpeg', }, { label: 'Moonflower', fontFamily: 'Font Select Ten', fontSize: device.mobile() ? '15vw' : '9vw', letterSpacing: device.mobile() ? '-5px' : '-10px', color: '7197F8', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0defda4b4ef2db6b12671/1607524109876/Moonflower.gif', }, { label: 'Dream Pop', fontFamily: 'Font Select Eleven', fontSize: device.mobile() ? '13vw' : '8.5vw', letterSpacing: '-4px', color: 'FFCFAB', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0dee7b8bf0379e615c131/1607524080837/Dreampop.gif', }, { label: 'Library Card', fontFamily: 'Font Select Two', fontSize: device.mobile() ? '16vw' : '8.75vw', letterSpacing: 0, color: 'f4f1c0', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fc953e4c19741784c99d8b1/1607029733001/Banana-09.jpeg', }, { label: 'Passionfruit', fontFamily: 'Font Select Twelve', fontSize: device.mobile() ? '27vw' : '12vw', letterSpacing: '-10px', color: '5B2A3D', textTransform: 'capitalize', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0dffb28178304112e1a30/1607524356829/Passionfruit.gif', }, { label: 'Limelight', fontFamily: 'minerva-modern', fontSize: device.mobile() ? '14vw' : '10vw', letterSpacing: 0, color: 'E3F4D9', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fca42456a94db17e49c979d/1607090758096/Limelight-09.jpeg', }, ]; function autoType(elementClass, typingSpeed) { $('.cursor').remove(); $('.text-js').css('opacity', 0); var thhis = $(elementClass); thhis.prepend( '<div class="cursor" style="right: initial; left:0;"></div>' ); thhis = thhis.find('.text-js'); var text = thhis.text().trim().split(''); var amntOfChars = text.length; var newString = ''; setTimeout(function () { thhis.css('opacity', 1); thhis.prev().removeAttr('style'); thhis.text(''); for (var i = 0; i < amntOfChars; i++) { (function (i, char) { setTimeout(function () { newString += char; thhis.text(newString); }, i * typingSpeed); })(i + 1, text[i]); } }, 0); } /* Make Customizer Draggable *- and define options ============================ */ _.map(moods, function (key) { $('#colorPickerSelect').append(` <div class="flex flex-align-center colors cursor-pointer"> <div class="w-24 ht-24 cursor-pointer" data-size="${key.fontSize}" data-image="${key.backgroundImage}" data-color-label="${key.label}" data-text-transform="${key.textTransform}" data-font="${key.fontFamily}" data-let-sp=${key.letterSpacing} data-color="#${key.color}" style="background: #${key.color} content-box;"></div> <p class="font-7 no-transform font-size-12 m-l-spacer-md m-y-spacer-none no-transform let-sp-1 text-dark">${key.label}</p> </div> `); }); autoType('.type-js', 150); $('#colorPickerSelect, #customizer small').hide(); $('.pick-a-mood #handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#emptyColorState').remove(); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('pick-a-mood').addClass('picking-color'); }); $('.colorChosen #handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('colorChosen').addClass('picking-color'); $('#activeColorContainer').hide().remove(); }); $('#handle-minus').on('click', function () { $('#colorPickerSelect, #customizer small').slideUp(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#customizer') .addClass('colorChosen') .removeClass('picking-color') .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${ localStorage.getItem('activeColor') ? localStorage.getItem('activeColor') : '#f6f7f1' } content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${ localStorage.getItem('activeColorLabel') ? localStorage.getItem('activeColorLabel') : 'Editorial' }</p> </div> </div> `); }); const ACTIVECOLOREL = $('#colorPicker').find( `[data-color="${localStorage.getItem('activeColor')}"]` ); if (localStorage.getItem('activeColor') === ACTIVECOLOREL.data('color')) { ACTIVECOLOREL.parent().addClass('active').find('div').css({ borderColor: 'black', }); if (localStorage.getItem('activeFont') === 'SVG') { $('#logoText').hide(); $('#logoSVG').show(); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } else { $('#logoSVG').hide(); $('#logoText').show(); } } if (!_.isNil(localStorage.getItem('activeColor'))) { $('#photo-container #photo-wrapper').css({ backgroundImage: `url(${localStorage.getItem('activeImage')})`, }); $('#colorPickerSelect, #customizer small').hide(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer') .removeClass('colorChosen') .addClass('picking-color') .css({ backgroundColor: localStorage.getItem('activeColor') }); $('#activeColorContainer').fadeOut('fast').remove(); }); $('#customizer') .addClass('colorChosen') .removeClass('pick-a-mood picking-color') .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${localStorage.getItem( 'activeColor' )} content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${localStorage.getItem( 'activeColorLabel' )}</p> </div> </div> `); $('#main-container').css({ backgroundColor: localStorage.getItem('activeColor'), }); $('#logoText').css({ fontSize: localStorage.getItem('activeFontSize'), fontFamily: localStorage.getItem('activeFont'), letterSpacing: localStorage.getItem('activeLetSp'), textTransform: localStorage.getItem('activeTextTransform'), }); } else { $('#customizer').append(` <div id="emptyColorState" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center cursor-pointer"> <div class="w-24 ht-24 cursor-pointer" style="background: transparent content-box; border: 1px solid; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">Editorial</p> </div> </div> `); $('#handle-plus').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('colorChosen').addClass('picking-color'); $('#activeColorContainer').hide().remove(); }); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } if (localStorage.getItem('activeFont') === 'Font Select Nine') { device.mobile() ? $('#logoText').css({ wordSpacing: '25px' }) : $('#logoText').css({ wordSpacing: '50px' }); } else { $('#logoText').css({ wordSpacing: 0 }); } if (localStorage.getItem('activeFont') === 'Font Select Twelve') { device.mobile() ? $('#logoText').css({ lineHeight: 0 }) : $('#logoText').css({ lineHeight: 0.4 }); } else { device.mobile() ? $('#logoText').css({ lineHeight: 0.75 }) : $('#logoText').css({ lineHeight: 1 }); } $('.select-clientele').hover( function () { $(this).removeAttr('href'); $('.marquee').show(); }, function () { $('.marquee').hide(); } ); $('#colorPickerSelect .colors').on('click', function () { let color = $(this).find('div').data('color'); let fontFamily = $(this).find('div').data('font'); let fontSize = $(this).find('div').data('size'); let letterSpacing = $(this).find('div').data('let-sp'); let textTransform = $(this).find('div').data('text-transform'); let backgroundImage = $(this).find('div').data('image'); var v = $(this).find('p').text(); if (fontFamily === 'SVG') { $('#logoText').hide(); $('#logoSVG').show(); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } else { $('#logoSVG').hide(); $('#logoText').show(); } localStorage.setItem('activeColor', color); localStorage.setItem('activeColorLabel', v); localStorage.setItem('activeFont', fontFamily); localStorage.setItem('activeFontSize', fontSize); localStorage.setItem('activeLetSp', letterSpacing); localStorage.setItem('activeTextTransform', textTransform); localStorage.setItem('activeImage', backgroundImage); $(this).toggleClass('active').siblings().removeClass('active'); if ($(this).hasClass('active')) $(this).find('div').css({ borderColor: 'black' }); $('#main-container').css({ backgroundColor: color }); $('#logoText').css({ fontFamily, fontSize, letterSpacing, textTransform, }); if (fontFamily === 'Font Select Nine') { device.mobile() ? $('#logoText').css({ wordSpacing: '25px' }) : $('#logoText').css({ wordSpacing: '50px' }); } else { $('#logoText').css({ wordSpacing: 0 }); } if (fontFamily === 'Font Select Twelve') { device.mobile() ? $('#logoText').css({ lineHeight: 0 }) : $('#logoText').css({ lineHeight: 0.4 }); } else { device.mobile() ? $('#logoText').css({ lineHeight: 0.75 }) : $('#logoText').css({ lineHeight: 1 }); } autoType('.type-js', 150); $('#photo-container #photo-wrapper').css({ backgroundImage: `url(${backgroundImage})`, }); if (!$('#customizer').hasClass('colorChosen')) { $('#colorPickerSelect, #customizer small').slideUp(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#customizer') .addClass('colorChosen') .removeClass('picking-color') .css({ backgroundColor: color }) .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${color} content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${v}</p> </div> </div> `); } }); }); })(jQuery);

Easy. 1) Add a section. 2) Add a video background with Full-bleed (not inset) 3) For section height choose L. Then it will be full-width and the height will be browser height. P.S For making full-width blocks you can try this plugin. (However in this case when you need a full-height and full-width section the built-in features should do it.

To be 100% honest I'm currently still using Universal Analytics. My click tracking plugin is a lot easier to work with UA. In GA4 navigating and filtering events has not been as smooth. The ecommerce support should be there. In the Squarespace+Google webinar when they revealed the details it was confirmed to be included. So perhaps ask Squarespace support. You can also hit me up if you want me to take a look at what might be causing the issue. However debugging analytics stuff is always a bit painful 😅

@Iwan Depends heavily on what you want to achieve. I have a plugin for adding Acuity to Squarespace checkout. It can also be added before checkout. However, in most cases there are better solutions, other platforms that have date picker / scheduling in the checkout. They can be embedded inside Squarespace or in a subdomain (shop.example.com). in 95% of cases these lead to better results and less headaches. If you however need any time that's picked by one customer to not be available for others, then we're talking about scheduling, not a date-picker. Then it's best to try to make the sales through Acuity, but if e-commerce and Acuity are needed together you can try my plugin or get in touch if you need 1-on-1 help.

Plugin available First letting anyone know, I've made a dark mode plugin for Squarespace which does exactly what you described. coral background macbook toggling on off 1400px for blog.mp4 It also has automatic mode. It knows if user has dark mode in their phone/computer settings. It's not free, but if you have any problems I'll fix them. With free tutorials your emails won't get replied. You can also read this blog post: Squarespace Dark Mode – Ultimate guide DIY If you want to make one youreself, I recommend using the Squarespace 7.1 color palettes: Basically creating a button, and that button will add a specific colour theme to all sections in the page. This way it's easy to edit how the dark mode should look, specifying each element and editing them easily. Quite a bit of other customisations are needed as well. I can't share my entire plugin code (as it's something I've spent weeks on) but here's a video that tells exactly how it works and how a dark mode plugin can be made. It's pretty long and detailed. How a Squarespace dark mode plugin is coded (20 min video) If that's too much, take a look at the Automatic dark mode plugin. Takes 1 minute to install. Here are some free tutorials: Dark Mode tutorial by Michael Henry How to Add Dark Mode & Light Mode Toggle to your Squarespace Website by Squarestylist This video goes to detail and is free. Video takes 15 minutes, has a lot of manual work. Some comments say it doesn’t work, doesn’t work on mobile and some places don’t turn dark...

I wrote about this in my blog post Changing Squarespace 7.1 Cart Page Colour Theme (2022) In a nutshell, you should figure out what is your default color theme. This can't be changed currently in 2022. But you can style it and then if you want a different look, use other color theme in places where you can choose it. So your default theme is the foundation for cart page, search results page an order confirmation page and you should start with styling those first. And then creating different looks elsewhere. -Fenix

There are two ways to solve this. Neither is perfect. I wrote about this in my blog post Changing Squarespace 7.1 Cart Page Colour Theme (2022)

Scheduling before payment is hard and complicated and requires quite a lot of custom code. First I must mention. 80% the time I solve this problem (how to add scheduling to e-commerce) using different methods than Acuity. Acuity (or calendly) are suited for some cases but definitely not all. It depends a lot on the specific store. If they have multiple venues or just one if they need the API for custom automations if they need to add the scheduling inside Squarespace or if it can be in a subdomain (shop.example.com). What kind of tax settings or payment gateways are needed for the country the business is in? What kind of prep time is needed? Is that different for different products? Is there curbside pickup? In most cases there are specific custom needs that need to be tailored and almost every project needs something little different. So it's difficult to make one-size-fits all in for this problem. Do you want local delivery area specified on a map, do you need higher delivery prices if it's far away? is SEO or design more important? I however like helping people with this problem and have a pretty deep understanding of if for code, different tools and design. But, for Acuity before checkout... In this forum I often share snippets for simple and clear problems like how to make some html elements equal height. However, adding scheduling as a step in the before checkout requires tons of custom code and settings, usually tailoring. It's probably too tricky for most users but I'll add the instructions below. First you'll check if the user is on the cart page like if(window.location.pathname.startsWith("/cart")){ //code here } Use Code injection to create an Acuity iFrame var acuityIframe = '<div id="spacer-before-acuity"></div><h2 class=" ' + CartTitleH2Class +'" cart-title">' + schedulingH2Title + '</h2><iframe src="' + schedulingLink + '"title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>'; Then insert the Acuity iframe under the cart contents and hide the Checkout -button // INSERT IFRAME AFTER CAR CONTAINER & HIDE UNUSED CHECKOUT BUTTON $(acuityIframe).insertAfter(".cart-container"); $(".checkout-button").hide(); You'll also need to dynamically load the Acuity js file to make the acuity widget resize when going from step to step or resizing the screen. And add some spacing <style> #spacer-before-acuity{ margin-top: 25px; } </style> Then you'll create a redirect in acuity. So when customer has chosen the time we'll redirect them to checkout Add the following code to Integrations → Custom Conversion Tracking <!--Redirect to checkout--> <script type="text/javascript"> window.top.location = 'https://codeandtonic.com/checkout'; </script> And you'll want to add a loading spinner and a text like "redirecting" in the MESSAGEN SHOWN ON CONFIRMATION PAGE in Acuity appointment type. Use a loading spinner gif like this For scheduling in checkout, my experience is that most stores need someone to custom code this for them and tailor it specifically to their use case. If anyone needs help with this you can get in touch.

Paul2009 gave a nice answer. With CSS you'd need to be really creative. I'd suggest paying for a better plan if it's possible. But the best you can do is add a button block, Add to Cart as title and link as the destination. Then custom CSS to hide the real add to cart button .ProductItem-details .sqs-add-to-cart-button-wrapper { display: none !important; }

I would have started coding without even checking for sure... 🤦‍♂️

Demo video Google Chrome – at 20.45.mp4 Paste this code to Settings -> advanced -> Code injection -> header <!-- jQuery 3 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> document.head.insertAdjacentHTML("beforeend", `<style> /* CSS BELOW ⬇️⬇️⬇️⬇️⬇️ */ .image-caption strong { display: inline-block; } /* CSS ABOVE ⬆️⬆️⬆️⬆️⬆️ */ </style>`); $( document ).ready(function() { /** * Equal Heights Plugin * Equalize the heights of elements. Great for columns or any elements * that need to be the same size (floats, etc). * * Version 1.0 * Updated 12/10/2008 * * Copyright (c) 2008 Rob Glazebrook (cssnewbie.com) * * Usage: $(object).equalHeights([minHeight], [maxHeight]); * * Example 1: $(".cols").equalHeights(); Sets all columns to the same height. * Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall. * Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more * than 300 pixels tall. Elements with too much content will gain a scrollbar. * */ (function($) { function equalHeights (minHeight, maxHeight) { tallest = (minHeight) ? minHeight : 0; this .height('auto') .each(function() { if($(this).height() > tallest) { tallest = $(this).height(); } }); if((maxHeight) && tallest > maxHeight) tallest = maxHeight; return this.each(function() { $(this).height(tallest).css("overflow","auto"); }); } $.fn.equalHeights = function(minHeight, maxHeight) { var $this = this; $(window).resize(function(){ equalHeights.call($this, minHeight, maxHeight); }); equalHeights.call($this, minHeight, maxHeight); return this; }; })(jQuery); $(".image-caption strong").equalHeights(); }); </script> Feel free to get in touch if you need to hire a pro 🙂

Add to code injection header <!-- jQuery 3 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> //ADD CONTACT PAGE URL HERE ⬇️⬇️⬇️ var contactPageUrl = "/contact"; //ADD CONTACT PAGE URL HERE ⬆️⬆️⬆️ $( document ).ready(function() { $(".sqs-add-to-cart-button").click(function(){ event.preventDefault(); window.location.href = contactPageUrl; }) }); </script> And feel free to get in touch if you need to hire a pro 🙂