codeandtonic

Chris.SE · April 12

7 hours ago, Chris.SE said:

Hey there, I replied to you on your YouTube video but also wanted to follow up here. You need to install the code in the portfolio page’s header code injection, not the site wide header code injection.

I also outline several reasons JavaScript is needed to truly solve this issue in my blog post.

Please consider taking down the video as it has the potential to confuse people and incorrectly claims that my code does not work. Again no hard feelings and it is great we are all trying to help out until Squarespace finally implements this for real.

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

June 8, 2023

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.

June 5, 2023

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.

June 4, 2023

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.

June 3, 2023

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

MarcWatson · November 26, 2022

On 11/25/2022 at 12:29 PM, MarcWatson said:

@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!

Thanks Marc! Glad you like it.

That's a great tip – I'll make sure to add it to Ghost Marketplace as well 🙂

MarcWatson · October 22, 2022

On 3/31/2021 at 3:01 PM, Webswool said:

I'd love to implement this kind of page transition effect on my client's 7.1 site

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

June 7, 2022

On 6/3/2022 at 1:53 AM, 1957Goldtop said:

There is something wrong with their implementation... it's tracking e-commerce purchases but it's not registering the transaction revenue:

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.

April 22, 2022

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 🙂

April 21, 2022

Hi jenq 👋

Try the tagasisstant.google.com to make sure the GA4 is installed correctly and getting data. Here's video showing how

Get in touch if you want me to help you with this!

April 19, 2022

14 hours ago, paul2009 said:

Bear in mind that Google plan to sunset Universal Analytics and want users to move to Google Analytics 4.

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 😞

djshiflet · April 15, 2022

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

April 14, 2022

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.

April 13, 2022

12 hours ago, axelvargas said:

How have GA4 analytics worked for you?

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 😅

April 12, 2022

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

Bertie · March 30, 2022

Plugin available

First letting anyone know, I've made a dark mode plugin for Squarespace which does exactly what you described.

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

tuanphan · March 29, 2022

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

March 29, 2022

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)

creedon · February 23, 2022

On 2/12/2022 at 12:29 AM, garnetterri said:

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.

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.

February 23, 2022

On 2/19/2022 at 9:27 PM, bluecrown77 said:

Is there another option to achieve what I'm looking for? Thank you.

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

paul2009 · February 5, 2022

6 hours ago, paul2009 said:

...and never more shocked than me to discover that something is built in and doesn't require code 😲

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

tuanphan · February 5, 2022

Demo video

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 🙂

tuanphan · February 5, 2022

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 🙂

January 31, 2022

Cool 🙂 You can mark my reply as a correct one if it helped. And don't hesitate to get in touch if you ever need more help.

sayreambrosio · January 31, 2022

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

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by codeandtonic

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources