How to Add a Custom Scroll-to-Top Button in Squarespace

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.

1. Introduction

2. Installation Steps

How to Add a Custom Scroll-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

1. 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.

2. 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.

3. 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!

4. Add Alt Text for Accessibility
   For accessibility, label the alt text as “Scroll to Top.”

5. 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.

6. Positioning
   For a standard placement, drag the image to the bottom-right corner of the footer.

7. Save Your Changes

Step 2: Adding the Code

With the image in place, we’ll add some code to bring it to life.

1. Open the Code Injection Section
   From your main menu, search for “Code” to access the Code Injection area.

2. 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;
}

Scroll to Top Button

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

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.

1. Introduction

2. Installation Steps

3. Additional Resources

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

1. Add a Blank Section: Begin by adding a new section to your page. Choose the blank section to have full control over element placement.

2. Activate the Grid: For easy alignment, press the G key to display the grid. This will help visualize where your elements will sit on the screen.

3. 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

1. 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.

2. Text Block: Anchor your left side with a text block. Drag it flush to the edge for a true split-screen look.

3. 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.

4. Vertical Centering: Center-align the text by using the layout options to ensure it remains in

Fixed Split Section

Step 3: Building the Right Side and Adding Decorative Elements

1. 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.

2. Make Adjustments: You may copy-paste additional elements by pressing Command+C and Command+V to fill out the section.

Step 4: Implementing the Sticky Effect

1. 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.

2. 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.

1. Reposition Elements for Mobile: Adjust each block’s placement to ensure the layout is clean and functional on smaller screens.

2. 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?

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.

1. Introduction

2. 3 Steps to Learn Code the Easy Way

3. My honest take on coding

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

Here’s how to add accordion menus to your Squarespace product detail pages.

1. Introduction

2. Installation Steps

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

1. 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.

2. 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.

3. 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.

4. 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.

ACCESS THE CODE SNIPPETS

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.

Accordion Menu for Product Items

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.

Fab & Free Flodesk Email Templates with Easy Tutorial

Add a whisper of nostalgia to your newsletters with our newly handcrafted trio of Flodesk templates

1. Introduction

2. The Templates

3. Watch Tutorial

Fab & Free flodesk email templates with easy tutorial

a.
Business
b.
Video

Introduction

We spend most of our workdays in our inbox. Today is about turning those moments into an enriching experience—one that enables us to intimately connect with our readers, be it their anxieties, hopes, or aspirations. Add a whisper of nostalgia to your newsletters with our newly handcrafted trio of Flodesk templates:

Nurture Template

Take the time each week to check in with your subscribers. It doesn't have to be anything out of the ordinary—you can start with a simple yet heartwarming story that makes them look forward to hearing from you.

Curate Template

There's a vast amount of resources out in the open. Too much, in fact, for any single person to grasp all at once. This newsletter can cast a wide net to filter out irrelevant information, offering nothing but the most significant details lined up for their weekly review.

Launch Template

Calling attention to your new product or service can feel like stepping out of your comfort zone. Allow this visual collage to ease you into your own brand voice—firm and steady, without the need to shout. Let your signature offer speak for itself.

Making These Templates Your Own

To get the most out of these templates, we highly recommend watching our comprehensive video tutorial. It walks you through each step of the customization process and offers valuable tips for creating engaging newsletters.

If you're new to Flodesk, you can start a free account and keep these templates for when you're ready to send your newsletter. We hope each lovingly crafted section makes you fall in love with email marketing the way we did.

How to Provide Squarespace Template Support

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.

1. Introduction

2. What is Template Wizard

3. Should you Start Selling Templates

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:

1. They'll be directed to a password-protected page on your website.

2. This page link will be sent to them via email immediately after purchase (if you follow our automation process).

3. 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:

1. Getting Started Module:

   • Instructions on backing up sections before editing

   • Tips for previewing their website effectively

2. Customization Essentials:

   • Covers only the most crucial aspects of website customization

   • Keeps videos concise, as we've learned template customers prefer brevity

3. 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

4. Automatic Updates:

   • We keep the videos current, updating them whenever Squarespace changes its interface

5. 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:

1. Provide step-by-step instructions

2. Point to the primary resource (video)

3. 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:

1. First, seek support via the Template Wizard

2. 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

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.

1. Introduction

2. Five Benefits of Selling Templates

3. Should you Start Selling Templates

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.

Your easy, effortless Intro to Design Intensives

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.

1. Introduction

2. What are Intensives

3. Clients best suited for Intensives

