codeandtonic

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

Dark Mode Plugin
I've made an Automatic Dark Mode Plugin for Squarespace. It's the best one currently available. I'll tell you how it solves these problems.
1) Automatic detection
My plugin automatically detect if dark mode is enabled.
I mean this:
repeat iphone toggle_2.mp4   My plugin uses this code
// ℹ️ HELPER – CHECK USER PREFERENCE var getDarkModeSystemPreference = function(){ const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); if (prefersDarkScheme.matches) { return "dark"; } else { return "light"; } }  
2) Remembering the setting
My plugin uses cookies to "remember" the dark mode setting - if user clicks on a button on website to turn it on. The automatic mode doesn't need to remember anything.
I use a javascript library called js-cookie. Example code:
//remember dark mode preference Cookies.set('darkmode', 'dark');  
3) Adding the dark mode button
My plugin has option to add the button in multiple places. For example in the navigation menu, or fixed button in the bottom and more. 
User can choose all four places or none if they only want the automatic mode.

SQS Code Connector – at 22.24.mp4 My plugin uses this code to add the button in multiple places
// ℹ️ HELPER – CREATE TOGGLE BUTTON IN SELECTED PLACE function createToggleButton(showOrNot, style, where) { $( document ).ready(function() { var toggleButtonHtml = $("<div id='darkmodetoggle' class='darkmode-darkmodeinner " + style +"'><div class='darkmodeinner'>Toggle darkmode</div></div>"); if(showOrNot == 'show'){ toggleButtonHtml.prependTo(where); } }); } createToggleButton('show', 'button', 'body');  
Blog post
I also have a blog post about Squarespace Dark mode here

Found a way to solve this
It's possible to find out what's the next/previous product using the Squarespace website JSON. On any page add ?format=json-pretty to the url to see the information. You can get that info with  javascript fetch and add the links to your template. More detailed info about this can be found my this blog post. It needs a bit of extra code because of the bug mentioned in the previous posts. 
Plugin now available
Just released the Squarespace 7.1 Pagination plugin. It'll do everything for you with a quick copy-paste. 

I don't believe this is natively possible, though I did find this tutorial that may work (I have not tested it myself):

If you use a scheduling block, it calculates the height perfectly in all reponsive screen sizes. No scrollbars ever. 
When using the iframe embed, it doesn't work. In some pages like cart or order confirmation you cannot use scheduling block. I'm wondering if there's a way? 
 
video describing the issue

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

@codeandtonic
If I am not mistaken you have something to do with VoxPop? Didn't you take over or something like that?
I just want to say that your plugin is out of control awesome. You should submit it to Ghost Plugin's Market Place because I can only imagine how many SQSP designers are looking for this but can't find you. Amazing and beautiful work!

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%. 

I think you've picked up mixed messages. If you want to use Ajax to read data then it works exactly the same on Squarespace as it does on any other web builder. 
I suspect you've been reading about Squarespace's own Ajax Page Loader (Mercury) which they used on Squarespace 7.0 for their Brine family of templates. This is used to load site content more quickly by loading the page body only, not the headers and footers. It isn't related to writing your own Ajax requests and isn't used on newer Squarespace 7.1 sites.

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...
 

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);  

Blog post with video here How to install Google Analytics to Squarespace (UPDATED METHOD 2022)
 
I was waiting for this, as it was scheduled to come out in november 2021, but just now I noticed the update live so we can finally add GA4 to SQSP. It was of course possible to do before, but a manual code injection method will NOT track e-commerce transactions so this is a super welcome update. It's easy and will track e-commerce transactions automatically. 
I hope you'll find it useful 🙂
-Fenix

I'm just implementing  similar thing to a client. I went with esignatures.io which has a great set of features and a nice pricing. Also redirect is super useful, almost a must featurea and it can be embedded to a website + automated in a lot of ways. 
pandadoc.com is another one that looks like it has the necessary features - could be a better one here as they seemed to have forms. It's not possible to use Squarespace forms, so any form information should be in the signature-software. in esignatures.io you could add custom fields and I'm 99% sure these can be used for any kind of automation with Integromat, sending an email, adding info to CRM, google sheets etc.
I'm adding the signature before the payment in checkout with custom coding so customers will sign before they pay. 
I'll write a tutorial if I got a sec. You can also get in touch with me for help

That's what I imagined, with the tax point being at the time of each payment, but I'll let you consult your Accountant or Tax Lawyer 🙂 on the legalities of this, and I'll stick to developing websites and stores.

Dark Mode Plugin
I've made an Automatic Dark Mode Plugin for Squarespace. It's the best one currently available. I'll tell you how it solves these problems.
1) Automatic detection
My plugin automatically detect if dark mode is enabled.
I mean this:
repeat iphone toggle_2.mp4   My plugin uses this code
// ℹ️ HELPER – CHECK USER PREFERENCE var getDarkModeSystemPreference = function(){ const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); if (prefersDarkScheme.matches) { return "dark"; } else { return "light"; } }  
2) Remembering the setting
My plugin uses cookies to "remember" the dark mode setting - if user clicks on a button on website to turn it on. The automatic mode doesn't need to remember anything.
I use a javascript library called js-cookie. Example code:
//remember dark mode preference Cookies.set('darkmode', 'dark');  
3) Adding the dark mode button
My plugin has option to add the button in multiple places. For example in the navigation menu, or fixed button in the bottom and more. 
User can choose all four places or none if they only want the automatic mode.

