( RESOURCES ) Browse through our collection of tips & tricks for Squarespace, Shopify, web design, and business. It’s a digital trove of creative ideas right at your fingertips.
How to Add a Custom Back to Top Button in Squarespace
Easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site.
Easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site. With just a few steps, you can give users a quick way to return back to the top of the page, improving navigation and enhancing user experience.
How to Add a Custom Back to top Button in Squarespace
a.
Squarespace
b.
Video
Introduction
In this guide, we’ll dive into an easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site. With just a few steps, you can give users a quick way to return to the top of the page, improving navigation and enhancing user experience. Let’s get started!
Why Add a Scroll-to-Top Button?
Adding a scroll-to-top button is an excellent way to provide users with an effortless way to navigate back up without excessive scrolling. This is especially helpful on longer pages. Plus, with custom graphics and branding, you can keep your design both functional and visually appealing.
Step 1: Adding Your Button Graphic to the Footer
Go to the Footer Section
Scroll down to the footer of your page. We’ll add an image here, which will act as our scroll-to-top button once we apply some coding tweaks.Insert a Placeholder Image
In the footer, add a small image anywhere—it will be hidden later. Make sure it doesn’t interfere with existing content, so resize it if necessary.Select Your Custom Graphic
From your image library, pick a graphic that aligns with your site’s branding. For this tutorial, I pre-uploaded a scroll-to-top graphic designed to match my branding. Choose something that suits your style!Add Alt Text for Accessibility
For accessibility, label the alt text as “Scroll to Top.”Link the Image to the Top of the Page
Set the image link to#top. To ensure it opens in the same tab, turn off the “Open in New Tab” toggle.Positioning
For a standard placement, drag the image to the bottom-right corner of the footer.Save Your Changes
Step 2: Adding the Code
With the image in place, we’ll add some code to bring it to life.
Open the Code Injection Section
From your main menu, search for “Code” to access the Code Injection area.Paste the Provided Script
Copy the script provided in this resource and paste it into the footer section of the Code Injection panel. This script controls the button’s visibility, ensuring it only appears once the user scrolls.
<script>
document.addEventListener('DOMContentLoaded',()=>{const b=document.body,l=document.querySelector('footer a[href="#top"]'),f=l?.closest('.fe-block');f?.classList.add('scroll-to-top');const t=()=>b.classList.toggle('is-scrolled',window.scrollY>200);window.addEventListener('scroll',t);t()});
</script>3. Add Custom CSS
To access the Custom CSS panel, type “CSS” in the search bar or use the forward-slash (/) shortcut. If you have existing CSS, add the new code at the bottom. This CSS code will style and position the scroll-to-top button, setting dimensions and placement on the screen.
html{scroll-behavior:smooth}.fe-block.scroll-to-top{opacity:0;transition:.5s}.fe-block.scroll-to-top a{display:none}@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-top{opacity:1}body.is-scrolled .fe-block.scroll-to-top a{display:block}body:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-top{position:fixed;grid-area:unset!important;bottom:0;right:0}body:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections{z-index:11}}
.fe-block.scroll-to-top {
right:2vw !important;
bottom:2vw !important;
width:100px;
height:100px;
}
Step 3: Customize the Look and Position
Change the Button’s Dimensions
Adjust the width and height properties as desired. The default is set to 100 pixels, but feel free to tweak it based on your design.
Refine Positioning
The right and bottom CSS declarations control the button’s distance from the screen’s edges. Play around with these values to position the button exactly where you want.
How to Create a Fixed Split Screen Layout in Squarespace
Learn how to create a split screen layout in Squarespace with sticky scrolling elements - no coding required!
Creating a split-screen layout with sticky and scrolling elements in Squarespace just got easier! Thanks to the new Fluid Engine, you can now design this layout by maximizing built-in features, including the pinning function. Here's a step-by-step guide to help you achieve this fixed split section in Squarespace effect without any coding.
How to Create a Fixed Split Screen Layout in Squarespace
a.
Squarespace
b.
Video
Introduction
Creating a split-screen layout with sticky and scrolling elements in Squarespace just got easier! Thanks to the new Fluid Engine, you can now design this layout by maximizing built-in features, including the pinning function. Here's a step-by-step guide to help you achieve this fixed split section in Squarespace effect without any coding.
Split-screen designs are visually engaging especially for creatively presenting galleries and lists. Previously, this required extensive coding, but with Squarespace 7.1 and Fluid Engine, we can make it happen through the interface itself. Let’s dive into how to build this from scratch.
Step 1: Setting Up the Section and Grid
Add a Blank Section: Begin by adding a new section to your page. Choose the blank section to have full control over element placement.
Activate the Grid: For easy alignment, press the
Gkey to display the grid. This will help visualize where your elements will sit on the screen.Adjust Padding and Rows:
Turn off full-screen padding by deselecting the “Fill Screen” option in the section settings.
Adjust the row height to fit more elements as you progress.
Set the horizontal gap to zero to center-align your shape blocks later.
Step 2: Adding Blocks for the Left Screen
Image Block: Upload and insert your main image on the left side. If you've pre-uploaded assets, just select the image from your library.
Text Block: Anchor your left side with a text block. Drag it flush to the edge for a true split-screen look.
Style the Text Block:
Add padding around the text to keep it visually balanced across devices.
Align the text vertically to the center of the block for a cohesive appearance.
Vertical Centering: Center-align the text by using the layout options to ensure it remains in
Step 3: Building the Right Side and Adding Decorative Elements
Shape Blocks: To create a colored background or decorative elements:
Insert a shape block and adjust its opacity and padding. Use overlapping elements for added visual depth.Make Adjustments: You may copy-paste additional elements by pressing
Command+CandCommand+Vto fill out the section.
Step 4: Implementing the Sticky Effect
Pin Text and Images: Select the element you want to stay fixed and click the pin icon.
For Centered Sticky Elements, choose the center option to keep the element at the screen's center as you scroll. For Top-Aligned Sticky Elements, pin at the top if you want images or text to remain at the top.Add Offset (Optional): For breathing room, add a slight offset (e.g., 32 pixels) to prevent elements from sticking directly to the screen's edge.
Step 5: Mobile Layout Adjustments
Fluid Engine allows independent adjustments for mobile views, so your design doesn’t have to match the desktop layout.
Reposition Elements for Mobile: Adjust each block’s placement to ensure the layout is clean and functional on smaller screens.
Skip Sticky Elements on Mobile: To optimize space, avoid using the pinning feature on mobile. Sticky elements can crowd the limited space available.
For more design tools and inspiration, visit our Creative Components Library for free and premium assets. And if you’re interested in learning how to code on Squarespace, check out our course on becoming a sought-after Squarespace designer, Standout Squarespace.
Is coding hard?
Why I believe coding isn’t as complicated as people— and even some experts—claim it to be and 3 tips to simplify your learning process.
I hear this question a lot, and Mia recently asked me the same: Is coding hard?
So many people get overwhelmed just imagining how hard coding could be, they give up before even trying. I made this video in response to Mia’s questions, but also for those of you who may be struggling with similar doubts.
IS CoDING HARD?
People often hesitate to learn code because they feel it could be more than they can handle. There are many misconceptions about code after all, so some assume that perhaps coding is not for them. This is the hardest part of learning how to code I believe—overcoming these initial hesitations. It gets easier as soon as you decide to simply start.
How can we learn code the easy way?
1. Learn one website platform or coding language at a time.
Focus on mastering one website platform or coding language at a time rather than trying to learn everything at once. For example: it's beneficial to have a general understanding of various website builders, but becoming an expert in one platform is a much more effective strategy.
In my case, when I decided to move ahead with Squarespace as my main website builder, I invested a lot of time understanding its features, limitations, and possible solutions. That effort paid off in eventually being able to build efficiently and beautifully with the platform, developing unique troubleshooting techniques that I otherwise may not have discovered if I were caught up in working on multiple builders at a time.
2. Start simple and progress gradually.
This step-by-step approach allows you to build confidence having a thorough understanding of fundamental principles before learning more complex concepts. Essentially, our goal is to make sure we avoid any feelings of overwhelm or dread as you work your way into learning more advanced techniques.
And this is exactly how I set up my Standout Squarespace and Standout Shopify programs, starting off with foundational know-how on how the platforms work, best practices for modern websites as well as wireframing and typography tricks before easing into learning coding techniques, starting off with HTML and CSS, adding decorative elements with pseudo-elements and eventually incorporating animations.
3. Learn with a mentor and a community.
Seek out web designer & developer communities and consider meeting up with them in person to share experiences, ask questions, and learn from others. Why not reach out to your favorite design studio or an expert you admire for mentorship? Whatever the case, try not to learn code alone. It’s more satisfying growing in your craft alongside like-minds, and you’ll go much farther.
So, is coding REALLY hard?
No. Coding is not hard, but it does require hard work. By focusing on a specific website platform, learning progressively from the basics to more advanced concepts, and learning alongside a supportive community, you can break down the coding process and build your skills with more ease.
I want you to remember that every expert was once a beginner–this is my personal story as well. With consistent practice, a whole lot of patience and support from other experts, you too can unravel the craft of code and discover all that you can become and create with it.
An invitation to learn design and code with Standout Squarespace & Standout Shopify
I designed my web design & coding flagship programs Standout Squarespace and Standout Shopify with beginners in mind. As a self-taught website designer myself, I know how it feels to not know where to begin or move forward with my learning process whenever I got stuck.
I keep thinking back to the earlier days of my learning journey and how I would’ve preferred to learn code. For one, I would’ve avoided those many days of burnout had I learned all basic knowledge first before easing to more advanced concepts. It also would’ve been better if I reached out to a mentor or a learning group for more support, which makes all the difference if you ask me.
All of these things I wish I had access to when I was still starting out, I made sure to incorporate in the Standout courses—lessons laid out from essentials to more advanced coding techniques and an organized Knowledge Base with design inspiration, coding cheat sheets, plug-and-play code snippets and business resources to name a few.
Learn more about our design & code course for Squarespace & Shopify.
How to add accessible Accordions to Squarespace product pages
Add accordions to Squarespace product details page information area
Here’s how to add accordion menus to your Squarespace product detail pages.
How to add accessible Accordions to Squarespace product pages
a.
Squarespace
b.
Video
Introduction
Accordion menus are a great way to present product information in a clean, organized layout, letting customers view important details before they add items to their cart. Here’s how to add accordion menus to your Squarespace product detail pages.
Step 1: Start Adding Your Accordion Content
Go to Product Details
Begin by navigating to the product detail page where you want the accordion to appear. Look for the Description section—this is where you’ll add your accordion content.Create Accordion Titles
Start by entering the first title for your accordion menu. Make sure to format each title as Heading Four (H4) to ensure proper display and functionality.Add Content Under Each Title
After entering a title, press Enter and add the relevant text or details that you want to appear under that section. This will be the collapsible content associated with the title.Repeat for Additional Sections
Add any additional accordion sections by repeating the same process—enter the next title, format it as Heading Four, and add the relevant text beneath it. You can create as many accordion sections as you need.
Step 2: Adding Code for the Accordion Feature
Access the Accordion Code
We have a free accordion menu component available on our Creative Components page. Simply click the link provided in the video description to access it, and copy the code needed for your accordion.
Insert Code into Footer Injection Area
Go to the Injection Area in Squarespace. To find it, click the search icon and type “injection.”
In the footer injection area, paste the copied accordion code.
Apply Custom CSS
Copy the custom CSS provided on the Creative Components page.
Access the Custom CSS Area by searching for “CSS” in Squarespace.
Step 3: Save and Test Your Accordion Menus
Once the code is in place, save your changes and refresh the page to see the accordion menu in action. The titles should now expand and collapse as you click on them, neatly organizing the product information on your page.
Accessibility Features
These accordion menus are designed to be accessible for users who navigate with keyboards only. Customers can open and close each section using the Return key or Space bar, which is an essential feature for an inclusive web experience.
Additional Resources
If you’re interested in more stylish components or other solutions for your Squarespace or Shopify site, check out our Creative Components page for free resources. You can also subscribe to our channel to stay updated with new tutorials and resources.
How to Provide Squarespace Template Support
Introducing Template Wizard: AI-Powered Support for Squarespace Template Customers
Considering design intensives? Here's a good look at what they are, how they differ from templates or fully custom designs, and which clients need them.
How to provide squarespace template support
a.
Business
b.
Article
Introduction
Hi there! We've recently launched an exciting new workshop focused on selling Squarespace templates. This workshop is designed to teach you how to launch your very own Squarespace template shop using our proven systems.
The Template Wizard
One of the standout features of our workshop is the introduction of an AI-powered help center, which we call the Template Wizard. This innovative tool serves as an AI-powered knowledge base to support your template customers.
Addressing Common Concerns
We're aware that many Squarespace designers shy away from selling templates due to the daunting task of creating numerous tutorials for their customers. The Template Wizard is our solution to eliminate this barrier.
The Framework Behind Template Wizard
The Template Wizard is built on the principle that most templates function similarly, especially when you utilize the framework shared in our Selling Templates Masterclass.
Customer Experience After Purchase
Let's walk through what your customers will experience after purchasing a template:
They'll be directed to a password-protected page on your website.
This page link will be sent to them via email immediately after purchase (if you follow our automation process).
The page will outline clear steps for getting started with their new template.
Inside the Template Wizard
Here's a preview of what the Template Wizard looks like:
It's hosted on our website (you'll receive access details upon enrolling in the Selling Squarespace Templates course).
The information is thoughtfully organized to provide just the right amount of guidance without overwhelming your customers.
Key Features:
Getting Started Module:
Instructions on backing up sections before editing
Tips for previewing their website effectively
Customization Essentials:
Covers only the most crucial aspects of website customization
Keeps videos concise, as we've learned template customers prefer brevity
Squarespace Basics Module:
Available for those who need to brush up on fundamentals
Includes guidance on aspects like e-commerce or blogging that may not be covered by all templates
Automatic Updates:
We keep the videos current, updating them whenever Squarespace changes its interface
Searchable Content:
Customers can easily find specific information without watching entire videos
AI-Assisted Support
The most remarkable feature of the Template Wizard is its AI-assisted support:
Customers can ask questions using the "Ask" button.
Unlike general AI assistants, our Template Wizard only references information curated in its knowledge base.
It provides accurate, relevant answers without making up information.
Example:
When asked about setting up a newsletter block, the AI will:
Provide step-by-step instructions
Point to the primary resource (video)
Give the exact timestamp where the process is demonstrated
The Advantage Over Traditional Support
After years of selling Squarespace templates, we've realized:
Most customer questions are actually covered in existing tutorials.
Customers purchase templates to launch their sites quickly.
The Template Wizard helps them find answers fast, reducing the time you spend answering email queries.
Streamlined Support Process
In our template guides, we encourage customers to:
First, seek support via the Template Wizard
Only email for support with specific template-related questions that aren't addressed by the AI
By implementing the Template Wizard, you'll be able to provide efficient, 24/7 support to your template customers while freeing up your time to focus on creating and selling more templates.
Convinced that templates are the way to go?
You’ll want to check out my masterclass on this topic, Selling Squarespace Templates. It’s your short course on everything you need to know about template building, delivery, and support—along with a comprehensive template toolkit to get you started.
Five ways to Sell Templates to Small Audiences
Is Selling Squarespace Templates for you? Here are five ways creating and selling Squarespace Templates can benefit your studio.
Considering design intensives? Here's a good look at what they are, how they differ from templates or fully custom designs, and which clients need them.
FIVE WAYS TO to sell templates to small audiences
a.
Business
b.
Article
Introduction
Many designers believe that website templates are a brilliant source of passive income—at least if you could somehow manage to get a lot of eyes looking your way. To err on the side of caution, they tend to do one of two things: sell their templates on online marketplaces like Etsy or wait until they’ve amassed a sizeable audience before setting up shop.
It might surprise you that when I began Squarestylist I took neither of those options. In fact, I went ahead and launched my first template on my site with next to no followers on Instagram.
Success did not come to me spontaneously. It took months of building my audience before my templates transformed into a sustainable source of revenue on their own. Yet I found from experience that templates can support your studio in unexpected ways—ones that can work for you even while you’re still growing your reach.
Here are five interesting ideas to get the most out of your own website templates:
1. Treat templates as creative playgrounds
One upside to not having a massive following that awaits your designs at every turn is that you have space to explore what stirs your curiosity without fearing judgment. What are the colors, textures, patterns that excite you? Sketch your ideas on paper. Gather your visual inspirations on a moodboard. Or better yet, put them together in a template of your own.
Take a moment of introspection to reflect on your aesthetic skills and sensibilities so they lead you to the types of clients you want to serve—not the other way around.
Style is a design signature that you define over time the more you create, so continuous hands-on practice will only strengthen your distinct body of work. The more effort you put into this upfront, the better you will attract the attention of like-minded clientele in the future.
2. Showcase templates as portfolio pieces
Breaking into the web design industry can seem like a tangled mess of prerequisites: to get new clients, you need a portfolio; to build a portfolio, you need clients.
Like many designers before me I opted to offer my services at the lowest possible price. My first Squarespace site earned me $500. In retrospect, I shouldn’t have been surprised that this client referred me to more people who expected websites for free or cheap.
The truth is, building your portfolio is a steady act of building trust—trust that you are capable of performing the task expected of you as a professional without wasting someone’s time or resources. But there are other ways of earning that trust, especially ones that do not involve trading off your unpaid labor.
Upon promoting my templates as part of my personal project, I didn’t just get purchases from bootstrapped customers; I also received foot traffic from clients who wanted something special. Whenever I asked them for their website inspirations, they said the same thing: “I saw your template and knew that I wanted you to recreate that aesthetic for my brand.”
To their eyes, a live Squarespace demo was a more effective representation of what I can do for their business than static mockups or testimonials.
3. Utilize templates as robust foundation
Who says only your customers can use the templates you create?
A template isn’t just a digital offering for passive income; it can also be the starting point for your fully custom projects if you want it to be. Think of it as setting the tone in the staging process. Your personal template places your signature sections and go-to presets within arm’s reach so you don’t have to go through each and every toggle in the settings.
Not to mention it saves you from staring at a blank page in Figma and Squarespace alike, given that you’re just modifying a copy of your existing design prototype.
You’d be most familiar with the features and constraints of your own template—what you can and cannot change within the framework. This helps with managing client expectations all throughout. By the end of the project they’ll be delighted to receive a website that looks nothing like the template you started with, since it’s now made uniquely theirs.
Of course, you can always choose to designate your base template exclusively for internal use rather than making it available to the public.
4. Offer templates as accessible downsells
Every now and then you’d come across inquiries that do not yet have the financial capacity to work with you one-on-one. This can be a good sign that your studio is starting to gain traction in terms of audience. Instead of turning them down altogether or lowering your prices to accommodate, why not point them towards your template shop?
If they have more time than money on their hands, they’d appreciate you lending your expertise in a way that makes sense for their business.
There are more cost-efficient ways you can deliver templates to these types of prospects. For instance, you can offer template reskins then have their website ready by the end of the day (or week) via design intensives. Templates in this context grant you the flexibility to match your support with the investment they can readily commit.
5. Create templates for compelling collaborations
You may not realize it, but a website template is a digital product that lends itself to potential collaborations. Think back to your ideal client and the additional services they still need for their business to flourish. These are the service providers you’d want to keep tabs on.
The nature of your partnership would depend on their level of involvement with the project. Affiliate marketing and virtual events promote your templates to their audience in exchange for a cut of every sale. Co-creation invites them into the template design process to ensure it caters to their specific niche. Bundling features your website template alongside similar templates and guides for a more holistic service package. The choice is all yours.
Convinced that templates are the way to go?
You’ll want to check out my masterclass on this topic, Selling Squarespace Templates. It’s your short course on everything you need to know about template building, delivery, and support—along with a comprehensive template toolkit to get you started.
Add Custom Fonts to Squarespace: using our Magical Tool
The most efficient method to add your own custom fonts to squarespace. Meet the magical tool, CustomFontWiz
In this video, I introduce you to Custom Font Wiz, a magical tool I developed to make adding your own custom fonts to Squarespace faster and easier.
Add Custom Fonts to Squarespace
a.
Squarespace
b.
Video Walkthrough
Introduction
What if I told you that it's going to be a lot easier to install custom fonts to your Squarespace website? In this video, I introduce you to Custom Font Wiz, a magical tool I developed to make adding your own custom fonts to Squarespace faster and easier.
Whether you're customizing your own Squarespace website or you're a designer building sites for clients, CustomFont Wiz will be a huge time and energy saver. If you are selling Squarespace templates, you can now easily point your customers to this tutorial to make it easy for them to customize their templates.
Timestamped Overview
0:00 Introduction: Easier Custom Font Installation for Squarespace
0:08 Introducing the tool, CustomFontWiz
0:32 Benefits of using the magical tool for Designers and Template Sellers
2:14 Step-by-Step Guide: Adding custom fonts to squarespace
4:04 Which font format to use: woff2 vs woff vs otf
5:28 Importance of Font Licensing
6:45 Example of Using High-Quality Free Fonts
8:15 Uploading and Generating Font File Path
10:06 Applying Custom Fonts to Different Elements
11:56 Additional Tips for Efficient Custom Font Application
Why CustomFontWiz?
Squarespace has a wide selection of fonts available via the Site Styles panel, but there might also be fonts from great foundries you wish to install on your Squarespace website. What makes this tool magical is that it makes adding custom fonts to Squarespace incredibly easy and fast.
How to Use CustomFontWiz
Step 1: Fill Out the Form
All we need to do is fill out this form with the font details like font path and font name. Then we may choose to apply the font to the heading, the body, or the buttons and just choose the applicable font format.
Step 2: Copy and Paste the Code
Whatever code is generated in the right panel, we can easily copy and paste it into the custom CSS panel of our site. Upon saving, our custom font will now be applied throughout the instances of the element that we chose.
Step 3: Assigning Fonts to Elements
I assure you that this is the most efficient method out there because if we wish to use the same custom font on any other element of the website, all we need to do is head to the assign styles panel of our Squarespace site and choose the element where we wish to apply the custom font.
For example, if we want this custom font to be applied to the site navigation, I can choose the site navigation option under Assign Styles. If I choose the heading option, then our custom font will also be applied to this element.
Comparison with Existing Methods
You've probably watched countless tutorials on adding custom fonts, but these existing methods require writing new code. If you wish to install a custom font on specific elements, you'd have to spend time looking for the code and writing the code for every element where you wish to apply the custom font. This is why I developed this tool to make this process a lot easier.
Detailed Walkthrough of CustomFontWiz
Now allow me to walk you through the step-by-step process of how to use this tool. You can access the tool through this link.
1. Filling Out Font Details
Our first step is to fill out these details. The first field is where we'll supply the font file path, which is the link to our font file.
Check Font Licensing Details Before Using Custom Font
But make sure that before you use any custom fonts on your live Squarespace websites, you have the proper web license to use it. Note that the web license may be different from the desktop license, so if you obtained the desktop license, make sure that you also pay for the web license.
In some cases, font foundries also require annual payment for the font web licenses, so please make sure you check the fine print of any font that you use for your website.
There are also high-quality free fonts like these ones from Colletivo typefaces, and all they ask is for us to credit them when we use the fonts on our projects. There might be special cases, though, where this free license isn't applicable. So for every font that you use on websites, please make sure that you read the dedicated licensing pages.
Example: Using Messapia
For example, I'd like to use this one called Messapia by Luca Marsano.
When we click the download button for this font, the downloaded folder contains desktop and web fonts.
For our use case, we need the web font, and for web use, the most recommended format is woff2, but if it isn't available, then we can use woff.
The font format OTF or OpenType is typically used for desktop, but then there are fonts, especially those from independent foundries or from Creative Market, that are only available via this OpenType format. And while the woff2 and woff formats are more optimized for web use, we can still use the OTF format. But then please make sure that you have the web license to use the font.
Once we have the font file and the proper web license, we may now proceed with generating the file path.
3. Generating the File Path by Uploading the Font File
To do so, we go to the CSS panel. We can click the search icon and start searching for CSS. Click the Custom CSS option.
Should there be existing code in this panel, for example, this one, all we need to do is hit command arrow down on our keyboard or control arrow down if you are using a Mac computer. So that's command arrow down, and once we're at the very last line of the code, we hit enter thrice and this is where we can safely add any additional codes.
Don't worry about disrupting any codes because we will not save any changes that we'll do in this panel. We'll hit cancel in a while. We just need to upload the font via this custom files field.
So if I click this custom files dropdown, we will be prompted to add any images or fonts. We may use this plus button, or we may simply drag and drop the woff2 file. As I mentioned, because the woff2 file is the most optimized for the web, I am using it over the woff version.
Once the font is uploaded, we may again place our cursor at the very end of our custom CSS panel, and once we click the custom files again and click the woff2 file that we just uploaded, notice how this custom file path is generated.
All we need to do is copy this link to our clipboard or our notes by hitting command c or control c, and then MAKE SURE TO HIT THE CANCEL BUTTON such that any of these changes will not be saved.
4. Applying the Font
Pasting the Code
The link that we copied is what we'll paste to our font file path field and then we can assign any font name for this one. Our font name is Messapia and the element where I wish to apply this font is the heading and the font format right here is woff2.
Once I click the generate code button, it will supply us with the code that we can copy and paste to the custom CSS panel. Notice as soon as I paste this set of codes, the heading instances are changed to our new font style, which is Messapia. It's that fast and easy, and we just need to repeat the same process if we wish to have custom fonts for our paragraphs and buttons.
Customizing Paragraphs and Buttons
For example, if I wish to use this custom font as our paragraph and button font, I generated the font file path once again and assigned the font name. This time I'd like to apply it to the body or the paragraph. And then again using the font format woff2.
Here’s an example using Absans as font for body and buttons
So when I generate the code for the Absans font targeting the body, and copy this, if I paste it right on Custom CSS, notice that our paragraph fonts are now using the Absans font. I try to minimize the number of custom fonts for each website because each font contributes to the loading time. So in this case, I'd like to use the body font as my button font as well.
So I'll only need to repeat the same process and choose buttons as the element, hit generate code and copy then paste the same on Custom CSS, this will then now allow me to apply this custom font Absans to our buttons, and this font will now be applied to all button styles, primary, secondary, and tertiary.
Important Notes
Placing FontWiz Codes at the Start
Here's an important note.
If your custom CSS panel has existing codes, it's best for us to ADD THE CODES GENERATED by the Fontwiz tool TO THE VERY FIRST LINES of the panel.
To do that, we need to place our cursor at the very beginning and then hit the return key or the enter key multiple times. Twenty should be enough. And then whatever code is generated by Fontwiz, we simply paste it right here at the very start.
And if we need to add more FontWiz codes, simply hit enter and again these will be added at the start before any of the existing codes. We'll then save these changes and notice that our custom fonts are now applied.
Accessing and Assigning Custom Fonts
As I mentioned, if we wish to access these custom fonts, all we need to do is head to our site styles panel and under fonts, we click assign styles. We may choose the element where we wish to apply the custom font to.
For example, if I wish the Site Title to adopt our custom font for the heading, I'll switch to the heading font.
Notice how our Messapia font was applied, and if I want our custom font for paragraph or body to be applied, then I choose paragraph.
Advanced Typography Options and Applying Different Type Systems
There are so many more possibilities with regard to typography on our Squarespace sites if we just add a little bit of code magic. For example, we may also apply a different font style within one line such as this one. All we need to do is hit this italicize option to apply this accent font. This is something that I'll discuss in an upcoming video, so please make sure to subscribe to our channel.
It's also possible for us to apply a different type system to a specific page of the site. For example, in this website, I have this type system on one page and when I switch to another page, I applied a different type system. This is possible via code and this is something that I discuss in detail in my signature program, Standout Squarespace. You may check out the description link below.
Sharing and Additional Resources
Lastly, there is an optional step in our CustomFontWiz tool, and that's to share and subscribe. I highly encourage you to share this tool with other Squarespace business owners and designers if you find this helpful. This tool is actually one of the many new resources that we are preparing for the revamp of our Selling Squarespace Templates course. This course was originally available only inside the Standout Squarespace program, but it will now be available as a standalone course. So if you'd like to join the waitlist, simply click this button and fill out the details.
I hope you find the CustomFontWiz tool handy, and if you have suggestions on how to improve this tool, please comment down below. To receive updates on future resources on Squarespace, Shopify, and running your design business, please subscribe to this channel.
Add Vertical Lines in Squarespace
Here’s the easiest way to add vertical lines to your Squarespace website.
I'm excited to show you the best and simplest method for adding vertical line borders to your Squarespace site. The best part? We're just using built-in blocks, making it a breeze for clients to edit
ADD Vertical Lines in Squarespace
a.
Squarespace
b.
Video Walkthrough
Introduction
I'm excited to show you the best and simplest method for adding vertical line borders to your Squarespace site. The best part? We're just using built-in blocks, making it a breeze for clients to edit. Changing the line color is hassle-free too – no need to touch any code! The color can be set right in the block settings. Plus, by combining this vertical border technique with built-in horizontal line blocks, you can effortlessly create a grid layout. And yes, it is using Squarespace's cutting-edge new Fluid Editor.
Timestamped Overview
00:00 Introduction by Rache from Squarestylist.
00:04 Overview of Adding vertical lines in Squarespace.
00:10 Adding a blank section and using the grid.
00:36 Using the shape block for vertical lines.
01:08 Adding custom CSS for shape transformation.
01:40 Changing the line color using stroke options.
02:01 Adding text and images to the layout.
02:20 Horizontal lines in mobile view.
02:55 Creating grid layouts with vertical and horizontal lines.
07:42 Conclusion and additional resources for learning.
Resources
Hi there, I'm Rache from Squarestylist. In this video, I'm going to walk you through how to easily add vertical lines to your Squarespace fluid sections. What's great is we can easily change the color of our vertical line without having to touch the code. And we can combine our vertical lines with our horizontal lines to create grid layouts like this.
Adding a Blank Section
Our first step is to add a blank section. When editing fluid sections, it's best to turn on the grid by hitting "G" on our keyboard.
Using the Shape Block
To add the vertical line, we'll use our shape block. So, I'll click this add block button and start typing shape.
I'll bring the shape right to the middle. We may adjust the height accordingly but make sure it spans two columns.
Configuring Shape Settings
We double-click the block to bring up the shape settings. I'm going to use a shape that's rarely used. In this case, it's keystone. Then, I'm going to add the code that targets this specific shape without affecting the other shape blocks within the site.
Simply paste the provided code to the end of your custom CSS panel. Please ensure that we add it after any existing code. Upon pasting, notice that our keystone shape turned into a vertical line.
This happened because I am simply targeting the keystone element.
Changing the Color
We can change the color of this line by toggling on this stroke option and changing it to any color of our choice. Now we can proceed with adding the other elements, like our image. I'll make sure to assign the correct number of columns to this image. You may use any of these design options for this use case. I'd love to use the fill one. Then we add the text to the other side.
Adding a Horizontal Line
If you wish to add a horizontal line between these two sections, we can use our section divider. Click edit section and toggle on this divider. You'll find the option to set it to this straight option and again change the color and thickness accordingly.
Mobile View Adjustments
You might be curious how this translates on mobile. When we click this mobile view option, we'll find that this shape or vertical line turns into a horizontal line on mobile.
We can place it anywhere within the mobile grid and change its size accordingly. I like making sure it occupies two rows and notice that it stacks perfectly on mobile view.
Creating a Grid Layout
To create this grid layout, we don't need to add any more code. All we need to do is position our vertical line and horizontal line anywhere within the grid. Let's demonstrate this by adding a new blank section. This grid layout is best done when the fill screen option is toggled off or if its value is really small, for example, five or six. Here we can extend the height of this section.
Copying Elements
We can add our vertical line by copying it from our previous section. So I'll hit command c on my keyboard and while this new section is selected, I'll hit command v. Notice how I'm able to add this vertical line easily to this new section. Then we can add any image.
I'll again just copy and paste the image from our first section. Now I can copy this and paste it again by hitting CMD + v and position it anywhere within our grid.
Adding Horizontal Lines
To add the horizontal lines, all we need to do is add a line block and make sure it spans two rows. I can also extend it to flush to the edge of our section. I can also do that to our image.
Now that we have a horizontal line block, I can copy it and paste this to a section. Then add it at the top of the second image and extend it to the right edge of our section. We can easily add texts and other elements within the grid.
Section Dividers
Of course, we may toggle on our section divider to add our horizontal divider between sections. Here is an example layout. Using that technique, I've used a bit more code to make the image effect show up upon hover and I'll tackle that in an upcoming video on this YouTube channel. So please don't forget to subscribe to this channel and like our video.
Mobile Optimization
Please note that on mobile, these vertical line borders will automatically turn into horizontal line blocks. So in the new Squarespace fluid engine, we have a lot of flexibility in placing any elements on mobile without affecting our desktop view. I can show the grid by hitting G on my keyboard and reduce the height of our blocks. Notice how if we change our view back to desktop, our grid layout won't be affected.
Arranging Elements
It's quite easy for us to create a line that is flush to the edges by simply making sure that we pull the line to both sides. Then I can arrange our images, lines, and text independent of what's showing on our desktop view. Note that if there are extra lines that you don't want visible on mobile, we can make them smaller and hide them underneath our images or any other element.
Notice how I can hide it under these elements and manage its stacking using these options. I have the option to move forward or backward because I don't want this to be on top of the image, I just want to hide it underneath. So I use this move backward option. I'll also position our lines making sure they're flush to the edges.
It depends on how you wish the mobile to look, but for this particular layout, this one will be fine. Most likely, you'll find that on mobile there are additional rows added and it's quite easy to remedy that. For example, if there's a large white space, we just bring the row icon up and we can optimize it.
Creative Layouts
On mobile, you can get really creative using this approach. Notice that I was able to create another grid layout like this. I added a video block and more code to make sure the video responds to the grid.
This is another layout you can try to achieve using this technique. I hope you find this helpful. You'll find the codes in the description box below.
Learn More
If you're interested in learning more about coding the right way in Squarespace, please check out my program Standout Squarespace, where I share my proprietary approach to coding Squarespace in a smart way. We ensure the site is easily editable by website owners and recreate these projects while learning many techniques and foundational concepts in the process.
Blog Paywalls in Squarespace
Squarespace launches a new feature to monetize blog collections. Invite readers to sign-up before reading the rest of the post.
In this video I’ll show you how to use this new Squarespace new monetization feature for your blogs.
Blog PAYWALLS IN SQUARESPACE
a.
Squarespace
b.
Video Walkthrough
INTRODUCTION
We got a new way to monetize content in Squarespace. We can now paywall blog content and set-up multiple pricing plans (subscription, one-time payment or free). Readers are invited to sign-up before they can read the full content. We also have the option to set specific posts for public preview. If you don't see this feature yet on your end, don't worry! This feature is being actively rolled out.
Timestamped Overview
0:00 New Feature Introduction: Squarespace launches a feature for blog monetization.
0:06 Functionality: Excerpts shown; signup required for full posts.
0:20 Pricing Plans: Options for yearly, monthly, weekly, and one-time payments.
0:52 Free Access Setup: Free access available in exchange for email addresses.
01:02 Default Setting: Paywalled blogs hide full content, show excerpts.
01:15 Public Preview: Option to make specific posts publicly visible.
01:56 Blog Collections: Posts can be non-sequential, categorized, and tagged.
02:11 Adding Pricing Plans Add plans to new or existing blog collections.
03:24 Free Plan Example: Example of creating a free pricing plan.
05:10 SEO Impact: Public content indexed; paywalled content not indexed.
Resources
Setting Up Pricing and Access Plans
We can set up different pricing or access plans for users to read the full content within the collection. These subscription pricing plans can be set up yearly, monthly, or weekly. We can also add a one-time payment option or, if desired, make certain collections available for free while collecting email addresses or prompting users to log in before accessing exclusive content. This allows us to set up a free pricing plan.
Once a blog collection is paywalled, the full content of the blog posts will be hidden by default. Only the content we assign as an excerpt will be shown to users. However, we can assign certain blog posts to be visible without requiring a login or sign-up by setting them for public preview.
Configuring Paywalled Blog Collections
Setting up these paywalled blog collections is similar to configuring courses and digital products. I have a separate video about that, which I'll link below. The configuration allows for multiple pricing plans, but course collections are typically for structured content consumed sequentially. In contrast, blog collections are not necessarily consumed in sequential order. We can group posts into different categories, tag them accordingly, and arrange them chronologically.
With this update, any existing or new blog collection can now have pricing plans. If no pricing plan is attached to the blog collection, all content within the posts will be accessible publicly by default. But as soon as we create a new pricing plan—whether it’s free, subscription-based, or a one-time payment—the entire blog collection becomes payable.
Example of Setting Up a Free Pricing Plan
For example, if I add a free pricing plan named "Square One free," I can remove the description and benefits for now. Once this pricing plan is created, we'll notice that in our blog content, when accessing any post in edit mode, we can edit the excerpt. Only the excerpt will be shown by default, with the rest of the post content hidden.
If I visit the blog post URL in an incognito window, only the excerpt shows, and the rest of the post is hidden. Users are prompted to join now using a button, and they can sign up using the configured pricing plans. Multiple pricing plans can be set up within the same collection. For example, I can set up a monthly subscription for $10 per month and an annual subscription for $1000. We can even have a one-time payment plan and configure which pricing plan will be available via the paywalls menu.
Paywalls Menu Configuration
In the paywalls menu, we can show a welcome message and instructions. Under "featured pricing plan," we can choose which plans are publicly visible.
For example, I can hide the free option from being publicly visible. When users click the "join now" button, they will see the available pricing options under the payable placement. By default, blog posts only are selected, which is suitable for most use cases.
However, if we don't want the blog overview (thumbnail and excerpt) shown publicly, we can choose this option.
As I mentioned, if at least one pricing plan is set up for a blog collection, the full content of the blog posts will be paywalled or gated, with only the thumbnail and excerpt visible. If we want certain blog posts to be available for public preview, meaning the entire post is visible even if it belongs to a paywalled blog collection, we can select that blog post, click the three-dot icon, and choose the option to set it as a public preview.
Upon doing so, when we visit the site in a browser where we're not logged in, we'll see the preview button opposite that blog post. The full content of other blog posts will be hidden, but the main content of the public preview post will be shown. If we navigate to other blog posts, their full content will remain hidden.
SEO and Public Content
A quick note about SEO: any content made publicly available, such as excerpts, thumbnails, titles, URLs, and full post content set for public preview, will be indexed accordingly. However, paywalled content will not be indexed.
I believe this is an exciting new way to monetize content in Squarespace. While it might not be as robust, powerful, and feature-rich as other monetized publications like Substack, I think Squarespace is just getting started, so stay tuned for updates. If you're looking for high-touch support for your Squarespace projects, please check out my program, Standout Squarespace.
Create a stylish Testimonial Slider
Transform Squarespace's list section into a stylish testimonial slider in just a few simple steps.
In this video, let's turn the built-in list section of Squarespace from this to a beautiful testimonial carousel like this. In a few simple steps, we'll transform your site.
Transform Your Squarespace List Section into a Testimonial Carousel
a.
Squarespace
b.
Video Walkthrough
INTRODUCTION
Hi, this is Rache of Squarestylist.
In this video, let's turn the built-in list section of Squarespace from this to a beautiful testimonial carousel like this. In a few simple steps, we'll transform your site.
Timestamped Overview
0:02 Transforming list section into a testimonial carousel.
00:23 Adding a list section from the catalog.
00:39 Changing layout to carousel.
00:44 Adjusting carousel settings.
01:14 Setting media width and adding content.
01:52 Applying custom CSS codes.
02:27 Saving and reusing sections.
04:10 Custom colors and advanced styles.
04:38 Standout Squarespace program
Resources
- Squarespace Design and Coding course
To access the codes referenced in the video, please sign-up to our vault mailing list: https://www.squarestylist.com/sqs-vault
Transform Your Squarespace List Section into a Testimonial Carousel
Hi, this is Rache of Squarestylist.
In this video, let's turn the built-in list section of Squarespace from this to a beautiful testimonial carousel like this. In a few simple steps, we'll transform your site.
Adding a List Section
First, let's start by adding a list section. We can open our catalog and under services, find the option with the information icon. That's our list section. From here, we can switch to any layout. So from the design tab, let's switch from a simple list to a carousel.
Customizing the Layout
Text Alignment and Columns
The text alignment is to the left.
The maximum number of columns is three, but we can explore changing this value.
Our image crop is set to a 1:1 ratio or a square.
I toggle on infinite scroll and show adjacent slides. Under style, I ensure the card style is toggled on for size and space.
We need to make sure that under media width, we set this to a value of 27%.
Card Style and Position
For our cards to have the same height, we use the last option for position.
Under elements, I prefer toggling off the buttons.
Under content, this is where we add the image for the testimonial, the corresponding alt text, the title (which is the name and company), and the description (where we add the testimonial).
Adding Custom CSS
Now we just have to add the codes that come with this video. Please check out the description below for free access to the codes. Under website tools, find the custom CSS. If this tab has existing code, go to the very last line and paste the code that comes with our guide. And that's how easy it is to adapt this format.
Adjusting Content and Colors
Once you've added the content, this is how it'll look. We can easily change the order of our items and add content using the built-in editing feature of our list section. If you wish to change the color of the testimonial cards, go to the color theme of this section.
In my case, that is the slightest one. I'll scroll until I find the list section for carousel. Right here, we have the card color. I can change this to any existing color in my color palette or a custom color.
Smart Code Usage
Using a smart way to write codes, we will not affect other list sections unintentionally. We can still add carousel list sections anywhere on the site without unintentionally affecting their styles. We can easily reuse this section anywhere on our site by using the save section feature of Squarespace.
Saving and Reusing Sections
For example, if I have another testimonial slider section that I wish to add on another page, all I need to do is use this heart icon and save this as a saved section. Anywhere else on the site, we can access it by adding a section and accessing the saved section tab.
Once I add it, notice how all our coded customizations are seamlessly carried over. We can change the content of this particular section without affecting other instances of this coded section.
Further Customizations
There are a lot more style customizations that we can apply to this testimonial slider. For example, we can have a custom color per list item. This is achieved using additional code, and you'll find it in action when you visit Standout Squarespace. By using the exact same list section and a similar approach where we simply add a set of CSS, we can achieve this list card effect.
Learn More with Standout Squarespace
If you're interested in learning more about how to build Squarespace sites and create these unexpected sections in a smart and streamlined way, I invite you to check out my program, Standout Squarespace. We have a growing library of features that you can easily add to your Squarespace sites. More so, we have pre-recorded lessons that you can go through at your own pace. This is where you'll learn the fundamentals to help you upscale so that you can write your own codes and creatively combine techniques to create your own stylish coded sections in a smart and streamlined way.
Please check out Standout Squarespace for more details.
Upgrade to Squarespace 7.1 in One click
There is now an easy way to update your Squarespace site from version 7.0 to version 7.1. We can preview the 7.1 version in just ONE BUTTON CLICK. There's no lost of backend data, domain, SEO and customer profiles!
This blog post will guide you through the upgrade process, sharing tips on how to plan, prepare, and execute the transition smoothly.
Upgrade from Squarespace 7.0 to 7.1
a.Squarespace
b.Video Walkthrough
Introduction
Upgrading from Squarespace 7.0 to 7.1 has become easier with the new one-click update tool. While the process seems simple, there are several critical considerations to keep in mind. This blog post will guide you through the upgrade process, sharing tips on how to plan, prepare, and execute the transition smoothly.
Timestamped Overview
0:00 Introduction
01:26 Advantages of using the new Update Tool
02:24 A Preview of how the update tool works
05:35 Why upgrade to Squarespace 7.1?
07:42 Limitations of the Update Tool
09:22 How to switch to supported template families before using the tool?
15:21 Steps on how to plan and prepare before upgrading to 7.1
17:46 How to prevent failed upgrades and previews
19:21 How to preserve SEO rankings after upgrade
20:07 Reminder and Best Practices in previewing the 7.1 version
22:17 How to change content without affecting the live site
25:13 How to recover content and layouts even after cancelling the preview
Upgrading from Squarespace 7.0 to 7.1: A Comprehensive Guide
There is now an easy way to upgrade from Squarespace 7.0 to Squarespace 7.1 in just one click using the official 7.1 update tool. This button seems simple and straightforward, but there are actually quite a lot of critical considerations before you make the move. In this video, I will not only show you how exactly this new update tool works but also share how to plan, prepare, and facilitate this upgrade.
The Challenges of Upgrading from 7.0 to 7.1
Prior to the launch of this update button, it was a pain to move from 7.0 to the 7.1 version of Squarespace. You might have been told that you had to start fresh with a brand-new site to enjoy all the new features of Squarespace 7.1. However, this old method of starting a new site requires moving over the domain and website subscription.
Issues with the Old Method
Billing Changes: That means your billing in Squarespace.
Data Loss: You'll lose all backend data, including order history, customer profiles, email campaigns, analytics history, memberships, and subscriptions.
Third-Party Tools: This will also require the use of a third-party tool to import blog posts and other content.
SEO Risks: Using this method also poses a higher risk of negatively affecting SEO rankings.
Benefits of the New Update Tool
With the launch of this new update tool, there's no longer a need to move domains or subscribe to a new Squarespace plan anymore. All critical site data will be kept intact, including order history, customer profiles, memberships, analytics, email campaigns, and subscriptions.
Key Advantages
Content Preservation: There's no need to import or export blog posts and other content because all content is kept intact.
No Page Limits: There is no limit in terms of the pages that can be upgraded. I already upgraded a site that has more than 100 pages and over 1000 blog posts, and the update went smoothly.
Less SEO Risk: There is less risk of affecting SEO.
Accessing the Update Tool
To give you a preview, I'll show you how easy it is to access the tool. But as I mentioned, please don't proceed with any update without finishing the rest of this guide, as there are critical considerations before proceeding.
In any compatible Squarespace 7.0 site (I'll share more about compatibility later), under website, go to design, and you'll find the option to update to version 7.1. We may click this button, and there will be a prompt letting us know that we can preview our site on 7.1 before publishing.
Steps to Access
1.Go to Design:In any compatible Squarespace 7.0 site, go to Design, and you'll find the option to update to version 7.1.
2.Click Update: When we click this button, there will be a prompt letting us know that we can preview our site on 7.1 before publishing.
3.Preview and Publish: We don't have to worry about our live site because while we are on preview and haven't published any of the changes, our 7.0 site will be kept intact and we can cancel anytime before publishing.
Critical Considerations
There are some reminders and critical considerations before proceeding:
Site Compatibility- Ensure your site is compatible with the update tool. This tool works best with sites using templates from the Brine and Bedford families.
SEO Impact- While the update tool keeps most SEO-related data intact, there is still a slight risk of SEO impact, particularly if your site relies heavily on custom code.
Design Changes- Most code customizations won't carry over, and the design options in 7.0 do not fully map to 7.1. This could require a redesign of your site.
Editing Restrictions- While in preview mode, you cannot add new pages or edit blog posts. Major content updates should be completed before initiating the upgrade.
Previewing and Publishing Your Site
Notice how most content is preserved, but there are stylistic aspects that are not carried over. That's because most code customizations aren't carried over when we switch to 7.1. Now, if I open an incognito window where I am not logged in, notice how the 7.0 version of the site is still live. So even if we make changes to the 7.1 preview, this 7.0 version will be preserved.
There are editing restrictions while we are previewing the 7.1 version too. We cannot add new pages or edit any blog posts. I'll share more tips on how to edit the 7.1 preview later in this guide.
Happy with Preview?
Once you're happy with the 7.1 preview, you can publish the changes, but remember that this action is irreversible. If you decide to cancel the preview, all changes will be discarded.
Benefits of Upgrading to 7.1
Upgrading to 7.1 offers several benefits:
Access to New Features
7.1 comes with exclusive features such as Fluid Engine, auto layout sections, and advanced commerce features. If you are interested in hosting your courses on Squarespace, I have a separate video for that which I'll link in the description box.
Improved Performance
7.1 sites are faster and meet modern web design standards, improving accessibility, SEO, and performance. If you're using a 7.0 version and try to run the site in an accessibility tool, you might notice a lot of flags regarding accessibility.
Most of those flags are addressed in the 7.1 version. Based on recent tests, 7.1 sites are also much faster than 7.0 sites because the team behind Squarespace is continuously looking for ways to optimize site loading, including lazy loading of images.
Future-Proofing
The 7.1 version is future-proof. I won't guarantee that there will be no major changes on Squarespace in the next few years, but the plan of Squarespace is to build new features around this 7.1 interface.
For example, even though the introduction of Fluid Editor is such a major upgrade, they did not launch Squarespace 8.0 or Squarespace 7.2. This is because they ensured these new features are compatible with Squarespace 7.1. We expect more features will be exclusive to 7.1. However, if you are on Squarespace 7.0, it will be supported continuously and will not be sunsetted.
Potential Drawbacks
Despite the benefits, there are reasons why you might opt not to upgrade:
New Interface
7.1 has a completely different interface, which might take time and energy to get used to. If you'd like to accelerate that learning, I have an offer that might suit you. I teach Standout Squarespace Foundations where I share how you can master the new 7.1 version of Squarespace.
Compatibility Issues
The update tool has compatibility limitations, particularly with templates outside the Brine and Bedford families. If the template is not part of Brine and Bedford families, then the update tool will not work. If you wish to learn which template your 7.0 site is using, go to your website and click pages. Scroll down to the very bottom, and you'll find the version 7.0 Brine family.
If you're not seeing the update to version 7.1 under design, it could be that your site is on a different 7.0 family other than Brine and Bedford. If that's the case and you still wish to use the update tool, there is an option to switch to Brine or Bedford family first before using the update tool. In this example, if I go to website design and notice that I don't have any option to update to version 7.1, it's because this website is under the Wells family.
To still use the update tool, switch templates by going to design template, and install a new template. Most of these are under the Brine family, but to be sure, go to all templates and use the clay option, or search for Brine, and it will lead you to Brine. There are multiple templates under the Brine family, and you can start with Brine, allowing us to preview this Brine template without affecting our current Wells-based 7.0 site. I have a separate video about staging a different template on a 7.0 version of Squarespace, which I'll link in the description box below.
Developer Mode
Another limitation is that the update tool won't work when the developer mode is toggled on. To proceed with the update, toggle off the developer mode, but proceed with caution.
Redesign Requirement
This upgrade to 7.1 might require a full redesign. When I offer this upgrade service to my clients, I manage their expectations that this is a redesign project. While content and data are preserved, some design and layouts may break because the design options in Squarespace 7.0 are not 100% mapped to Squarespace 7.1.
The Squarespace team tries their best to map all those options, but achieving 100% design fidelity is not possible. Most code customizations won't be carried over. If the project has code customizations, treat the project as a full redesign and engage Squarespace experts to do this upgrade.
Editing Restrictions During Preview
Another consideration is that the editing of the current site will be restricted while 7.1 is in preview mode, which will be the case across all contributors.
If you don't want other contributors to mess up the preview mode or accidentally publish the 7.1 site without approval, check the permissions tab of your Squarespace site and make sure that all contributors are informed not to make any changes while 7.1 is in preview mode. If there are important content updates coming up for the site, you might want to delay the upgrade to 7.1.
Unsupported Features
Before moving to 7.1, note that some 7.0 features are not supported. Here are some highlights, but if you'd like to access the full list of these features, I'll link that reference in the description box below.
When we preview the 7.1 version, you'll find that the header will look completely different because 7.1 no longer has secondary navigation or header search bars.
Gallery pages are also lacking in Squarespace 7.1. For example, I have a site where I used a gallery page in 7.0 and pulled that to a summary block. Notice I have multiple videos right here, and these gallery pages do not support uploaded videos. They are linked to either YouTube, Vimeo, or other video hosts. When I previewed the same section in the 7.1 version, this was automatically converted to a gallery block, and the rest of the other videos were no longer linked. If you use gallery pages a lot in 7.0, take this into account and back up those links to the videos.
Gallery blocks are partially supported because they transfer over to 7.1. However, gallery blocks are only fully supported in collection items and not regular pages in 7.1.You can view and access the gallery block but cannot add new gallery blocks on regular pages if you're not a Circle member. Cover pages and album pages are also not supported at the moment. If you have these pages, back up the text and audio files.
If you have anchor links added using code, that code will not work.
Share buttons are also not supported in 7.1, as well as template switching or staging.
Earlier, I demonstrated how to stage a different template on Squarespace 7.0. That function is no longer supported in 7.1.
Preparing for the Upgrade
If you decide that upgrading to 7.1 is the best next move for your site and business, here's how you can plan, prepare, and proceed with caution:
Remember the Irreversibility
Once the preview is published, the upgrade to 7.1 is irreversible. Cancelling the 7.1 preview discards all changes.
Duplicate Your Site
Create a backup visual reference of your current site. Note that there are limitations when trying to duplicate the entire site. For example, websites with more than 100 pages cannot be duplicated. All backend data are also not duplicated.
This duplicated site is just a reference. The one that we will upgrade is the current 7.0 site and not the duplicate.
Ensure Strong Network Connection
Make sure you have a strong network connection and sufficient device memory before clicking the upgrade button. It's also best to close other apps and browsers while doing this upgrade.
Add New Pages or Duplicate Existing Ones
Before activating the preview, add new pages to the site or duplicate existing ones.
Check Code Injections
Ensure that all CSS and JavaScript codes in the Advanced Code Injection Area are compatible with 7.1. If you add any CSS or JavaScript to the Advanced Code Injection Area of the page or to the site-wide header or footer code injection, these code injections will affect the 7.1 preview, and our main limitation is we cannot remove those codes.
For example, if I added a CSS that hides the header, the header of this site is hidden even on the 7.1 version. My advice is if you don't want the current site to be affected, it might be best to duplicate that page. In that duplicated page, you may remove that code injection.
Identify SEO-Relevant URLs
Make a list of URLs important for your SEO and ensure they are preserved. I recommend searching for this keyword site: followed by your domain. This search will show results of pages indexed on your site. To preserve your SEO rankings, make sure that these URLs are preserved. I also have to mention that product items have different URL structures once we switch to 7.1, but Squarespace automatically handles the redirect of the previous structure to this new structure.
Final Reminders and Best Practices
Content Editing in 7.1
First, please be reminded that the content of our collection items, like blog posts or event items, cannot be edited. In Squarespace 7.1, we should be able to add any section to the top or to the bottom of our blog list, but notice how this edit option is not available whenever we're in the blog collection. The same is true when we try to visit the blog post item. Notice that this edit option is disabled.
Sub Pages and Content Visibility
Second reminder is that pages may seem to have sub pages, and these sub pages may seem to have no content. To give more context, in Squarespace 7.0, we typically add index pages which consist of different pages inside of it, and we're able to move these pages around. However, when we switch to Squarespace 7.1, these pages will become sections within just one page. When we switch to 7.1, the expected behavior is for all of those pages to be converted to sections and to appear on just one page. This is exactly what shows up when I previewed the 7.1 for this site.
So, notice if I click this topmost page and if I click edit, notice how the sections show up as expected. However, you might worry that if you click on these individual sections or sub pages, it seems like the content is empty. Don't worry, this is just a temporary state. Once we publish the 7.1 version, these sub pages will be removed, or we can delete them without affecting the main page.
Changing Content and Layout
This brings me to the next reminder, which is you can actually change the content and the layout of the regular pages without affecting the live site. Based on our beta test, we only had problems changing or deleting forms. But if we change an image on the regular page, that image change won't reflect on the live site. So, while in preview, if I try to change the text or the image here, like so, and even if I change the color theme, even if I save my changes here, if I view the live site, this live 7.0 site is untouched.
Squarespace mentioned that anything that will affect the live site should be disabled while in 7.1 preview. However, based on my testing, there are instances wherein if I delete forms or if I delete subscription blocks, the 7.0 site is affected. Hence, if you'd like to be extra careful, I recommend duplicating the section first before deleting any block or even before you make any major change. So, for example, because I wasn't able to duplicate this, if I change my mind and actually would like to use that image, I'd have to rebuild that again. So, it's best practice, especially if you're new to this, to use this duplicate feature and make changes to that duplicate.
Leveraging Saved Sections
This brings me to my favorite pro tip, which is to leverage the saved sections feature in 7.1. Instead of duplicating, you might just want to save this version of this section. After doing so, we'll be able to access our saved sections by going to the saved sections menu and accessing that particular section. So, even if I make changes to this section, notice when I change the color theme that the custom colors were removed. So, if I remove those custom colors and also if I just deleted that entire gallery and just saved this section, there is a way for us to recover this section by simply accessing our saved section.
So, if you click this option to add a section under saved section, there will be all our saved sections. Notice how we can easily recover this initial section. So, I recommend before making any major changes to the layout or content of your sections, please duplicate them or add them to your saved sections. Just be extra careful when you have forms or subscription blocks, because once you delete them, it might be hard to recover them even through saved sections.
Recovering Saved Sections After Canceling Preview
And the other reason why I love using the saved sections feature is because it allows us to recover sections, content, and layout even after we cancel the 7.1 preview. So, for example, if I'm already happy with this banner layout and the client says, actually, we need to have an emergency edit to this site, but we're not yet ready to publish the 7.1 site, we don't have a choice but to cancel this preview. So, if I cancel this preview, it will tell us that all our changes will be discarded. But if we'd like to preserve this section content and layout, what we can actually do is add it to our saved sections.
Notice how it was automatically added. Even if I cancel this, we'll note that once we initiate the 7.1 preview again, it seems like we're starting from scratch. Notice how all the changes that we've made when we previewed the site on 7.1 the first time were all discarded. However, not all is lost because there's something that we can recover. We can actually still access all the saved sections that we added in our initial 7.1 preview. So, notice, if I add a section, go to the saved sections, these sections that we managed to save are still recoverable.
Resetting Color Themes
Another tip which may be applicable if you are overhauling the entire design of the site is to reset the color themes. Again, be careful in doing this. If you're not overhauling the colors and the design of the entire site, this is not applicable to you. I personally do this because I'm more comfortable just managing the colors of these five colors in the main palette. So, what I do when I do a full redesign is to go to the color theme, scroll down till the end, and I just reset it to the default theme. Again, be careful because it's hard to recover these colors unless we restart the upgrade.
Upgrading to Fluid Editor
Another reminder is to practice caution when upgrading to fluid. Initially, our sections will be using the classic editor, the editor that uses spacer blocks and have these insert points. However, we have the option to upgrade it to the fluid editor. But as I mentioned, we need to practice caution. You may either duplicate this or save it as a saved section before you convert to fluid. Because once we convert to fluid, we cannot revert back.
Handling Code and CSS
I've mentioned this before, but I'd like to emphasize that any codes in the injection areas are not accessible while on preview mode. Also, feel free to remove the CSS that you added in the custom CSS panel. If you'd like to start fresh, you may actually just remove all the custom CSS here or back it up in any of your text editor or in Notion. And even if we delete this and save, we'll find that our live 7.0 site will not be affected. You may also make changes to the navigation and rest assured that these navigation changes will not affect the 7.0 live site.
Collaborator Edits and Publishing
Lastly, something that I cannot stress enough is to remind your collaborators not to make unnecessary edits while the site is on preview mode. And once you're happy with how your 7.1 site is looking, you may hit the publish button. But please note that this change is irreversible, so please be cautious. Once your site is on 7.1, you may now add 7.1 exclusive features such as courses and video collections.
Conclusion
If you find this video helpful, please like this video and subscribe to our channel. Share it with other designers who might find this helpful on Instagram. Follow me at @Squarestylist. Note that I am not able to provide personalized support via the comments below, but if you wish to have more personalized technical support, I provide that via my Squarespace program, Standout Squarespace. Thank you for following along, and best of luck with your upgrade.
Wavy Background for Squarespace Scrolling Block
Squarespace has a cool built-in feature that allows us to add wavy scrolling blocks. But the feature doesn't support wavy backgrounds.
Squarespace has a built-in scrolling block feature, and we can even add wave intensity to it. However, when we try to add a background color, the background color doesn’t follow the wave path. In this post, I’ll show you how easy it is to add this wavy scrolling block with bac
Creating a Wavy Scrolling Block with Background Colors in Squarespace
a.
Squarespace
b.
Video Walkthrough
Introduction
Squarespace has a cool built-in feature that allows us to add wavy scrolling blocks. But the feature doesn't support wavy backgrounds. In this video, I'll share how a little bit of CSS code can help us achieve this lovely wavy feature.
To access the codes, create an account and join our Squarespace Resource Vault mailing list →
Timestamped Overview
00:00 Introduction to Squarespace's built-in scrolling block and wave intensity feature.
00:11 Explanation of the issue with adding background colors.
00:19 Overview of the tutorial on adding a wavy scrolling block with CSS.
00:26 Accessing the code and joining the mailing list for updates.
00:37 Step-by-step guide on duplicating blocks and adding background colors.
01:00 Configuring wave intensity and other settings.
01:39 Adding custom CSS to hide the second scrolling text and retain the background color.
03:01 Aligning and managing the sizes of blocks to create the wavy marquee.
03:57 Using the shape block as a section divider.
06:49 Final adjustments and ensuring responsiveness for mobile views.
Squarespace has a built-in scrolling block feature, and we can even add wave intensity to it. However, when we try to add a background color, the background color doesn’t follow the wave path. In this post, I’ll show you how easy it is to add this wavy scrolling block with background colors using CSS. This technique allows us to adapt to any wave path or block colors.
To access the code I'll be referencing throughout the post, please check out the link in the description box. You’ll be asked to create an account and join our mailing list to stay updated on future resources.
Adding a Scrolling Block
We can add a scrolling block to any Squarespace blank section. In this example, I’ve added a background image. Double-click the block to access the block settings. Under "Content," you can change the text, add emojis, or other characters. Under "Design," you can add wave intensity. There are additional settings here, such as speed and the option to pause on hover. For text size, I prefer using the medium or large option to make it more prominent.
Adding a Background Color
To add a background color, duplicate the block and assign a background color to the duplicated block. For instance, hit Command D to automatically duplicate the block. You can also use the icon to duplicate it. For the duplicated block, assign a background color. Scroll down to toggle on the background color option and choose a color different from the first marquee or scrolling block. I changed it to blue and hit save for the duplicated block. Ensure the "Fade edges" option is toggled off.
Applying the CSS
Refer to our resource entry under the wavy scrolling block to add the CSS. Copy the set of CSS and switch back to our site. To access the CSS, hit the forward slash on your keyboard and start typing "custom CSS." Paste the code here, and you’ll notice it hides the second scrolling text but retains the background color. You might need to refresh your page for this change to reflect. In edit mode, the background color might not show up as expected, so check it out of edit mode.
Customizing the Scrolling Text Color
If you wish to change the color of the scrolling text, refer to our code entry under Optional CSS. Copy the code to change the marquee color and paste it into our CSS panel.
Aligning Blocks Using the Fluid Editor
Using the Fluid editor, it’s easy to overlap blocks to achieve the demo layout. Ensure the blocks are completely aligned. Move the background block beneath the scrolling text using the option to move backward or the keyboard shortcut Shift + Arrow Down. Ensure the sizes are aligned to create the wavy marquee with a background color.
Adjusting Background Color Width
To change the background color width, copy the optional customization code and paste it into the custom CSS panel. For example, changing the stroke width to 1.8m will make the background path larger.
Creating a Section Divider Effect
To create a layout where the wavy marquee serves as a section divider, use the same section but add a shape block at the bottom. Make sure the "fill screen" option is toggled off, allowing the fluid grid to span the entire height. Add a shape block at the bottom, ensuring it spans the entire width. Drag the shape to the right edge. With shape blocks, you can change the color to any palette color or assign a custom one.
Managing Block Stacking
Initially, cover the scrolling blocks with the shape block and manage its stacking by moving it backward using the icon or keyboard shortcut Shift + Arrow Down. Ensure it is underneath both scrolling blocks, then position it at the bottom to manage its height so it won’t peek through the top of the wave. Save and exit edit mode to achieve the desired layout.
Adding Other Components
You can add other components like text blocks to this section, making it seem like the wavy marquee is a section divider. Change the text color and scale it to the width of the container.
Mobile Optimization
Switch to Mobile view and align the wavy marquee, ensuring the scrolling text is on top of the background path. Use the icon to move forward and select multiple blocks to move them simultaneously. Adjust the shape block to be underneath the scrolling text blocks, manage the section height, and exit edit mode to achieve the effect on mobile.
Final Thoughts
If you use this technique, tag us on Instagram using our handle @squarestylist. We’d love to see what you create. For personalized support, we provide that through our program, Standout Squarespace. The program includes high-touch support and workshops on scroll-based animations and other resources to help you deliver high-quality web design projects that meet standards on responsiveness, accessibility, and SEO. For web designers working on Shopify projects, check out our video on adding this wavy marquee feature to any Shopify theme.
Squarespace Courses: Ultimate Guide
Learn the ins-and-out of the new Squarespace Courses feature.
In August 2023, Squarespace finally launched a native feature that allows us to create and sell online courses.
SQUARESPACE COURSES: Your complete guide
a.
Squarespace
b.
Video Walkthrough
Introduction
In this comprehensive video, you'll:
Learn the key highlights of this new Squarespace Courses feature e.g bundling, high-level video protection, progress bars, unlimited courses and more!
Watch a demo of how to create, host, and sell courses on Squarespace
Preview the student experience from purchase to course access
Be informed on website plans, add-ons, transaction fees and current limitations of this Courses feature
Learn how Squarespace compares with other popular course platforms such as Kajabi, Teachable, Thinkific, Podia, Thrivecart and Teachery
Why I decided to migrate all my courses to Squarespace after trying almost all course platforms and after years of using Teachable.
Timestamped Overview
0:45 Key features of Squarespace Courses
4:46 How to create the Course Content
10:43 How to customize the Course Overview page
12:15 Setting-up the pricing plans
17:05 How to make sign-up buttons available on the sales page and start selling courses
19:18 A Preview of the student experience in Squarespace courses including order notifications
20:08 How students access multiple courses
20:38 How to determine the correct product type: Digital Downloads or Courses or Member Sites?
24:36 Choosing the right website plan and digital product add-on
27:39 How Squarespace Courses compares with other course platforms such as Kajabi, Teachable and Thinkific
29:44 Current limitations of Squarespace Courses
33:00 Key Advantages of Squarespace Courses
Resources
Squarespace has finally launched an official feature that allows us to host and sell courses and memberships. This feature is packed with sought-after functionalities such as product bundling, progress tracking, and secured video hosting. In this video, I'd like to walk you through the highlights of this new Course and Memberships feature, share some key considerations, and explain how it compares with other learning management software.
Key Considerations Before the Launch of Squarespace Courses
Limitations of Member Areas
Before the launch of Squarespace courses, we had another way of creating paywalled or gated content using member areas. Using Member Areas, we had to do a lot of workarounds to host courses within Squarespace. However, there were some key limitations that prevented me from migrating my own courses to Squarespace:
We were limited to ten member areas only, which was restrictive for course creators with more than ten courses.
There was no course progress indicator, so students couldn't keep track of the lessons they had already completed.
There was no high-level video protection, which meant knowledgeable users could easily grab and download the video embed codes.
Video Protection Challenges
This limitation is not unique to Squarespace, though, because if you're simply hosting your videos on YouTube, even though they're unlisted, or if you're using Loom.com or the basic version of Vimeo, your videos are not highly protected. However, if you're using learning management systems such as Teachable or Kajabi, that means if you upload your videos through their video storage, your videos are highly protected. This high level of video protection is also present in higher plans of Vimeo.
No Bundling Options
Another limitation of Squarespace member areas was that there was no way for us to create bundles. For example, if you have three courses and you would like to sell them as a bundle, that was not possible.
The New Squarespace Courses Feature
Addressing Previous Limitations
Now, the great news is, with the launch of the new Squarespace courses, these main limitations have been addressed:
We can host and sell unlimited courses or gated content.
We have a built-in course progress indicator and side navigation.
The videos uploaded to Squarespace now have a high level of protection that's at par with the protection of videos in other learning management systems.
We can sell bundles and offer our courses in multiple pricing plans.
These improvements now make Squarespace a viable course platform option. There are a lot of features that other course platforms offer that are not yet available in Squarespace. But then I'd say there are aspects of Squarespace which make it superior to other course platforms, which is why I am migrating all my courses to Squarespace. Just imagine combining these powerful course features with the ease, simplicity, and beauty that naturally come with every Squarespace website. We can even apply simple code snippets to customize each course experience.
Ease of Use and Design Freedom
We won't be able to easily add these content-rich, beautiful, and branded layouts using any other course platform, even if we pay $400 monthly.
I've been running my education business for years now, and I've tried almost all course platforms. So I've weighed all the pros and cons and decided that I'll switch to Squarespace courses, and I'll get to the details in a while. For now, let me show how easy it is to add courses to your existing site.
Adding Courses to Your Existing Site
If you are on a business plan or above, then when you click this plus icon, whether in the Linked or Not Linked section of your navigation, this new course collection should show up. Clicking this collection option will prompt us to choose from any of these premade layouts.
You can choose any, and this will automatically generate a Course Collection page at the top of your Not Linked section. Note that this icon is an open book, so we can proceed with naming our course. I'll name it my course.
When we click this Collection page, we'll see three menu items: Pricing Plans, Course Overview, and Course Content. For now, let's look into Course Content. This is where we add the content of our course or organize them into chapters or units.
If we click on any of the lessons, we'll find that the editing experience is quite similar to portfolio items. That's because we can easily add any section, be it a fluid section, gallery section, or list section. We have a lot of design freedom regarding what content we can add to each lesson. I believe this ability to easily add content and beautifully lay them out in each lesson is what sets Squarespace apart from other platforms.
I can even save a section from another page on my site and easily pull it to be added to any of the lessons of this course. And I'm telling you, after trying almost all course platforms, creating something like this in popular learning management systems is close to impossible, even if you pay $400 per month.
Video Customization Options
And because Squarespace acknowledges the fact that not all lessons may be video-based, if we go and edit the video at the top of this lesson, there is an option to toggle it off.
If you choose to show the lesson video, you may upload it directly to Squarespace, and as I mentioned, it has a high level of asset protection.
If you are hosting your video elsewhere, for example, Vimeo, then you can just simply add the link from here, and it will automatically pull the video. But make sure that you have the correct settings in Vimeo to ensure that the video is protected. Alternatively, you may also hide this lesson video and just add a section within the video block. You can easily pull the Vimeo or YouTube video while the student is viewing the lesson.
They can also access this pull-out menu, and this is how they can navigate to other lessons of the course.
From the side navigation, they can also click this progress circle, and it'll automatically adjust their progress indicator for this course.
The students may also click the Complete and Continue button at the bottom or top of the lesson, and the progress percentage will be updated too.
Managing Course Content
To add our course content, we start by deleting the placeholder content that was automatically generated. We can do so by clicking this ellipsis and clicking this Delete option.
Note that when we delete the entire chapter, all the lessons under it will also be deleted, and this cannot be undone. We don't have a backup of these, so we have to be careful. But because these are just placeholder content, we can proceed with deleting them all.
When we click this Add Content option, we have the option to either add a chapter or add a lesson. Note that we can definitely have a course without a chapter. So if you have a short course only, you can definitely just use lessons.
But if you'd like to organize your content into chapters or units, then you can use this chapter similarly to how we will use a folder to organize our content. Simply drag the lesson to the applicable chapter, and then we'll notice that the status of the lesson is still on draft. It won't show up in our course until we click Edit Lesson and set the status to published.
We'll notice that we also have the option to set the status to scheduled. This is applicable if you'd like to drip content based on dates. When we click the lesson item and click Edit at the top left of our screen, we now have the option to add any sort of sections applicable for this lesson. You may add more resources, more information, or highlight some key resources indicated or mentioned in the video.
Styling and Layout Options
Under Edit Layout, we have styling options right here. We can also change the placement of our course navigation.
At the moment, the sidebar is aligned to the right, but we also have the option to align it to the left.
Note that we may add up to 250 lessons per course, and I personally think that's more than enough. Whatever lessons or chapters we add to the course content will be automatically reflected in the course overview. Notice in this section the new chapter and lesson that I added are reflected.
This course overview page may also house as many sections as you need. But of course, what we'd like to highlight are the course chapters and lessons. Because in some courses, you might want to send the students to this page so that they would have a better idea of the syllabus and the topics included in the course.
In this course overview section, when we click Edit Layout, we have the option to show or hide content, change the colors, and change some of the designs. I recommend you take time exploring how changing these settings will affect this section.
For the rest of the page, we can simply add sections the way we would on other pages. This course collection that we just created will have a dedicated URL. If you click this gear setting, you'll find that our custom URL is my course. You may change it as needed. And because we haven't added any pricing plans, this course collection will be available by visiting this URL. In my case, that's squarestylist.com/my-course.
Configuring Pricing Plans
However, if you'd like your course content to be gated, meaning you require the user to sign in with their account before accessing the course content, that's the time we will configure the pricing plans. To create a pricing plan, we simply click this button, and there will be an option for us to add a name, description, and benefits. Personally, I don't use this, but I just plug in the correct information. But when I am adding it to the sales page, I don't show this information.
What I show is the pricing of the course and the applicable products included. We may offer the course in multiple pricing plans. It can be a fixed amount, split into payments, accessed through a subscription, or it can be a free course. For example, we may sell this course for $1,000 single payment or add an option to purchase it in a more accessible pricing plan of four payments of $250.
This is a preview of how these single payment and split payment options will show up on the homepage.
I personally don't find these toggles intuitive. What I typically do is have a specific button for each pricing plan. In my course, Standout Squarespace Foundations, I have this pricing plan section with options for four payments of $250, a pay-in-full option at $997, and a packaged option that bundles my foundations lessons and my advanced lessons. I'd like to demonstrate how I would set it up in Squarespace courses.
For clarity, I'll name this course as Foundations. Then I'll create this pricing plan to refer to my $997 single payment option. Under included products within this pricing plan, I can bundle another course, member area, or video collection here so that when a user avails of this pricing option, they will have access to the main course and a bonus course. For example, I'll add the Art of Coding in Squarespace as a bonus course. When I hit save, we'll have our first pricing plan. We can actually add up to 500 pricing plans per website.
For this course, I need another pricing option, which is the split payment of four payments of $250. I'll create a new pricing plan, still for the foundations course, and change this to a fixed amount tail, with the payment set to four payments of $250 for four months.
For this pricing plan, I can add another bonus course or make that exclusive to those who pay in full. Notice the error here because we have the same name for the pricing tier. So I should name this differently, like Foundations Split Payment.
Referring back to the pricing plans on my site, we have the payment plan option, the pay-in-full option, and now the bundled option. For this, I'll create a new pricing plan called Full Tier, a one-time payment of $2797. This will include all that's in the foundations lesson, the bonus lesson about the art of coding in Squarespace, and the advanced lesson of my Standout Squarespace program. Once created, we have all the pricing plans we need for our sales page.
Implementing Pricing Plans on the Sales Page
Now, to make these pricing plans available on our sales page, I'll demonstrate by accessing my saved section. I'll replace the button leading to Thrivecart with a digital product block. By searching for and adding the digital product block, we'll be asked to choose from the pricing plans we've created. I'll select the Foundations Split Payment plan, then adjust the design settings to match my desired layout. I'll do the same for the other pricing plans, ensuring consistency in presentation.
Student Checkout Experience
When students visit the sales page, they can sign up by clicking the digital product block button, creating an account, or signing into an existing one. After the user signs in or creates an account, they will be led to the checkout page to make the purchase. After a successful purchase, the user will receive an email based on the settings under Customer Notifications Digital Products. The account pop-out menu will show up, where they can view the purchased courses, update their profile, and access other purchases within the site. That's how straightforward the process is from creating to selling courses on Squarespace.
Considerations Before You Start
Product Types
Since the launch of Courses, there are now two main categories of products you can sell on Squarespace:
Store Products: Allow multiple items to be added to the cart, including physical products, services, gift cards, and downloads. Downloads are part of store products, allowing users to automatically download ebooks, PDFs, or audio files.
Digital Products: Customers cannot purchase multiple courses or digital products in one checkout, as each pricing plan has a dedicated checkout page.
Website Plan
Squarespace makes it easy to get started with selling courses or digital products if the website is on at least the business plan. However, there is a 9% transaction fee on top of the payment processor fees, and video storage is limited to 30 minutes.
This setup is designed to help people start selling courses. If you're starting out, you can host videos on platforms like YouTube or Vimeo and embed them in Squarespace to avoid the 30-minute limit. However, if you wish to scale, consider the digital product add-on to increase video storage and reduce transaction fees.
Plan Options
To summarize plan options:
On a typical website plan, either business or commerce, there's no add-on fee, but a 9% transaction fee per digital product sold, and video storage is limited to 30 minutes.
To extend video storage and reduce transaction fees, consider subscribing to the digital product add-on.
Here are the add-on fees per month if paid annually, increasing if paid monthly. The Pro add-on is $149 per month, a significant investment, but for course creators with high sales volumes, it makes sense to invest in a tier with 0% transaction fees.
Comparison with Other Course Platforms
Comparing with other course platforms, Squarespace's pricing is quite reasonable. For instance, Kajabi charges a premium for removing branding and adding custom code, and there are limits on the number of active customers. While Kajabi offers many features that Squarespace does not, not all education businesses need those features.
Teachable's Pro Plan, which I currently use, has a maximum of 50 published products, potentially limiting for some creators. Thinkific's Grow Plan is most comparable with Squarespace, as it allows removing Thinkific branding.
Conclusion
Each platform has its pros and cons, and it boils down to your specific needs. Do you value delightful editing and branded experiences, or are affiliate programs and bulk enrollments more important? For me, design is crucial, so I use workarounds for automations to benefit from the beautifully branded and content-rich experience now possible with Squarespace Courses.
I hope this walkthrough of Squarespace Courses has been helpful. I know you might have more questions, like how to migrate from another platform to Squarespace Courses or how to configure advanced automations. I've devised workarounds to address these needs, and I'd love to hear via the comments which topic you'd like me to tackle next. While I may not be able to respond to all comments, I offer personalized coaching and support within my program, Standout Squarespace. So if you'd like personalized support, check out Standout Squarespace.
How to build testimonial carousels in Squarespace 7.1
Sharing an easy way to create a beautiful testimonial slider using thew Auto-Layout list feature of Squarespace.
As a Squarespace designer, you've probably know the feeling of adding content block by block. While this gives you a lot of freedom within the website builder, sometimes it can get a bit tedious having to manually arrange the elements for more complex layouts.
Good thing there's a new Squarespace 7.1 feature on the block—the auto-layout sections. This means that we're now able to arrange text and media automatically based on a specified setting.
There are three auto-layout categories to choose from: list, people, and headlines. Now it's easier than ever to showcase testimonials, banners, galleries, and many more.
Wondering how to make the most out of this new feature? Let's deep dive into customizing testimonial carousels using CSS.
If you're interested in learning more about how to code unexpected websites, you can check out my signature course Standout Squarespace. It's where I teach you everything you need to know to become a web designer & developer.
Section properties
To start, add a section and go to Headlines > Banner Slideshow, then click Edit Content > Design to switch to the carousel layout.
Under the Elements tab, make sure that the image, title, and body are all shown. You can leave the button turned off for this use case.
Add all the testimonials—photo, title, and description—you want to feature under the Content tab.
Back to the Design tab, we need to make sure to set the alignment to center and the max columns to 1. Image crop is set to 1:1 ratio so we could round the corners later. Don't forget to turn off "show adjacent slides" but enable infinite scroll.
Let's go to Size & Space under the Design tab to configure more details for the slider. Toggle media width to around 10%, though this could vary depending on your design. Content width can be set to medium, while media placement should be centered.
The space between elements can be set to 1-2%. Note that the space between sliders would not matter when we have a max column of 1.
Set the vertical padding to large, with the position being either top or center—I personally prefer the top alignment.
Click on the Style tab under Design and activate the card and add background color to the testimonials.
Main CSS codes
If you sign up to access the codes, you'll see in the Notion document that I added snippets to customize the carousel.
All you need to do is to replace the placeholders in these snippets with the correct Section ID using the Squarespace ID Finder extension.
You probably notice that the navigation arrows are hidden, and that's because we made the image thumbnail small. We'll need to use CSS to reposition the arrows and make them visible again.
The next one is what creates the rounded image thumbnails for this carousel. Removing the border-radius property will turn your photo back into a square. If you need a border outline, just specify its width, type, and color (using hex code) in the values.
The card border & background snippet will allow you to tweak the border outline, type, and color in the same manner. You can define the background-color of the card using any hex code.
Last but not least, the content maximum width will manage the size of your cards depending on your design. Adjust your navigation offset via Edit Content > Design > Style depending on this value.
Optional CSS codes
To keep your testimonial cards of uniform size, you can add a code snippet for equal height items. Make sure that you add this at the very bottom of the code snippets you just added.
This will be handy if you'd like to feature several testimonial cards per slide. Just don't forget to add some space in between slides by going back to Edit Content > Design > Size & Space.
Mobile View
Look 👀at how the mobile view should look like.
Want your site to automatically play through your auto-layout testimonials?
Check out my mini-course to learn how with the help of JavaScript. Hope this quick tutorial helps!
PIN THIS POST
Add Multilingual Translator to Squarespace: Powered by Google Translate
Easily add a multi language translator to your Squarespace website powered by Google Translate.
In this blog post, I will share how to easily add a free language translator powered by Google Translate to any Squarespace website.
There are quite a few options to create a multilingual Squarespace website.
If you need more control over the translations, I recommend checking out Weglot. They have a smart technology to create an SEO-friendly version of your website on any language. They provide automatic translations per language but you also have controls to edit the translations.
However, if you are looking for a free option - I created a tutorial based on this codepen entry.
Please note that the translations are machine-generated using Google Translate’s technology. The beauty of this is it’s simple, easy-to-install and supports multiple languages.
Kindly watch the video below for a walkthrough.
To access the codes mentioned on the video, please click the button below
Want to add stylish and unexpected features in your Squarespace site?
Easily Create this stylish vertical tab feature.
Showcase a Scrollable Website page
Create a scrollable page by just using an image block and a couple of CSS Codes.
How can you best feature your website design portfolio? Here’s a great option using CSS. Create a scrollable page by just using an image block and a couple of CSS Codes. Please watch the video below to view the guided tutorial.
Kindly watch the video below for a walkthrough.
Please refer to the codes below as mentioned in the video above.
Paste the code below toDesign > Custom CSS
#PASTE-BLOCK-ID { height: 500px; max-width: 80%; margin:auto; width: 100%; overflow-y:scroll; overflow-x:hidden; filter: drop-shadow(2px 22px 40px rgba(0,0,0,.3)); @media screen and (max-width:767px) { height:200px; } }
To customize the scrollbar
::scrollbar { width: 3px; /* Scrollbar Thickness */ height:15px; } ::scrollbar-thumb { background: #22514A; } ::scrollbar-track { background: white; /* Background Color */ }
Want to add stylish and unexpected features in your Squarespace site?
Easily Create this stylish vertical tab feature.
Easy Workarounds for Squarespace Member Area
In this blog post, I share helpful workarounds on how to address limitations of the Squarespace Member Area Feature. From how to avoid transactional fees to how to create a custom navigation,
This is the Part Two of my series on the brand new Member Areas in Squarespace. Click here to read Part One, which is all about its features and setup.
In the previous blog post, we talked about how the Squarespace Member Areas and its basic features. It's a good match for you if you're looking for a simpler option to handle your exclusive content within your very own site.
While this add-on isn't as robust as other LMS like Teachable or Kajabi, it doesn't have to be. Let's talk about these limitations, along with some of my secret hacks for (1) transaction fees, (2) affiliate marketing and bundling, and (3) sidebar navigation.
Kindly watch the video below for a STEP bY STEP walkthrough ON
HOW TO Address known member area limitations.
What are the limitations of Squarespace Member Areas?
1. Fewer LMS functions
Admittedly, this first item on our list is the one thing that doesn't have a workaround for now. All users, regardless of plan, would be limited to 10 member areas at most. That means if you're offering a lot more courses than that, then this might not be the option for you.
It also has no video hosting feature, so your videos would have to be hosted elsewhere. I recommend Vimeo, which allows for high-quality videos and various embed options, but that comes with an additional cost of $20 per month.
Squarespace doesn't provide a progress tracker and other similar analytics, either. Then again, this won't be too much of a letdown if your focus is on community-building.
To hide the join button, add the snippet below to Settings> Code Injection > Footer
2. Less flexible checkout options
Using the native Squarespace checkout has its downsides as well.
For one, each transaction made through this checkout comes with a 1% commission fee on top of the Stripe and PayPal fees, even if we subscribe to the Pro plan. If you're offering a high-ticket program or expecting a lot of transactions soon, this could be a significant chunk of your income.
We can't offer installment payment plans via Squarespace checkout, either. Customers would only be able to choose between one-time payment and subscription.
Bundling is not yet possible here, since each member area corresponds to only one fee structure. And while discounts are available, then can only be applied site-wide.
Not to worry, though—we'll discuss how to work around these limitations later.
3. Limited workflow automation
The Squarespace API is not yet publicly available as of now, so it's not yet possible to create automations using Zapier. We'd have to manually upload members to our email extension, unless we're using Squarespace Email Campaigns.
The affiliate system is also not built-in, so there's no way to automate this using the Squarespace checkout. But again, there's a way to bypass these limitations.
4. Default navigation styles
Though we did discuss how we'd have a lot of control over the branding of Member Areas, this unfortunately doesn't extend to our navigation. The only styles available for this purpose are automatically generated by Squarespace.
However, using CSS and JavaScript could help us create and customize a custom side navigation if we want to make our design stand out.
Payment gateway workaround
Majority of the limitations of Member Areas center around the lack of functions in their native checkout feature. That means we can effectively overcome these problems by working with a third-party payment gateway.
To set up your third-party payment gateway, here are the simple steps you can follow:
1. Set up a free member area... and hide the join button
If you're going to use the Squarespace Member Areas, it's best to set up a free membership space so that you won't have to use its native checkout feature. Still, we'd have to work on safeguarding your premium content by adjusting the settings.
Whenever a person clicks on your member area without an account, they'll be redirected to an Access Denied screen, where they'd be prompted to join if they haven't yet. You'd have to hide this default member sign-up block using CSS and JavaScript so they can't bypass the payment gateway.
All you have to do is add the snippet below to Settings> Code Injection > Footer.
<!--Squarestylist Snippet to Hide Join Button--> <script> var sqelem= document.querySelector('#sqs-member-access-page-root .sqs-editable-button'); sqelem.remove(); </script> <!--END SQSTYLIST JOIN BUTTON-->
Also, don't forget add this code snippet to Custom CSS. Press Cmd+Ctrl + ↓ to immediately get to the very end of your panel.
#sqs-member-access-page-root .sqs-editable-button {
display:none;
}2. Create a post-purchase page
Next, we need to build out a post-purchase page where we could place the member sign-up block for new members. Just add a blank page under the Not Linked section of your Squarespace site.
You can briefly thank the user for purchasing your course before adding your member sign-up block below it. "Create a new account" could be a good call to action for the button.
Head to Page Settings > SEO to hide this page from search results. This is very important.
In addition, make sure that your URL slug is complicated enough so that people won't be able to guess your post-purchase page. You can insert a random string of alphanumeric characters for this purpose.
3. Set up a third-party payment gateway
You can use Samcart or Dubsado for this step, but I do recommend Thrivecart, which is what I use for my own digital products. I've been using their product for months now, and I really love how powerful and promising its features are.
Split payments
More recurring fee options
No transaction fees
Integrated with Authorize.net
Great affiliate program
Upsell/downsell options
Bundling option available
Most importantly, their customer support is truly superb. If you're interested, you can start using Thrivecart after making a one-time payment through my affiliate link.
Once you're in, you can create a new digital product (a.k.a. your course or membership), choose pricing options (even calculate sales tax), add a bump offer to upsell, then set up your affiliate system. Make sure you add your support email and send them to your post-purchase page via URL.
Please note that membership cancellations won't be automatically processed. Inform your customers that they'd have to email you to cancel their membership.
Watch the video above if you'd like to see a more comprehensive walkthrough of this process.
Navigation style workaround
Want to learn how to create the custom sidebar per member area?
To elevate your membership site, you have the option to recreate this custom side navigation, which your members can open or close anytime. Click the button below to check out this stylish section designed for Squarespace Member Areas.
Pin this post