4. Should your offer Intensives?

Your easy, effortless intro to design intensives

a.
Business
b.
Article

Introduction

An intuitive glance of the web design industry might tell you that the most reliable way to set up your studio is to provide a fully custom, one-on-one design experience to high-ticket clients. This was how I got my own foot in the door—by looking for businesses in Southeast Asia who were willing to invest in expertise for their digital presence. However, not every prospect that comes knocking would be able to afford this level of support from you.

On the other hand, you could create and sell templates as I’ve done myself a few years down the line. But this passive income takes time before it can make a substantial contribution.

Thankfully, there now exists a third way for web designers, one that can integrate some form of customization from 1:1 services with the convenience of standardized templates. Design intensives are emerging as a new, flexible offer among studios—and for good reason.

What are design intensives?

You may know it by its other names: design days, day rates, day intensives—or alternatively, its weekly variants. Simply put, when I say design intensives, I’m talking about an offering that leverages on the select range of website customization a single day or week can allow.

Speed sets this offer apart from other options. Intensives are more time-efficient compared to fully custom design services, where strategy requires longer deliberation, and do-it-yourself solutions, where lack of experience might lead to more trial and error down the road. As such, the underlying system has to be streamlined and refined from an existing design workflow to make it possible in the first place.

Some people may balk at paying a thousand dollars or two for a day’s worth of design, but it can take years of skill and experience to pull off this caliber of efficiency. The premium pricing of design intensives is meant to reflect your expertise.

Clients best suited for design intensives

Not all entrepreneurs are seeking a highly personalized design experience, nor could they afford to invest a relatively huge amount into their website when they’re just starting out. In my experience, these are some tell-tale signs that potential clients may be a great fit for design intensives:

1. They’re looking for a simple website

For a number of small businesses, the functions and prerequisites they want to see on their website are straightforward—perhaps the homepage, about page, services page, blog collection, and contact form will do. Not a lot of bells and whistles, so clients don’t want to drag out the build process for too long.

If you already have an established process for such cases, especially in a niche you know like the back of your hand, then you might want to consider design intensives.

2. They need to launch their websites ASAP

Are you in talks with someone who seems to just want to get their website out of the way? They’d be happy with any minimum viable product you can come up with so they can launch in a few weeks’ time and take it from there.

They could look for a template, but they’re too pressed for time to set it up themselves. In fact, they might have even come across your template when they approached you to request a couple of small tweaks upon installation. This is where intensives could come in handy for template reskins.

3. They already know what they want

These types of clients have a singular goal and clear aesthetic in mind for their business. Their requests are website projects simply awaiting your creative execution.

Since time is of the essence, you cannot work on strategy and execution simultaneously; both you and the client would have to collaborate towards one of these two. Otherwise you might have to dedicate one design day for strategy then another round for the website build itself.

4. They can be quick on their feet

When you’re running a tight ship, there can be no space for excessive back and forth communication. You’d want to check if you’re working with a small team, preferably with one decision maker keeping in touch with you throughout the day. Observe closely if they have the ability to make snap decisions within your discovery call.

5. They have a list of random website tasks

Businesses could also have recurring website needs that may not be readily listed in your service packages. For instance, what if they need a designer to publish a couple of new product pages or blog posts on their behalf? If there’s a small glitch in one section you coded in—you just have to get into their backend to make a quick edit?

The day rate can provide a baseline for miscellaneous add-on or support services to new or returning clients. In this case, intensives may prove to be a better alternative if you find that hourly rates tend to be too constricting and monthly retainers too unpredictable.

Should you offer design intensives?

If you’ve been offering fully custom web design services for a while and you’re coming across quite a number of potential clients like these, it might be time for you to consider an offering that meets them where they are rather than turning them down entirely. There’s still an opportunity for you to work together there even when you have to reconsider the finer details of your collaboration.

I didn’t always offer this as a service outside of my custom-coded builds, until someone who expressed their love for my distinct style said, “I don’t need the full extent of the design experience you can offer. Admittedly, my business can’t afford that right now. But I would really appreciate a touch of your expertise for my website.”

To me, that put into words the value that design intensives could offer at the end of the day. If this is something you’d also like to provide for future clients, I have a workshop that can help you learn everything you need to know before getting started:

A Tour of our new website

In this video, I walk you through all the thoughtful features of this theme and my approach in building such. You also have the option to access this theme and use it in your projects by enrolling in my Shopify course, Standout Shopify

1. Video

2. Introduction

3. Timestamped Overview

