Simon

I wish SQS would go back to the old link editor, it was much better.

The new link editor is a nice idea. But maybe it needed more testing before release. The footer is a good example of how it's not working as expected, cutting off at the bottom of the browser, making it impossible to use. I've also noticed in Sections it pops up blocking my view of the item I am editing, which can be super annoying. Anyone else finding this a problem? The work around for the footer is to extend the footer depth, make your edit, then remove the extra space.

Well done on your first site. I would suggest four things for your site design. 1. I see your logo is at the bottom of the page; it should also be at the top too. I would suggest the logo at the top is just the typography part of the logo (crop off the tree) so it will fit. You could try positing the tree (smaller) to the left of the logo text. 2. The first section needs more space, perhaps 150px or more above and below the headline. The headline could be slightly rewritten to read as follows. Line 1: "Luxury Broadwindsor accommodation". Then line 2 below, "Where history meets comfort and elegance". So you are setting up the headline to match a Google search term, and then adding the second line as a tag line to describe the visitor experience. I would try using a lighter sans font for this, and making the first line larger. 3. Images. Give these a consistent margin and/or padding space around them, away from the all the text. This gives them more focus and definition (and also helps with the text content focus too). Be consistent about image shape, either use rounded corners or don't for all images (apart from image sliders). 4. Section divider boarders are a nice feature in Squarespace, but use them consistently or not at all. When using them, think about how they help communicate your brand and guest experience. If it does not enhance any of that, leave the boarder effect out. Allow space between sections for the content to breath. You might want to look at font pairings too. Perhaps headlines in a serif and text in a sans would be more elegant.

Tricky to do in just css with that layout. Maybe some JS to swap out default styles would be the way to go. Here's a basic css method to 'inject' content into the header using the button element to attach extra text and an icon: .header-actions-action .btn{display:inline;} //just so the text below lines up vertically with the button middle .header-actions-action::before { content: "\f05b"; white-space: pre;color:inherit; font-family: 'Material Symbols Outlined'; font-weight:900; margin-left: 10px;text-align:left; float:left; display:inline-block;} // if want the icon, you'll need to add the @media call for the font-family in the css (above) for the Material icon font, as well as the link to the Google Material Icon font in Custom Code... see Google Icons for details. .header-actions-action::after { content: "Verteran owned & operated \a" attr(title); white-space: pre; color:inherit; font-weight:900;margin-left: 5px;margin-right: 15px;float:left; display:inline-block;}

You can use your browser code inspector to find the section you want to work with. You might do something like this using the section data id: //do something with a section section[data-section-id="64f7fc55707fb51d61245c85"] { display:none; }

Try this: #siteWrapper.site-wrapper .sqs-block-button-element { font-size: 1.8rem !important; letter-spacing: -1px; }

Check Custom CSS (under Design) to see if the header is hidden, e.g. header {display:none;}. If it's only hidden on one page, check the specific page Settings (Pages) for any styles added to the header code. If it's not that, then check the Advanced Settings for Code Injection, where there may be a script or even a linked CSS style sheet controlling the header display.

If the back button is to a specific page section, have you tried using an anchor? /* Anchor on the page section just above the item you want to target */<span id="mything"></span> And on the back button the link is ../#mything

I use SnippetsLab to keep bits of custom CSS that I reuse or modify for different Squarespace sites. A great little app I can recommend it. But what if Squarespace had something like this built-in, so you can simply select a snippet of code (as you work) and save it for later to reuse across any of your Squarespace sites. Interested in comments and ideas. This is how I imagine it might work...

