Changing Squarespace 7.0 'SOLD OUT' labels

21 Jul

How to affect all products

Squarespace can display a ‘SOLD OUT’ label beside a product when product stock is zero. You can enable this global setting for all products on your site as follows:

In Design > Site Styles check that the ‘Status Badges’ tweak is enabled. You may need to view a product list page for this setting to appear.
Go to Commerce > Product Status > Out of Stock. In the panel that opens, change the Sold Out description to your choice of wording. The change will affect all products and services across your store.

How to change only one product category

There are circumstances when you might want to change the Sold Out label for a specific selection of products, rather than for everything. For example, you may have a category of goods that are seasonal, and so you want to label these as ‘Out of Season’ rather than ‘Sold Out’. Or you may want to call out those products that are only available in store by showing an ‘Available in store only’ label.

In these circumstances, you can add a specific category or tag to these products (using Squarespace tags and categories) and then add some JavaScript to modify the labels on the products that have been categorised or tagged in this way.

For example, if you had a group of seasonal products that have been categorised as ‘Black Truffle’ then you could change the wording for these products by adding this to Settings > Advanced > Code Injection > FOOTER:

  
    <!--- Change Out of Stock Product Mark  ------------------------->
<!--- for specific product category on Squarespace 7.0 Brine ---->
<!--- Copyright Soundfocus Digital [sf.digital] ----------------->
<!--- Use freely in your code injection. Do NOT re-publish ------>
<script>
var oosCat = 'category-black-truffle';
var oosDesc = 'Out of Season';
var a=['\x6d\x65\x72\x63\x75\x72\x79\x3a\x6c\x6f\x61\x64','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72\x41\x6c\x6c','\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64','\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72','\x69\x6e\x6e\x65\x72\x54\x65\x78\x74','\x20\x2e\x70\x72\x6f\x64\x75\x63\x74\x2d\x6d\x61\x72\x6b\x2e\x73\x6f\x6c\x64\x2d\x6f\x75\x74','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72','\x6c\x65\x6e\x67\x74\x68'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x1c0));var b=function(c,d){c=c-0x0;var e=a[c];return e;};function sfOosInit(){if(document[b('\x30\x78\x36')]('\x2e'+oosCat+b('\x30\x78\x35'))){var c=document[b('\x30\x78\x31')]('\x2e'+oosCat+b('\x30\x78\x35'));for(var d=0x0;d<c[b('\x30\x78\x37')];d++)c[d][b('\x30\x78\x34')]=oosDesc;}}window[b('\x30\x78\x33')](b('\x30\x78\x30'),sfOosInit);document[b('\x30\x78\x33')](b('\x30\x78\x32'),sfOosInit);
</script>
  
  

If you are using a different category name, change the value of oosCat (out of stock category) to “category” plus your category name. For example, if the category is “red” then use ‘category-red’. If you are using a tag of “In-store”, use ‘tag-in-store’.

Change the value of oosDesc (out of stock description) to set the message that should be displayed.

Note that the code above was built to work with the rectangular sold out labels, not the circular ones. It may need some adjustment depending on your Site Styles.

Styling the colour

To change the background colour of the label, add the following to Design > Custom CSS:

  
    .ProductList-item.tag-coming-soon .product-mark.sold-out {
  background: black;
}

Substitute ‘tag-coming-soon’ for your choice of category or tag, as described in the section above, for example category-black-truffle. You can also substitute black for your preferred colour.