4. Resources

A TOUR OF OUR NEW WEBSITE

a.
Squarespace
b.
Video Walkthrough

Introduction

In this video, I'll take you on a tour of our newly revamped Squarestylist.com website, live on Squarespace. As the founder and educator behind Squarestylist, I'm thrilled to showcase our creative resource library for designers and developers.

I'll walk you through our interactive homepage, comprehensive courses section, and resource-rich blog. You'll discover our standout directory of expert designers and the inspiring showcase of student-built websites. I'll point out the thoughtful design elements, from custom imagery to handcrafted details, that reflect our unique brand identity. More so, I'll demonstrate how we've reimagined layouts using the magic of code, creating unexpected and user-friendly experiences across both desktop and mobile views. You'll see how we've minimized clicks and maximized engagement throughout the site. Hope this tour of the new Squarestylist website will inspire you to push the envelope of what's possible in web design.

A Preview of our new website

Timestamped Overview

• 00:29 Website Vision: Vision for the brand as a creative resource library for web designers and developers.

• 00:55 Website Features: Overview of the new website's features, starting with the new logo and horizontal scroll showcase.

• 02:05 Homepage Design Philosophy: Homepage as an overview of the entire website, leading to main pages like About Us and Resources.

• 04:31 Courses Page: Overview of available courses, including flagship programs and short masterclasses.

• 05:39 About Page: Simple layout highlighting brand mission, ethos, and team members.

• 06:16 Resources Page: Interactive blog list with various formats including galleries and videos.

• 09:09 Directory Page: Celebration of students' work, with hover previews and detailed profiles.

• 12:59 Showcase Page: Exhibit of websites created by students, with filters and easy navigation.

• 17:10 Mobile View Highlights: Ensuring a seamless mobile experience, including horizontal scrolling and filter options.

How to build a Standout Squarespace site?

The making of the our new Brand Visual Identity.

1. Watch Video

2. Defining Standout Websites

3. Learn how to create expert-level websites

How to build a standout squarespace website

a.
Design
b.
Article

What Makes a Website Stand Out?

Since launching the Standout Workspace program in October 2020, I’ve noticed the term “standout website” being thrown around loosely. In this article, I want to clarify exactly what makes a website truly stand out. After building hundreds of websites and mentoring designers to do the same, I’ve identified two key hallmarks of a standout website: first, it is visually distinct, and second, it is expertly crafted.

Timestamped Overview

• 0:00 Introduction to standout websites and the creator’s experience.

• 0:19 Defining the two hallmarks of a standout website: visually distinct and expertly crafted.

• 01:10 The importance of visual distinction for brand identity and standing out among competition.

• 01:56 Common pitfalls of over-relying on Squarespace’s default features.

• 03:02 Emphasis on accessibility, responsiveness, and performance in web design.

• 04:01 Case studies of websites built using the standout method (Hotel Weekend, Hello World Studio).

• 06:16 Understanding expert craftsmanship in website building: intentional, thoughtful design.

• 09:03 Smart coding techniques to streamline website functionality.

• 12:46 Ensuring smart codes are reusable and adaptable for future site updates.

• 17:30 Details of the Standout Squarespace program and its two levels (Foundations and Advanced).

The Two Hallmarks of a Standout Website

1. Visually Distinct

A standout website must be visually distinct because a brand’s website is not just a platform to display information—it’s a creative tool for connection. In today’s digital world, where users encounter countless websites, how will yours resonate and stand out from the sea of forgotten browser tabs?

The distinction is in the details. Platforms like Squarespace make it simple to publish a website, but relying solely on default styles can result in websites that look and feel generic. For instance, Squarespace allows us to easily add headers, text blocks, and newsletter forms. But when we only use built-in styles, our sites can start looking a bit too familiar, even a bit “Squarespace-y.” I’m sure you’ve noticed this comment as well.

The Role of Familiarity

It's important to emphasize that creating familiar interfaces is actually a law of user experience design. As Raymond Loewy, the father of industrial design, said: “To sell something surprising, make it familiar, and to sell something familiar, make it surprising.” Our challenge as web designers is to create an experience that’s simultaneously surprising and familiar.

Balancing Surprise and Familiarity

In Squarespace, I achieve this by adding custom code to modify built-in features. For example, I can create a menu that’s both familiar and surprising by customizing the header’s layout or adding unexpected animation.

Examples of Visually Distinct Websites