I found a solution for displaying PDFs in a Squarespace page, thanks to Joel Geraci on Codepen. https://codepen.io/practicalPDF/pen/PoZLWeq This solution works with Dropbox as the PDF source storage and the Adobe PDF API. It's actually pretty simple with just a few steps. If you work out how to make it play nice with Google Drive, please post a comment. 1. Start at this demo page. It gives you a good overview of what the setup is in general. https://documentservices.adobe.com/view-sdk-demo/index.html#/view/IN_LINE/Bodea Brochure.pdf 2. Next you need an API client ID from Adobe (you may need an Adobe account). You'll need this ID for the javascript in the next step. From that demo page you can generate sample code, and when you do, you'll notice there's a button to generate an ID called 'Get Credentials' (you just need the ID numbers, forget about the JS code example, there's a better version below). The ID will be associated with a specific domain name you elect to use. I found I needed to create one ID for 'squarespace.com' just while I set it up and tested it in the SQS CMS edit mode. Then I simply created a second ID using my clients' domain name (swapping out the old client ID in the JS code below). 3. From Codepen I grabbed this code by Joel Geraci and put the whole lot in a Code Block on my Squarespace page (I've updated viewer.js link as it was changed recently by Adobe): <script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script> <script type="text/javascript"> const dropboxLink = "https://www.dropbox.com/s/xxxxxxxxxxxxx/PDF-example.pdf?dl=0"; // replace this link with your own from Dropbox const clientId = "insert your API client ID here"; // insert your Adobe API client ID as described above const viewerOptions = { embedMode: "IN_LINE", // this stacks the PDF pages on your web page, which is very mobile friendly; see Adobe API docs for other layout options defaultViewMode: "FIT_PAGE", showDownloadPDF: false, showPrintPDF: false, showLeftHandPanel: true, showAnnotationTools: true }; document.addEventListener("adobe_dc_view_sdk.ready", function () { var urlToPDF = directLinkFromDropboxLink(dropboxLink); var adobeDCView = new AdobeDC.View({ clientId: clientId, // do not edit, particular to the URL API key from Adobe above divID: "adobe-dc-view" }); adobeDCView.previewFile( { content: { promise: fetchPDF(urlToPDF) }, metaData: { fileName: urlToPDF.split("/").slice(-1)[0] } }, viewerOptions ); }); // Utility Functions: // Return a Promise that fetches the PDF. function fetchPDF(urlToPDF) { return new Promise((resolve) => { fetch(urlToPDF) .then((resolve) => resolve.blob()) .then((blob) => { resolve(blob.arrayBuffer()); }) }) } // Converts a standard Dropbox link to a direct download link function directLinkFromDropboxLink(dropboxLink) { return dropboxLink.replace("www.dropbox.com", "dl.dropboxusercontent.com").replace("?dl=0", ""); } // Add arrayBuffer if necessary i.e. Safari (function () { if (Blob.arrayBuffer != "function") { Blob.prototype.arrayBuffer = myArrayBuffer; } function myArrayBuffer() { return new Promise((resolve) => { let fileReader = new FileReader(); fileReader.onload = () => { resolve(fileReader.result); }; fileReader.readAsArrayBuffer(this); }); } })(); </script> <!-- Display PDF viewer in this div --> <div id="adobe-dc-view" style="width: 100%;"></div>

Managing membership access seems so basic, but still nothing has been done. It is a real world problem, and I feel the SQS team have not been listening or maybe fully understanding what a shortcoming this is commercially. Fiddling around the eye candy edges of the CMS is not what we need right now for our clients. SQS need to read through the 3 pages of feedback here.

For a simple inverting of the header logo color site wide, this works. Place in your Custom CSS: //Invert header logo color on dark themed Sections .dark, .dark-bold, .black, .black-bold { &.header .header-title-logo a { filter: invert(1); -webkit-filter: invert(1); }} Thanks to https://spacesites.com.au/tips/squarespace-71-2-methods-to-swap-out-logos-colour-sections-and-specific-pages for the tip and cheat sheet on theme colors. Alternatively, you could switch out the logo graphic as described in the spacesite.com link above.

Member areas is a great idea, but still has a few annoying shortcomings, many already raised in the above comments. One of the issues is vetting who can join as a member. I thought I'd share how we worked around this for one client who had a free member area, but wanted to only have invited people join. It's a little clunky, but it works on a small scale for free memberships. First up, we grabbed the 'join' button html (using the browser inspect tool), then hide the 'join' button in the settings for 'Access Denied Screen' to stop folks signing up at all. Your 'Access Denied' page will now just have a sign in button. Next create a password protected page, and using the code block add your html 'join' button. This is the page you will use to add new members yourself, since they can't add themselves. <button class="sqs-editable-button sqs-button-element--primary join-button " onclick="UserAccountApi.joinMemberArea('621abd3953ae2d1f97886268', null, window.location.pathname, false, 'MEMBER_AREA_ACCESS_PAGE')"> Add new Member </button> As you can't add a new member if you are already logged in as a member, you must sign out first. I added a link to the account to sign out: /account/member-areas I also made that sign out link open in a new tab so I could easily hop back to my sign up page. Attempting to speed up the clunky process 🙂 Create a form on a public page of your site inviting people to apply for membership (or you could just do this with a personal email invite as we did). Anyway, you want to get their full name and email address, and any other details that help you decide to extend a free membership to them. With that info you can simply use your private sign up page (only you have access to), and create a password for them. To manage this process, I have spreadsheet with the invitees details, and I make up the password here before I use the sign up form. And moments before I sign them up, I email them their password. The email might look like this: Hi Jane You have been given free access to https://www.somewebsite.com/secretmemberarea. Use your email address jane@gmailish.com and this password: ABC27619*h Regards Simon Squarespace will automatically send the new member an email as soon as you add them on your sign up page, so send your personal email (above) just before you create their new account. You should also edit the Squarespace email so it makes sense too. That email only has a button link to sign in and no password (that's why you have to personally email them the password). Of course they can reset their password in the sign in box. While site guests cannot join, they will need a sign in. So we enabled a sign in link in the main site menu (which is just a link to the 'member area home page' you'd already have created). That's the hack. I do hope Squarespace improve on the current membership system. As a developer, it's just not that hard to do, so I don't know why they haven't done it yet. Hmmm. P.S. One last shared experience. We tried one of the 'plug in' memberships systems someone was promoting here as a solution. It's easy to setup and use, but it's dead easy to bypass if you want to look at any of your 'hidden' page content using your browser code inspection tool, which reveals all the html and links 😞

