Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Posts posted by colin.irwin

  1. Find the collection id of the page in question. You do this by inspecting the source code and looking at the body tag. 


    Then insert the collection id into the following code (making sure you keep the # character in the code) and paste the edited code into your custom css area. 

    #collection-id-here {
    	header, footer {
    		display: none !important;


  2. Here's what you need to do. 

    First, wrap your code as follows

    window.Squarespace.onInitialize(Y, function(){
    // Your code here


    This will execute the code on each page load. 

    Next, you may need to modify the code so that it only runs for the specific page. You do this by testing the body tag for the presence of the specific collection id. 

  3. The problem with your example is that the image sits within a container that has overflow set to hidden. So you're setting the radius but in many cases the actual corners of the graphic are hidden. 

    imagine a piece of paper with a square cut out of it placed over a photo. Even if the photo underneath has rounded corners you can't see them because you're looking through a square hole. The solution, therefore, is to round the corners of the hole in the paper.

    Use the following

    .slide.sqs-gallery-design-grid-slide .image-slide-anchor {
    	border-radius: 5px;


  4. For Squarespace 7.0 - Sure.

    You need to install this Chrome Extension - https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

    Clicking its icon - image.png.3328a077466e02649c06123336f64779.png - in the address bar shows you the block ids for a page. 

    Copy the ids of the blocks you want to hide on mobile and paste them into the following

    @media only screen and (max-width:640px) {
    	#blockid1, #blockid2, , #blockid-and-so-on {
    		display: none !important;

    Then paste the result into your custom css area. 

    Note that the block ids in my example above should be deleted and replaced with the ones you copy from your site. 

    Also note that block ids must be separated by commas. 

  5. This would need to be a bespoke scripted solution that prevented the add to cart button from being clicked unless the minimum quantity rule was matched. 

    However, it would still be possible for the user to adjust quantity in the basket view (could be scripted to deal with this) and also in the checkout (cannot be scripted to deal with). 

  6. If you're using Squarespace 7.0 (NOT 7.1):

    • Use Chrome browser and use it to install the following Chrome extension - https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
    • Visit the page you want to modify the text on and click the extension's icon image.png.45e20e59014a9a458e6f62f8d7005e38.png
    • An overlay will appear showing all of the permanent collection and block ids on the page
    • Click the top left, collection overlay item and it will copy to your clipboard image.png.7ec3d6a7225d92a3a922762056c234bd.png
    • Now take a copy of your existing font color code and prefix it with the collection id. Paste the copy *after* the code you already have. That sets up the css so that it tweaks the color for everything and then applies the second color tweak only to relevant collection. 

    Without seeing your code it's difficult to give a specific code example but it's probably something like 

    @media only screen and (max-width: 640px) {
    	#something .something {
    		color: red;

    You would modify it with the collection ID as follows

    @media only screen and (max-width: 640px) {
    	#collection-535e7627e4b0140e264640b8 #something .something {
    		color: blue;

    NB - Above I use a collection ID from a page on  my site - you need the one from your page. 

  • Create New...