I’ve mentored numerous designers and business owners to create websites that are truly distinct. A great example is Hotel Weekend, built by Natalia Swars, a member of our standout program. Her site was so impressive that Squarespace invited her to become an ambassador. Natalia attributes part of her success to the Standout Workspace program.

Another standout example is Hello World Studio, a fun and cosmic website created by two standout members who met through the program. This collaboration shows how Squarespace can support any brand aesthetic with a bit of creativity and code.

Lastly, the Hatties and Paw Art website, built by our standout member Ellie, is another shining example. This visually distinct site was built entirely on Squarespace but doesn’t scream "Squarespace," showcasing how creative customization can make any website stand out.

2. Expertly Crafted

Crafting with Ease and Delight

A website can be visually identical to another, but its craftsmanship determines if it stands out. An expertly crafted website is not only easy to build but also delightful to update.

Here’s a breakdown of the differences:

1. Patchwork websites rely on guesswork and piecemeal solutions.

2. Expertly crafted websites are intentional at every step, meeting professional standards in accessibility, performance, and responsiveness.

Even though all of us have access to platforms like Squarespace, it’s how we use these tools that matters. For example, I built an entire project using Squarespace’s built-in features with minimal code. Still, I followed my Standout Squarespace Checklist, ensuring compliance with key web standards.

Even though all of us have access to platforms like Squarespace, it’s how we use these tools that matters. For example, I built an entire project using Squarespace’s built-in features with minimal code. Still, I followed my Standout Squarespace Checklist, ensuring compliance with key web standards.

Smart Coding Techniques

Smart coding is essential for building a standout website. Before adding any additional code, I ask myself key questions:

1. Will this code slow down the site or impact accessibility?

2. Will it be easy to update?

3. Will it unintentionally affect other elements?

By being mindful of the answers to these questions, I avoid the common pitfalls of mindlessly copying and pasting code from online sources.

Streamlined and Efficient Websites

An expertly crafted website is also streamlined and efficient. For example, many designers overcomplicate things by adding unnecessary lines of code. However, with smart coding techniques, we can often achieve the same outcome with just one line of code.

This smart approach not only makes the site easier to manage but also allows for efficient future updates. For instance, if I want to style a blog collection, I’ll do so by adding minimal CSS, ensuring the collection looks unique while leveraging built-in features like pagination.

Innovating with Code

Lastly, a standout website isn’t just cookie-cutter; it’s innovative. When we understand the underlying principles and code, we can combine them in creative ways to create something new. One of our standout members, Zo, used a pre-existing workshop technique as a starting point to create a unique folder tabs feature on her website.

Another member, Lauren, transformed her portfolio collection into a stylish showcase by combining foundational techniques and adding custom features like filter options.

The Standout Workspace Program

If building a standout website seems intimidating, know that there’s a smart way to do it—by learning smart coding techniques. In the Standout Workspace program, you’ll not only learn how to build visually distinct and expertly crafted websites, but you’ll also learn to do so efficiently and creatively.

Program Levels

We offer two levels in our program:

Foundations Level:

In this level, you’ll learn how to build a complete website from start to finish, using the Standout Checklist to ensure compliance with accessibility, performance, and responsiveness standards.

Advanced Level:

Here, we push the boundaries of Squarespace by teaching smart coding techniques.

You’ll build a project together with me, like the Hologram Concept Project, to solidify your understanding of advanced coding and web design.

Workshops and Resources

Our program includes numerous workshops, covering highly sought-after techniques, such as smart coding for galleries or customizing blog lists. These workshops are available in our ever-growing library, and we offer continuous support within our community.

Additionally, we provide complete business resources to streamline client communication—from discovery call scripts to email templates—all accessible in our knowledge base.

If you’re ready to start building standout websites, you can join the Standout Workspace program. Check out our website at StandoutSquare.Space to get started.

Behind the scenes of our New Brand

The making of the our new Brand Visual Identity.

1. A New Chapter

2. Our New Brand Identity

3. Words from our Designer

Behind the scenes of our New Brand

a.
Design
b.
Article

A New chapter of squarestylist

Things are changing here at Squarestylist, and we're excited to share our journey with you.

What began as a personal project has blossomed into something much larger. Today, Squarestylist serves hundreds of students enrolled in our signature programs and thousands more who follow us intently. As we've grown, so too has our vision.

Our Core Tenets

At the heart of Squarestylist's elevated look and feel are two core tenets:

1. Handcrafted

2. Hand-coded

These principles guide us as we move our business closer to where we want it to be—closer to the creatives we aim to serve.

A Creative Resource Library