SQS Code Connector – at 22.24.mp4 My plugin uses this code to add the button in multiple places
// ℹ️ HELPER – CREATE TOGGLE BUTTON IN SELECTED PLACE function createToggleButton(showOrNot, style, where) { $( document ).ready(function() { var toggleButtonHtml = $("<div id='darkmodetoggle' class='darkmode-darkmodeinner " + style +"'><div class='darkmodeinner'>Toggle darkmode</div></div>"); if(showOrNot == 'show'){ toggleButtonHtml.prependTo(where); } }); } createToggleButton('show', 'button', 'body');  
Blog post
I also have a blog post about Squarespace Dark mode here

New Dark Mode plugin released
In case anyone is interested I've made a (paid) Dark Mode Plugin for Squarespace. 
It's currently the best plugin available.
It has automatic mode and a manual button. It doesn't have a flash of white like other plugins. Easy to customise, has nice animations and you can even upload a dark version of your logo. It's not free, but I've spent over 2 months coding it to be nearly perfect. 1-on-1 support included.
Blog Post
I've also written a blog post on Medium.com Squarespace Dark Mode – Ultimate guide
Free tutorials
How to Add Dark Mode & Light Mode Toggle to your Squarespace Website by Squarestylist
This popular video is 100% free. Video takes 15 minutes, has a lot of manual work. Some comments say it doesn’t work on mobile (or at all) and some sections don’t turn dark. 
How to Implement Dark Mode via Custom CSS on Squarespace by worldsepsisday.org
This tutorial will make a simple automatic dark mode (no button) for Squarespace 7.0. 

Dark mode tutorial by Michaen Henry
Unfortunately this website has now expired 😞

SEE https://answers.squarespace.com/questions/277530/automatic-dark-mode-avenue-theme.html

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

Needs Custom CSS unless you'll wanna change all H2 headings.
 
This is the fluid type Squarespace uses:
@media screen and (min-width: 1296px){ h2.ProductItem-related-label {     font-size: ~"calc(2.2 * 1rem)"; } } width: 1295px) and (orientation: portrait){ h2 {     font-size: ~"calc((2.4 - 1) * 1.2vh + 1rem)"; } }

change the 2.2 and 2.4 to different numbers do make it bigger and smaller for mobile and desktop respectively

Hi Dee12,

Wanted to share some tips since I've helped thousands of users with this exact problem.
I've also written a blog post 5 Ways to make full-width blocks in Squarespace. I'll try to update that. I'm now investigating a new method which I haven't fully gotten to work. 
Here is the code.
#block-yui_3_17_2_1_1640294879004_4287{ width: 100vw ; position: relative ; left: ~"calc(-50vw + 50% - .0vw - 17px)"; // en ymmärrä. content wrapperis pitäs olla 6vw mut 0 toimii... 🤷‍♂️ } @media only screen and (min-width:768px) and (max-width:1276px){ #block-yui_3_17_2_1_1640294879004_4287{ width: 100vw !important; position: relative !important; left: ~"calc(-50vw + 50% - 3.0vw - 17px)" !important; //moving 50% of parent container = left edge is in the middle of the browser //-50vw takes element's 'left edge from middle of browser to left edge of browser //- 3.0vw is the .content-wrappers default padding-left we gotta take into account //17px is the SQSP default block padding/margin } } There are some screen widths where it does not yet work. At least wider than 1276px but narrower than something. I'll let you know if I make more progress. I'm worried that changes to templates might break this easily so the other methods, javascript calculations or full-width section are definitely more reliable and less likely to break in the future.
Little self-promotion: I've also coded a Squarespace Full-Width Blocks Plugin. If you're willing to pay a bit, that's the easiest route for Squarespace 7.0. 

For 7.1 The currently best method is done with these steps
The Squarespace 7.1 method works like this
1. Create a section for the full-width content. So you'll create a section just for the full-width image, video, whatever.
2. Check the section data-ID. You can use the Squarespace ID Finder Chrome Extension to find that.
3. Use CSS to remove the horizontal padding of that section and it's .content-wrapper element
4. remove the block paddings  with [class*=sqs-col] .sqs-block inside your full-width section
5. The .sqs-row has a negative 17 px margin. Use CSS to set the margin to 0 or the block will be wider than the screen. We want full-width, not wider than full-width 🙂
6. Image blocks for example have a 2500px max-width in an element with .intrinsic -CSS class. Use CSS unset for that.
7. Also remove the vertical padding in the section and the content-wrapper
This video is for my plugin but shows how it works:

My full-width plugin will also include the 7.1 full-width code

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.
 
 
 

Agree with @garnetterri. Can you assist? Thank you! 

@codeandtonic
Your suggestion is exactly what I need to do but I can't figure out how to actually do what you said (scheduling before payment). Thank you for sharing. 
Can you assist with the coding on my site to literally do just that? 
Thanks!

On the Personal Plan you cannot change the Add to Cart button but you can do the following:
Add some Custom CSS to hide the Add to Cart button. Within the product description, add a link for the contact page. Add some further CSS to style the link to look like an Add to Cart button. As you didn't include a link to your site in your question I wasn't able to provide you with the exact details but this should get you started.
Did this help? Please give feedback by clicking an icon below  ⬇️

I'm just implementing  similar thing to a client. I went with esignatures.io which has a great set of features and a nice pricing. Also redirect is super useful, almost a must featurea and it can be embedded to a website + automated in a lot of ways. 
pandadoc.com is another one that looks like it has the necessary features - could be a better one here as they seemed to have forms. It's not possible to use Squarespace forms, so any form information should be in the signature-software. in esignatures.io you could add custom fields and I'm 99% sure these can be used for any kind of automation with Integromat, sending an email, adding info to CRM, google sheets etc.
I'm adding the signature before the payment in checkout with custom coding so customers will sign before they pay. 
I'll write a tutorial if I got a sec. You can also get in touch with me for help