I know the Squarespace product team probably never read these posts, but I'd like to see more customisation available on the member signup form. I haven't been able to implement memberships for any of my clients as they all want more detail in the signup process, i.e. more than just an email and name, they want to collect other details as a way of qualifying membership, preventing just anyone signing up randomly and to know more about the member so they can segment their marketing.

As far as customising a ShareThis button, take a look at this tidy example on CodePen: https://codepen.io/brandonST/pen/BRLJNE Here is how I implemented it on a 7.1 site Follow the instructions on ShareThis, putting their script in the header first and 'activating' it on their site. Add your own HTML to a code block or insert in the "Post Blog Item Code Injection" option in 'Blog Settings' for example. <!-- ShareThis BEGIN --> <h4 class="st-custom-title"> Share this </h4> <div data-network="twitter" class="st-custom-button">Twitter</div> <div data-network="facebook" class="st-custom-button">Facebook</div> <div data-network="linkedin" class="st-custom-button">LinkedIn</div> <div data-network="email" class="st-custom-button">Email</div> <!-- ShareThis END --> To change or add other share links, consult the documentation on ShareThis here for the 'data-network' reference: https://sharethis.com/support/customization/how-to-set-custom-buttons/ This is the CSS used from the CodePen example, with a title and Material share icon I've added (see below for font details). /* Share This Button - Custom CSS */ .st-custom-title {margin-bottom:12px;} /* customise this margin spacing to suit your site */ .st-custom-title::before {font-family: "Material Icons"; content: "\e80d"; /* e80d is the share icon from the Material font */ display: inline-flex; vertical-align: top;} .st-custom-button[data-network] { background-color: #2c9de4; /* customise this color to suit your site */ display: inline-block; padding: 10px 15px; /* customise this padding to suit your site */ cursor: pointer; font-weight: bold; font-size:13px; color: #fff; &:hover, &:focus { text-decoration: none; background-color: #00c7ff; /* customise this color to suit your site */ } } The Material share icon CSS reference is "\e80d" and found here: https://fonts.google.com/icons?icon.query=social You'll also need to add the Material font link to your header code (I added mine to the site wide header through Advanced > Code Injection). Here's the code snippet from Google: <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"> Hope that helps.

Site URL: https://www.addy.co.nz/address-validation-javascript-code-generator I know there's been some questions in the past about address auto complete form fields. I wanted to share a solution for anyone wanting address lookup and auto complete for New Zealand addresses. This solution is from https://www.addy.co.nz/address-validation-javascript-code-generator. It's simple to implement, just follow the guide on the Addy website. Note this is for regular form blocks, not checkout forms. I haven't tried it checkout forms, but I don't know it would work as there's no customisation with the commerce checkout form. The steps are simple: Sign up for a free Addy account and get the API key Create a form block in Squarespace, adding text fields for each address line (not the Address module, as it won't give you the ID tags you'll need). For example, create input fields for: Address, Suburb, Town, Post Code. Using Chrome browser, code inspect (for example), look up the ID of each address field tag, then copy the tag to the Addy address validation javascript code generator. Using a text editor or similar, insert your API key into that snippet (that Addy gave you when you signed up). Paste the generated JS snippet into Squarespace (Advanced > Code Injection) in the Footer. Add the <script type="text/javascript"> header and </script> footer to the code snippet. That's it. So easy. Hope that helps all you Kiwis out there on Squarespace.

Having an option of removing the tax line altogether would be good. Legally it's an issue if an invoice states there is zero tax, when in fact there may be tax within the selling price. This happens in Australia and New Zealand where GST is often embedded in the retail price, and the tax is not always displayed. In some instances GST may or may not be included, but the purchase price is the same regardless (it can be a complex tax code).