We're redefining Squarestylist as a creative resource library: a place that draws meaning from the warmth of the physical and the breadth of the digital. It's an ode to continuous learning, designed to inspire and empower web designers through code and curated resources.

Our new brand identity, crafted in collaboration with Char Gladden Studio, reflects this evolution. The new logo represents the weaving of skills, with each letterform honoring a thread of discipline entwined in our work.

Our Journey

Founded out of a desire to empower web designers through code, Squarestylist has taken us on an incredible journey:

• Launching signature courses, Standout Squarespace and Standout Shopify

• Speaking at various podcasts & webinars

• Witnessing countless students start their own design studios, sign ideal clients, and launch their own templates

These experiences have shaped us and reinforced our commitment to serving web designers better.

Our New Visual Identity

Our custom logo, created by Char Gladden, represents the disciplines of craft and code with a distinctively tactile, vintage quality. It honors those who have come before us and the family who have shaped us. The intertwining letterforms symbolize the weaving of skills and disciplines that define Squarestylist.

Char also facilitated the custom shoot for our custom imagery. The exquisite photography is by Dimanche Creative.

Words From our Designer

Char Gladden, the creative force behind our new brand identity, shares her thoughts on the process:

"Working with Squarestylist to create this new brand identity was a journey of discovery and creativity. We sought to commingle the practices of craft, code, and tactility to create a Creative Resource Library that truly represents Rache's vision and the community she's built.

The depths to which we delved in this work - from unearthing a new language through strategy that articulates the breadth of the practice, to crafting tactile imagery that speaks to the dexterity of code through nuanced, ephemeral brand imagery - culminated in our most robust website design to date.

Each aspect of this brand was singularly considered; every line and sketch and distinctively analog moment. Our creative paths honor those who have come before us, paving the way for those to come; the heart of Squarestylist and its philanthropic ethos, openhandedly problem solving and offering counsel."

Looking Forward

We're excited to continue growing with you, offering a place where you can draw inspiration from curated resources and featured sites alike. Thank you for being part of the Squarestylist community. Together, we're weaving a tapestry of creativity, code, and continuous learning.

Craft and Code: Our Journal

Join our newsletter, Craft and Code - where creativity finds the curious.

1. Invitation

2. Sign-up Form

Craft and Code: Our Newsletter

a.
Business
b.
Article

Our Newsletter

Craft and Code is a loose sketchbook of sorts for design and coding exploration. These handwritten notes are written in honor of what holds my curiosity each day. Hopefully this stirs you the same way—to continuously find fascination in creativity, both in the midst of doing and opening yourself up to its possibilities.

You can expect it every other Wednesday, right when we creatives are most in need of inspiration to strike us.

How I built my dream Shopify Theme

In this video, I walk you through all the thoughtful features of this theme and my approach in building such. You also have the option to access this theme and use it in your projects by enrolling in my Shopify course, Standout Shopify

1. Video

2. Introduction

3. Timestamped Overview

4. Resources

How I built my dream Shopify Theme

a.
Shopify
b.
Video Walkthrough

Introduction

I used to spend $400 for every Shopify project that I take on as a web designer. But I'll never have to do that again since I built my very own Shopify Theme - The Esencia Theme. It's the best Shopify theme based on my style and requirements as a web designer. In this video, I walk you through all the thoughtful features of this theme and my approach in building such. You also have the option to access this theme and use it in your projects by enrolling in my Shopify course, Standout Shopify.

A Preview of the Esencia Theme

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

Resources

• Standout Shopify

Formatted Transcript

I used to spend $400 on every new Shopify project as a web designer. Each time, I had to purchase a paid Shopify theme and then spend days customizing it to fit my client's brand. These themes often came bloated with features I didn't need, which slowed down site performance. That's when I decided to take matters into my own hands and learn how to build my own Shopify theme.

Now, I no longer need to spend that money or time because I've created a versatile, lightweight, and powerful Shopify theme tailored to my taste and aesthetics. This theme, which I call the Esencia Theme, has functional and design-forward section templates that I can further style to suit any brand I'm working on. It's flexible enough to be used in every project and designed to optimize searchability, accessibility, and performance.

Key Features and Customization

1. Starting with Shopify's Dawn Theme: I began with Shopify's free Dawn theme. It's lightweight, mobile-first, and has minimal JavaScript, making it a great starting point. From there, I added my custom CSS file for further styling.

2. Adding a Custom CSS File: I created a CSS file with all the style customizations that couldn't be done with the built-in options. This includes refinements for key elements like headers, buttons, and pop-ups. Keeping all my style customizations in one CSS file makes it easy to update with any changes to Shopify or the Dawn theme.

