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

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.