How can I prevent the index slideshow pausing on mouseover?

When you want a full-width slideshow on Squarespace, it’s really easy to do. Simply add a Gallery Page to an Index Page and set the Layout to Slideshow. Almost every aspect of the Slideshow can be changed using the Site Styles editor. You can add controls and indicators, set the autoplay duration and choose the transition.

However, there’s one thing that bugs us. If a visitor’s mouse is hovering anywhere within the slideshow, autoplay pauses. The visitor may not even know that there are other slides to see. There isn’t a setting in Site Styles that can prevent this. We’ve seen a few answers that suggest using CSS to switch off all ‘pointer events’ and whilst these work, they prevent visitors from using the controls to manually move through the images.

The CSS we’ve provided below prevents the slideshow from pausing, but it also allows the controls to be used.

/* Index Gallery Slideshow - prevent pause on hover - soundfocus.co.uk */
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper {
 pointer-events: none!important;
}
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper .Index-gallery-control {
  pointer-events: auto;
}

How can I hide Squarespace's Add-to-Cart button when an item is out of stock?

Squarespace Product Pages have a great design, especially on the newer templates in the Brine family, but I do find it strange that you can click on the Add-to-Cart button when an item has sold out. Squarespace do ‘grey it out’ but if you click or tap it, you’ll see the ugly grey apology box.

 The Add to Cart experience for out of stock products

The Add to Cart experience for out of stock products