3. Introducing the Power Section: The Power Section is a game-changer for Shopify theme development. It allows for unlimited design possibilities by letting me add any element to the section grid. This means I can create unique layouts without having to code new custom sections or modify existing ones.

4. Incorporating Optional Section Templates: I also developed several stylish and functional section templates, like vertical tabs, marquee sliders, and content tabs. These templates are easy to customize and can be added to any page of the site, enhancing the design and functionality of each project.

Shopify Theme Development Process

Here's how you can leverage the Esencia Theme for your projects:

1. Start with a Base Theme: Use Shopify's Dawn theme as your starting point. Customize it with a CSS file to refine styles to your liking.

2. Add Power Sections: Use the Power Section to design flexible and dynamic layouts. This section allows you to add elements like images, videos, and app blocks anywhere within the grid.

3. Use Section Templates: Leverage the built-in section templates like vertical tabs and marquee sliders to create engaging and functional designs. Customize these templates using CSS for a unique look.

4. Utilize Metaobjects and Metafields: Combine section templates with metaobjects and metafields to add unique content to specific pages, such as product details or custom layouts.

Learn to Build Your Own Shopify Theme

If you're curious about how I built my own Shopify theme and want to take your design business to the next level, check out my program, Standout Shopify. The program offers two tiers:

1. Foundations Tier: Perfect for beginners, this tier provides a non-exclusive, unlimited license to the Esencia Theme and a comprehensive curriculum to get you started with Shopify theme development. You can use the theme in any of your client projects without additional costs.

2. Pro Tier: For those ready to push the boundaries of Shopify through coding, this tier offers advanced training and additional resources to help you build and customize your own themes.

You can start with the Foundations Tier and upgrade to the Pro Tier anytime. Any payments made for the Foundations Tier will be applied towards the Pro version.

Add Custom Fonts to Squarespace: using our Magical Tool

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.

1. Video

2. Introduction

3. Timestamped Overview

4. Resources

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

Resources

- Access the FontWiz tool

- Squarespace Design and Coding course

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

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

1. Video

2. Introduction

3. Timestamps

4. Resources

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

• Access the Vault

• Join our Standout Squarespace Course

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

In this video I’ll show you how to use this new Squarespace new monetization feature for your blogs.

1. Video

2. Introduction

3. Timestamped Overview

4. Resources

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

- Squarespace Design and Coding course

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

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.

1. Video

2. Introduction

3. Timestamped Overview

4. Resources

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.

How to Test if your Emails are Authenticated

Full authentication of your emails according to this guide will enhance your email deliverability i.e. avoiding spam filters or bounces. The video guide comes with a step-by-step guide that you may download by signing up for our mailing list.

1. Video

2. Introduction

3. Timestamped Overview

4. Resources

Ensuring Email Authentication with Google and Yahoo

a.
Squarespace
b.
Video Walkthrough

Introduction

Google and Yahoo will enforce stricter requirements to authenticate emails starting Feb 1, 2024. This applies to all emails across email sources.  In this video, you'll learn:

1. The level of authentication that your emails require depending on the volume of emails that you send

2. How to test and understand if your emails are properly authenticated

3. How to properly set up SPF, DKIM and DMARC authentication for each email source

4. What further steps to take to fill gaps and resolve errors

5. Best practices to avoid domain errors unnecessary steps

Timestamped Overview

• 0:01 Announcement of stricter email authentication requirements by Google and Yahoo.

• 0:12 Importance of meeting these requirements to avoid delivery issues.

• 0:31 Common issues and confusion with setup instructions.

• 0:49 How to test if your emails are properly authenticated.

• 01:16 Overview of the types of email sources.

• 03:03 Definition of a bulk sender and its implications.

• 04:38 Importance of email authentication to prevent impersonation and malicious messages.

• 05:18 Steps to test email authentication for marketing emails.

• 15:00 Troubleshooting and setting up email authentication records (SPF, DKIM, DMARC).

• 26:06 Summary and final steps for ensuring email authentication for transactional emails.

Resources

- Squarespace Design and Coding course

The Importance of Email Sender Authentication

Google and Yahoo recently announced that they will be enforcing stricter requirements for email sender authentication. These changes mean that if emails aren’t authenticated properly, they may either fail to deliver or be marked as spam.

By now, you’ve probably seen a few reminders asking you to set this up. If you’re using different technologies to send your emails, those reminders can sometimes be confusing or conflicting.

This guide will help you take the necessary actions, whether you haven’t done anything yet, or you've already made changes but want to ensure they were set up correctly. Let’s dive in.

Email Sources and Proper Authentication

The overarching requirement for any email sender is to ensure emails across all sources are properly authenticated.

What Are Email Sources?

Our emails come from a variety of sources, primarily categorized into three main types:

1. Direct Emails: Sent via platforms like Google Workspace, Microsoft, or Yahoo Mail.

2. Marketing Emails: These are sent via email service providers (ESPs) such as ConvertKit, Flowdesk, MailChimp, and ActiveCampaign, to name a few.

3. Transactional Emails: Typically sent from website hosts, CRMs, or payment gateways like Shopify, Dubsado, or Honeybook.

These email sources are crucial as they represent the different ways we communicate with our audience and clients.

What Does Proper Authentication Mean?

There’s a misconception that email sender authentication is only for bulk email senders. In reality, all emails should be authenticated. However, for bulk senders (those who send close to 5,000 emails within 24 hours), the authentication requirements are much stricter.

It’s important to note that once classified as a bulk sender, that status is permanent. Even if you reduce the number of emails sent per day, your classification will not change. For non-bulk senders, full email authentication is still highly recommended to ensure emails reach inboxes instead of spam folders.

Preparing for Stricter Requirements

Experts foresee that Google and Yahoo will soon expand these requirements to include non-bulk senders, so it’s crucial to be proactive and get your email sender authentication in place. For bulk senders, this is mandatory, and based on the recent announcements, enforcement will be strict.

Why Authentication Matters

Authentication records are essential not just to prevent malicious messages from reaching recipients, but also to protect businesses from being impersonated. A key record to consider is DMARC, which helps monitor whether your brand is being impersonated through email.

How to Test and Ensure Proper Authentication

Before diving into implementation, it’s crucial to understand your current authentication status and fill any gaps where needed.

Step 1: Testing Marketing Emails

1. Since a large portion of emails sent are for marketing, it’s essential to test your marketing emails first.

2. Log in to your ESP (e.g., ConvertKit, Flowdesk).

3. Send a test email to a personal Gmail account.

4. Check if the email is sent from a branded domain (e.g., hello@yourdomain.com) or a shared domain (e.g., via convertkit.com). Emails should be sent via your branded domain to comply with authentication requirements.

5. Shared domains won’t pass DMARC authentication, so if your test fails, you’ll need to troubleshoot by verifying your custom domain with your ESP.

Step 2: Check SPF, DKIM, and DMARC Records

Once you receive your test email, follow these steps:

Click the ellipsis icon in Gmail and select Show Original to view the email header.

Check for the three required authentication records: SPF, DKIM, and DMARC. All should have a value of “pass.”

If any of these records fail, it’s time to address the issue:

1. SPF Record: Ensures your email is sent from authorized servers.

2. DKIM Record: Confirms that the email has not been tampered with.

3. DMARC Record: Ensures the SPF and DKIM records align with the domain used in the “From” address.

Verifying and Fixing Issues with Email Authentication

Ensuring your emails are properly authenticated is critical to protecting your domain reputation and improving deliverability. If you’ve failed any of the sender authentication tests, don’t worry—we’re going to dive into the troubleshooting process step by step. Let’s break it down.

Verifying Your Custom Domain

If you failed the branded sending domain test, the first step is to review the documentation provided by your email service provider (ESP) on how to verify your custom domain. I've linked resources on how to accomplish this for popular ESPs. Just make sure you have access to your DNS records via your domain host—not your website host. This is crucial.

In the case of Flodesk, you first need to define the sending address. Make sure it's a custom domain, not something like a Gmail or Yahoo address.

Once you've nominated the sender email, the next step is to verify your domain. This is key for sending marketing emails from a branded sending domain.

Editing DNS Records for Different ESPs

Depending on your ESP, the process might look different, but the general approach is the same: edit the DNS records via your domain host. For Flodesk, you can either verify your domain automatically or manually. I prefer to verify it manually because it gives me more control over the DNS records.

If you're not confident in editing these records, reach out to your domain host or consult an expert.

When doing it manually, you will be asked to add DNS records like CNAME for DKIM and SPF, and Text for DMARC. Pay close attention to the record type to avoid any errors. Be careful with DMARC records—there should be no duplicate entries.

Adding CNAME and Text Records