I think it improves the User Experience (UX) to hide the button when an item is out of stock. You can easily do this for all out-of-stock items by adding the following to the Custom CSS page (on the Design > Advanced menu.

// Hide Add to Cart button when product is out of stock
.sold-out .ProductItem-details .sqs-add-to-cart-button {
  display: none;
}

If you want to hide the price for sold-out products on the product page and the product detail page, you can do this with the following CSS:

// Hide Price when product is out of stock
.sold-out .ProductItem-details .product-price, .sold-out .ProductList-overlay .ProductList-meta .product-price {
  display: none;
}

Note that this won’t remove the price from Summary Blocks.

Need something more complex when an item is out of stock? You can buy some developer time on the Contact Us for Coding page.

Brine: How can I make Gallery images monochrome and then colour when hovered?

On a Brine Index page, you can add Gallery pages and display these in various styles. Here’s some CSS that will display all the Gallery images in black-and-white until a visitor hovers over them. When hovered, the image will return to colour, with a short animation effect:

//Galleries fade from bw to colour on homepage.
.tweak-index-gallery-hover-style-fade .Index-gallery-item-image img {
     -webkit-filter: none;
     -moz-filter: none;
     filter: grayscale(100%);
     -webkit-transition: all 1s ease;
     transition: all 1s ease;
   }
   .tweak-index-gallery-hover-style-fade .Index-gallery-item-image img:hover {
     -webkit-filter: grayscale(0%);
     -moz-filter: grayscale(0%);
     filter: grayscale(0%);
     filter: none;
   }

How can I add H4 and H5 to Squarespace?

Want more heading formats than Squarespace provide? You can add more heading formats on any Squarespace template. It doesn’t matter if you on the Personal Plan (without Premium Features) because do it without Code Blocks. All you need is some Custom CSS and Markdown Blocks.

Let’s get started and experiment with some headings.

On a page of your Squarespace website, add a Markdown Block. Add the following text to the block:

# This is an example of Heading 1

## This is an example of Heading 2

### This is an example of Heading 3

#### This is an example of Heading 4

##### This is an example of Heading 5

When you save the page, you should see three formatted headings (H1, H2 and H3) followed by two unformatted headings because you don’t have styles for H4 and H5. As you can see, the number of hash characters indicates the type of heading. For more markdown information, see the Markdown Cheat Sheet provided by Squarespace.

Adding the Styles

Now go to **Design** > **Custom CSS** to add the styles for your new H4 and H5 headings. For example:

h4 {
  color: red;
  font-family: Rubik;
  font-weight: 300;
  font-size: 20px;
}
h5 {
  color: green;
  font-family: Rubik;
  font-weight: 300;
  font-size: 16px;
}

You can add whatever formatting you like between the braces to style the H4 and H5 headings, but the font-family must already be in use on your website. If you choose a font-family name that isn’t already selected in the Style Editor, it won’t display correctly.

Using this in practice

Whenever you want to add a H5 header to your website, add a Markdown Block and prefix the heading name with four hash characters like this:

##### This is my H5 title
 

How can I add line breaks to Gallery Grid titles?

In early September 2018, Squarespace removed the option to add HTML markup to item titles in all collections, including Gallery, Blog and Product collections. It was something that they never directly supported but that they ‘allowed’. When they changed the text editor, they took a decision to improve the security model by following best practice and no longer render the code. They just pass it through as text.

What does this mean?

Put simply, it means that if you now add “Name<br>Title” to display someone’s name and title on two lines (with a line break in between), it won’t work. Any titles you added before the change in September will continue to work, but if you edit them, the HTML is stripped out when you save it.

What can we do?

I’ve produced a workaround, but it requires some JavaScript. This means that it will only work on Business Plans or above (Personal Plans do not allow JavaScript as a way of upselling you the more expensive option). My workaround for Galleries is to add the title with a ‘#’ character instead of the line break. The code will remove the # character, and replace it with a line break.

Add the following code to the site’s (not page) code injection:

<!--- Wrap gallery titles on two lines (www.soundfocus.co.uk) ---><script>
window.Squarespace.onInitialize(Y, () => {
  var title = document.querySelectorAll('.image-slide-title');
  for (var sf = 0; sf < title.length; ++sf) {
    var item = title[sf]; 
    item.innerHTML = item.innerText.replace(/#/g, '<br>');
  }
});  
</script>

This works well for Galleries, but it wouldn’t work so well for Products because although a ‘#’ character would be removed from the title on the Product List or Product Detail pages, it would not be possible to remove the symbol from the checkout description or order confirmation emails. I’ve written a slightly different solution for Products, using a space, hyphen (-), space. This allows you to wrap something in titles whilst still looking normal in the checkout. I included the spaces so that product model numbers would not wrap, for example you wouldn’t want PXW-X70 to wrap.

<!--- Wrap product titles on two lines (www.soundfocus.co.uk) --->
<script>
window.Squarespace.onInitialize(Y, () => {
  var title = document.querySelectorAll('.ProductList-title, .ProductItem-details-title');
  for (var sf = 0; sf < title.length; ++sf) {
    var item = title[sf]; 
    item.innerHTML = item.innerText.replace(/ - /g, '<br>');
  }
}); 
</script>

Can I integrate a third party payment processor with Squarespace?

No. You cannot integrate another payment processor with Squarespace. It’s simply not possible because we only Squarespace themselves have access to the backend code. If you want to use the commerce features that are built into Squarespace you must use the payment processors that Squarespace provides (the recommended route).

The only way to use a third party payments system is to ignore the commerce features in Squarespace and use the third party payments system/store to manage your stock, your orders and your payments. There are many to choose from, for example SendOwl. Also, Shopify offers more than 100 different payment providers. By adding Shopify buttons to Squarespace, you can use the Shopify checkout and payment gateways. You can read how to do this and get a 14-day free trial of Shopify here.

Can I integrate Uber Eats with Squarespace?

Uber take the approach that you should provide a link to their website, rather than integrate. That way you reduce the number of links in the chain that could go down and prevent orders.

Bedford: Can I set a maximum site width?

Yes, if you are using a Bedford-family template and want to limit the site width and have borders down the left and right sides, you can add this to Custom CSS:

body {
    max-width: 1110px;
    margin: 0 auto;
    background-color: aliceblue;
}

Where max-width is the maximum width you require, and background-color will set the colour of the left and right borders.

Why doesn't my Squarespace code work until I refresh the page?

Why doesn’t this widget load on Squarespace?

Why is this code only working sometimes?

I've answered many questions on this subject. Each asks why a particular piece of code isn't working properly and it usually mentions that it only works after the page is refreshed or reloaded. Usually, the question refers to code that was found on one of the forums (usually Squarespace Answers) but it can also refer to scripts or ‘widgets’ that companies have produced to add features to a website.

So why is this happening? Ajax.

If you're using one of the newer Squarespace templates you’ll find that it uses a great technique called Ajax (Asynchronous JavaScript And XML). This allows your Squarespace site to change content dynamically without the need to reload the entire page. This makes your website faster because when a different page is selected in the navigation, only the canvas content is loaded. The header and footer are already in place and don’t reload unless header content has changed. This makes the page appear to load faster.

The technique also enables features like ‘lazy loading’ where a few images or blog posts are loaded initially, and then, as the user scrolls down the page, more images or posts appear just in time. It also allows sites to show a ‘quick view’ panel for products.

The downside is that if you’ve obtained some code that hasn’t been written to work with Ajax, it won’t work properly. Many code samples run when the page loads, but if Ajax is enabled, the page only loads for the initial page. After that, the content is updates using Ajax so the page never needs to load again.

So what can you do?

Rewrite the Code

If your code is behaving as I’ve described then it is not Ajax compatible. It was probably written prior to 2016 when Squarespace started adding Ajax to their templates. If you obtained the code when you purchased an add-on for Squarespace then it’s best to contact the supplier and ask them to update their code. Squarespace started adding Ajax to their templates in 2016 so it’s about time companies updated their ‘widgets’ to work with it.

If you found the code on an internet forum then you may not be so lucky. You could try to contact the author or you could post a new question on a forum, but you aren’t guaranteed an answer. Alternatively you could hire a developer to code an Ajax-compatible solution for you.

Disable Ajax

If you don’t want the Ajax features that improve your website, a quick workaround is to disable Ajax on your site. To disable Ajax:

Go to Design > Site Styles.

Scroll down to SITE: LOADING.

Uncheck Enable Ajax Loading.

When you save your changes, this workaround will get your code working but bear in mind that all the great Ajax features that improve your website’s performance are now disabled. Visitors love sites that load quickly and so do search engines.

How can I stop Google from caching a site while I'm working on it?

To prevent access to site content whilst you are building a site, add a site-wide password and then customise the lock screen.

When you add a site-wide password before you add content it tells search engines not to index your site.

If you’re hiding your site after it’s been active, setting a password will prevent search engines from indexing it further. Any content that search engines have indexed before you added the password will still appear in search results, but links to the pages will send visitors to the lock screen.

Can I edit the Squarespace Checkout?

No. The Squarespace checkout is locked down to ensure it remains secure and PCI-DSS compliant. It cannot be modified in any way, including HTML, CSS or JavaScript.

PCI-DSS compliance is a security standard for companies and organisations that handle payment information from consumers. Both of Squarespace’s payment processors, Stripe and PayPal, are PCI compliant.

How can I show a thank you message after a form submission?

When a visitor submits a form on a Squarespace website, you can add a post-submit message to be displayed on the same page. Often this is ‘lost’ on the page and visitor never sees it.

One potential solution is to add HTML formatting in the Post-Submit HTML box, instead of simple text. For example, to increase the font size, you could use:

 <p style="font-size:20px">Merci!</p>

A better solution is to create a ‘thank you’ page, and send visitors to this page after they’ve submitted the form. You can format the thank you page however you like, with headings, images and so on.

You can add HTML code to send the visitor to another page in the same Post-Submit HTML box. You’ll find more information about it in the Squarespace support article Advanced Form Block options.

Here’s an example. Create a ‘thank you’ page with the URL formsubmitted. You can use any URL, but in my example, I’ve used formsubmitted. Add Text Blocks, Image Blocks to the page to meet my needs.

Then, go back to the page with the form, edit the form and add the following in the Post Submit HTML box:

<script>
  window.location.replace("/formsubmitted");
</script>

So the box looks like this:

 Post Submit HTML box showing the code
 

Save the changes and then test the script. After you submit the form, you should be redirected to the new page.

Pacific Template: How can I hide the product quantity?

Want to hide the product quantity selection box on a Squarespace Pacific-family template?

You can hide it from product pages by adding this to Custom CSS:

// Pacific: Hide quantity input box on product pages
#productDetails .product-quantity-input {
  display: none;
}

You can also choose to hide the quantity column on the cart page using this:

// Pacific: Hide quantity column in Cart
.CartTableRow-itemQuantity-LwuRx, .CartTable-itemQuantity-225eT {
  display: none;
}

Brine: How can I make some prices POA?

If you don’t want your prices to appear on your website, Squarespace have added an option in the Style Editor that allows you to hide them.

However, this hides all prices, site-wide. If you only want to hide some of the prices, you need a custom solution using some CSS or some JavaScript.

Here are two solutions I put together for the Brine template. They are completely separate so you only need to use one or the other.

1. A JavaScript Solution

This solution makes prices appear as POA (Price on Application) when you set the price of the product to 0.00. When this script is added to the Code Injection Header box (in the Advanced Settings panel), all 0.00 prices will appear as POA instead.

<script>
  // Brine: Change 0.00 prices to POA
window.Squarespace.onInitialize(Y, function(){
  var products = document.querySelectorAll('.ProductItem, .ProductList-item'), i, len = products.length;
  for (i=0; i<len; i++) {
    var price = products[i].querySelector('.sqs-money-native');
    if (price.textContent === '0.00') {
      price.parentNode.textContent = 'POA';  
    }
  }
});
</script>

2. A Custom CSS Solution

This alternative solution uses CSS and the tags feature built into Squarespace. If you want a product to appear as POA (Price on Application), add a tag to the product called ‘POA’. Then add the CSS below to your site’s Custom CSS panel.

The first section adds an alternative phrase instead of the price. You can choose any wording you like instead of POA by changing line 3.

The second section hides the price.

The third section is optional, but improves the user’s experience. It hides the Add to Cart button and the quantity selector because these aren’t required if the price is hidden.

/* Hide prices on Brine template - by Soundfocus */
.tag-poa .ProductItem-summary .ProductItem-details .product-price:before {
  content: 'POA'; //Your wording here
}

/* Hide the price */
.tag-poa .ProductItem-summary .ProductItem-details .product-price .sqs-money-native {
  display: none;
}

/* Hide the add-to-cart button */
.tag-poa .ProductItem-summary .ProductItem-details {
  .sqs-add-to-cart-button-wrapper, .product-quantity-input {
  display: none;
  }
}

In Squarespace, what are the differences between #block-yui and #yui selectors?

In Squarespace there are some unique naming conventions for the classes and IDs on Squarespace, as well as some more obvious ones that are more self explanatory, like “site” and “Header”.

The main ones to be aware of are:

  • Collection IDs

  • Item IDs

  • YUI IDs

  • Block IDs

  • Classes

Collection IDs

Every Squarespace site comprises of various Collections, and each Collection is assigned an ID.

A Blog or Gallery is a Collection, and so is a (normal) Page. It's safe to use and is most valuable for making CSS changes to just one page, blog, or gallery. The Collection ID is always in the body tag and always starts with collection- followed by a random series of number and letters like this: collection-436fdec1c5b11b65476576a2.

Item IDs

In a Blog or Event Collection, you'll find that each post has an Item ID that looks very similar to the Collection ID, for example item-773432dfdd2e6b0db1daca6c545. These are also safe to use and are ideal for customising an individual post.

YUI IDs (Not Safe to Use)

These will appear throughout your page but beware the YUI IDs! These IDs are dynamically generated on page load by the YUI Javascript library underpinning Squarespace. If an ID starts with YUI, don't use it in your code or CSS, as your code will break the next time the page is refreshed or edited. These IDs look something like this: yui_4_23_1_2_4197904677657_302.

Block IDs

A better way to target elements within a page is to use Block IDs. These have 'yui' within the ID, but they never start with 'yui'; they always start with 'block'. They're safe to use and they are assigned to each and every Block that you add to your site. They look like this: block-yui_2_23_2_3_4356732145534_6467.

Classes

All Blocks have a class name specific to them and these are really useful for adjusting every Block of the same type on your site. Combine them with Collection IDs to adjust every Block of the same type on just one page. Blocks usually have fairly obvious class names such as “image-block” and “code-block”.

Lastly, don't forget that in CSS, IDs need to be prefixed with a hash (#) character and classes prefixed with a dot (.) character.

Squarespace Products: Changing 'SOLD OUT' to 'SOLD' (or something else)

When product stock is zero, Squarespace can (if configured in the Style Editor) display a ‘SOLD OUT’ label beside a product. Here’s a straightforward way to change the ‘SOLD OUT’ label to ‘SOLD’ or anything else.

Add the following to Custom CSS and change it as necessary:

 /* Change Sold Out to Sold */
 .product-mark.sold-out { 
   text-indent: -9999px;
 }
 .product-mark.sold-out:after {
   content: 'Sold'; 
   text-indent: 0; 
   display: block; 
   margin-top: -1em; 
 } 

How can I increase the size of the 'info' button on Momentum template?

The Gallery Slideshow homepage has a small info icon ( a small ‘i’) that visitors can click to see more information. However, it’s so small that visitors often miss it. To increase the size of the icon, add this to Custom CSS:

 .ctrl-button.info {
     right: 62px;
     bottom: 45px!important;
 }
 .icon-info:before {
     font-size: 104px;
 }

To fix the colour of the icon to one particular colour, use this:

.gallery-style-full-bleed:not(.show-info) .color-weight-topright-light .ctrl-button.info a.icon-info {
  color: #fff!important;
}

I’ve used #fff to set it to white, but you can use any hex colour code.

How can I display the month and year on Tudor template blog date circle?

On the Tudor template, blog dates are shown in a circle above the post. By default, the day (as a number) and the month are shown. To change this to the month and year requires some JavaScript.

To achieve this effect:

 Example of Tudor Blog with month and year

Add the following to the Header Code Injection:

<script>
   /* Put the month values here (in any language) */
   var month=new Array(12);
   month[0]="Jan";  month[1]="Feb";  month[2]="Mar";
   month[3]="Apr";  month[4]="May";  month[5]="Jun";
   month[6]="Jul";  month[7]="Aug";  month[8]="Sep";
   month[9]="Oct";  month[10]="Nov"; month[11]="Dec";
   Y.use('node', 'node-load', function(Y) {
     Y.on('domready', function() {
       Y.all('.dt-published.date-callout').each(
         function() {
            var pdate = new Date(this.getAttribute('datetime'));
            this.setHTML(month[pdate.getMonth()] + " " + pdate.getFullYear());
         }
       );
     }); // Y.on
   }); // Y.use
 </script>

How can I display filenames in a Squarespace Gallery Block?

There are many situations when you may want to display image filenames below images in a Gallery Grid block. This is particularly useful for photographers who may create a page in Squarespace for their client to view. Here's how to do it with a page of Gallery thumbnails.

Create a new page.

Add a Gallery Block to the page. Choose the Grid option.

Upload your images to the Gallery Block, or if they are already in a Gallery Page you can click on Use Existing Gallery and select the one you want. This avoids uploading them again.

On the Design tab, format the Gallery how you'd like it to display, i.e. the aspect ratio, the number of thumbnails per row, etc.

It's essential that you tick the Show Title check box. If you don't do this, you won't see the filenames!

Apply the settings and save the page.

In the Settings for this page (click the gear icon next to the page name) click the Advanced tab. In the PAGE HEADER CODE INJECTION box, paste the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
  $(document).ready(function($){
    $('.slide img').each(function(i) {
      $('.image-slide-title').eq(i).html('' + $(this).attr('alt').replace('.jpg', '') + '');
    });
  });
</script>

Save your settings and when the page is refreshed you'll see the filenames below them. You can change the filename formatting if you’d like.

Note that if you enter a formal title for an image (in the Gallery image properties) it will replace the filename. The code also removes .jpg extensions.

Is this the best solution? No, it’s just an example. If you want a robust solution for your Squarespace website that loads more quickly, you can book us to build one for you.

If your filenames are too long when shown on mobile, you may need to add some styling to the Custom CSS area to avoid them clipping. For example:

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
  line-height: 1.2em;
  white-space: pre-wrap;
  overflow: visible;
}