When adding CNAME records, start with DKIM. ESPs often append your domain automatically, so you should only copy the part without the domain. After saving the CNAME record, proceed with the SPF record. If your ESP uses a text record instead of CNAME for SPF, make sure you don’t add duplicate records.

DMARC Records and Avoiding Duplicates

Before adding any text records like DMARC, it's important to check for any existing records. I recommend using a tool like Dmarcian Domain Checker, which I’ve linked below, to verify whether you already have a DMARC or SPF record in place. If you find duplicates, you’ll need to clean those up before proceeding. The DMARC record should follow the format: P=none, which is a basic level of monitoring and authentication.

If you're ready to step up your authentication game, you can modify this DMARC setting for stricter security. Some documentation might recommend adding an email to receive DMARC reports, but until you're ready for more advanced monitoring, a P=none setting is sufficient.

Waiting for Domain Verification

Once you've added all the necessary records, the system might take 48 to 72 hours to verify your domain. Once verified, you can test your email again to ensure you pass all the sender authentication checks.

Different ESPs handle this process differently. For example, services like ConvertKit or Flodesk will follow a similar process of adding CNAME and text records. If you’ve set up your branded sending domain before 2024, you may not have a DMARC record, as it was implemented more recently.

Ensuring Full Authentication for Better Deliverability

Once fully authenticated, your deliverability will improve because it’s now based on your domain’s reputation, not a shared domain. Shared domains affect deliverability negatively because all users share the same IP. DMARC is particularly important here because it ensures that the domains in your DKIM and SPF records align with the domain in the email's from field.

Warming Up Your Domain

When switching to a branded domain, it's crucial to gradually increase the sending volume to build a positive sender reputation. This process, known as warming up your domain, involves sending emails to your most engaged segment first, then slowly ramping up volume over a period of two to four weeks.

Authenticating Direct Emails

Once your marketing emails are authenticated, you can move on to direct email authentication. I used Flodesk to send an email to my personal Gmail account, and then checked the headers for SPF, DKIM, and DMARC—these should all pass. If your setup isn’t quite there yet, don’t worry—many systems return a neutral SPF result, which is a soft fail. You can address this by setting up SPF and DKIM specific to your email provider.

Troubleshooting Direct Email Authentication

To authenticate your direct emails, you’ll need to check your existing DNS records, especially for SPF and DKIM. Tools like Dmarcian help ensure you don’t have duplicate records. If you already have a DMARC record for marketing emails, you’re in good shape—but double-check the setup to avoid any issues.

Having Multiple DKIM Records for Different Providers

Yes, you can have multiple DKIM records. I’ve linked a guide to help you turn on DKIM authentication in Google Workspace. After generating the DKIM record, add it to your domain’s DNS settings. This record may take up to 48 hours to authenticate.

Testing After Setup

Once you’ve followed these steps, repeat the test to ensure that SPF, DKIM, and DMARC all pass. Authentication is critical for protecting your email sender reputation and improving deliverability.

Authenticating Transactional Emails

Transactional emails are another area to check. These emails can come from different services like your CRM, website host, or payment gateways. If these emails use your domain in the from address, you’ll need to authenticate them by setting up SPF, DKIM, and DMARC. For services like Shopify, follow similar DNS record steps to authenticate your domain.

Closing Thoughts

Setting up email sender authentication is crucial not only for complying with Google and Yahoo’s new requirements but also for ensuring that your emails are secure and land in the inbox, not the spam folder. Make sure to check your marketing, direct, and transactional emails, verify your domain, and monitor your email deliverability.

While I can't provide personalized support through comments, I offer high-touch support in my programs for designers or recommend experts to help you with this process.

Let’s get those emails authenticated!

Upgrade to Squarespace 7.1 in One click

This blog post will guide you through the upgrade process, sharing tips on how to plan, prepare, and execute the transition smoothly.

1. Video

2. Introduction

3. Timestamped Overview

4. Key Considerations

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

1. Billing Changes: That means your billing in Squarespace.

2. Data Loss: You'll lose all backend data, including order history, customer profiles, email campaigns, analytics history, memberships, and subscriptions.

3. Third-Party Tools: This will also require the use of a third-party tool to import blog posts and other content.

4. 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

1. Content Preservation: There's no need to import or export blog posts and other content because all content is kept intact.

2. 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.

3. 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:

1. 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.

2. 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.

3. 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.

4. 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 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

1. Video

2. Introduction

3. Timestamped Overview

4. Resources

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.

Resources

- Create an account and join our Squarespace Resource Vault mailing list →

- Squarespace Design and Coding course

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.