( RESOURCES ) Browse through our collection of tips & tricks for Squarespace, Shopify, web design, and business. It’s a digital trove of creative ideas right at your fingertips.
Elegant font pairings in Squarespace: A Designer’s Guide
Our favorite native fonts!
Working with Squarespace's native fonts, I've found these natural pairings that feel like quiet conversations on a page.
Elegant font pairings in Squarespace: A Designer’s Guide
a.
Squarespace
b.
Article
Typography has this subtle way of telling stories. Working with Squarespace's native fonts, I've found these natural pairings that feel like quiet conversations on a page. Each combination lives right there in your site settings — accessible, reliable, and ready to hand over creative control to your clients.
Why Native Fonts Matter
While it might be tempting to purchase the latest trending font for every project, Squarespace's built-in font library already offers an impressive collection of professional-grade typography that's optimized for web performance and accessibility. These fonts are carefully curated, professionally licensed for use within your Squarespace website, and thoroughly tested across different devices.
However, it's important to note: if you plan to use these fonts in other applications like print materials, logos, or external digital projects, you'll need to obtain additional licensing directly from the font foundries.
When to establish the type system
Ideally, typography choices should be established during the branding phase, before website development begins. For designers who handle both branding and web design, or business owners managing their own brand identity, consider these Squarespace font pairings during your brand development process. This ensures your website typography will seamlessly align with your overall brand strategy while maintaining the technical benefits of using Squarespace's native fonts
The Hidden Font Setting
While Squarespace appears to offer just two font choices — heading and paragraph, there's actually a hidden third option that can help us achieve an editorial look with more font styles. Check out this blog post to discover how to activate another font setting that can serve as our Deck/Intro font.
My Favorite Squarespace Font Pairings
Sofia Pro + Arial
Main Heading: Sofia Pro Condensed brings bold, modern impact
Intro Font: Sofia Pro (regular) adds a softer, welcoming touch that bridges the gap between the condensed headlines and body text
Body: Arial provides clean, reliable readability Perfect for lifestyle brands, food blogs, and creative businesses where approachability is key.
Ivy Presto + Fragment Mono
Main Heading: Ivy Presto commands attention with refined elegance
Intro Font: Fragment Mono brings an unexpected technical edge that creates intrigue
Body: Ivy Presto Text offers a more refined version optimized for shorter text blocks, maintaining the font's sophistication while improving readability.
Forma DJR Display + Forma DJR Text
Main Heading: Forma DJR Display offers bold, architectural presence
Intro Font: Freight Display's humanist details add a touch of elegance to supporting text
Body: Forma DJR Text, specially optimized for smaller sizes, maintains the font's geometric character while improving readability for shorter text blocks
This combination maintains excellent readability while feeling distinctly editorial. Works beautifully for lifestyle magazines and brand storytelling where visual hierarchy is crucial.
Chapman + Droid Sans Mono
Main Heading: Chapman brings classic editorial sophistication
Intro Font: Helvetica Neue acts as a versatile bridge between display and text
Body: Droid Sans Mono adds a contemporary technical touch when needed Perfect for editorial websites where you want to achieve that timeless magazine feel with modern functionality.
Mencken Standard + Archivo Narrow
Main Heading: Mencken Narrow creates striking, space-efficient headlines
Intro Font: Archivo Narrow offers a complementary sans-serif that maintains the editorial feel
Body: Mencken Standard is excellent for fashion, lifestyle, and editorial projects where space efficiency meets style.
Aktiv Grotesk Condensed + Mencken Standard
Main Heading: Aktiv Grotesk Condensed provides a strong, contemporary presence
Intro Font: Mencken Standard Head brings editorial sophistication to the deck/intro text
Body: Aktiv Grotesk (regular) ensures crisp readability. This combination reverses the typical serif-sans hierarchy to create a modern editorial aesthetic that works particularly well for health, wellness, and lifestyle content where you want to balance contemporary design with editorial credibility.
For Template Designers
If you're creating templates for sale, here's why sticking to Squarespace's native fonts is crucial:
Client Empowerment: Built-in fonts allow your clients to easily modify typography through Squarespace's interface without touching code
Website-use Licensing: You'll avoid any licensing complications
Seamless Handoff: Clients can confidently make typography adjustments without breaking the design
You may still provide resources on how to install custom fonts but it’s best to use a native font for the template that you’ll redistribute.
If you wish to learn more about Selling Squarespace Templates, check out our workshop on selling templates →
Best Practices
When applying these pairings in your designs:
Maintain proper heading hierarchy for SEO and accessibility
Use the scale text feature for visual impact while preserving semantic structure
Leverage Squarespace's built-in spacing and sizing controls
Consider how your typography choices translate across mobile devices
Typography isn't just about choosing beautiful fonts — it's about creating experiences that resonate with your audience while maintaining functionality and accessibility. These pairings are just starting points. The beauty of working with Squarespace's native fonts is the freedom to experiment while maintaining a professional, cohesive look that works across all devices and platforms.
The Hidden Font Hack to get the Editorial Look in Squarespace
Get that editorial look with this secret Squarespace setting
The Hidden font hack to achieve the editorial look in squarespace
a.
Squarespace
b.
Article
While Squarespace offers a robust selection of fonts, you might have noticed that the platform seemingly limits you to just two font options: heading and paragraph styles. But what if I told you there's a hidden third setting that could elevate your designs to magazine-worthy status?
Today, I'm excited to share one of my favorite Squarespace secrets that will help you achieve that polished, editorial look you've been dreaming of — all without touching a single line of custom code.
The Secret: Miscellaneous Font Setting
While most designers work exclusively with the heading and paragraph settings in Squarespace, there's actually a powerful third option hiding in plain sight: the miscellaneous font setting. This hidden gem opens up countless creative possibilities, especially when you want to add that elegant introductory text (what we call a "deck" in editorial design) between your headline and body copy.
Here's how you can leverage this secret to create sophisticated, magazine-style layouts:
How to Use the Hidden Font Setting
First, set up your basic font structure using the standard heading and paragraph settings in your Squarespace site styles.
Navigate to the font settings and locate the "Miscellaneous" option (it's easy to miss, but it's there!).
Choose your desired font for the miscellaneous setting. For example, if you're going for an editorial look, you might want to select something elegant like Sofia Pro from the legacy fonts.
To apply this third font style to any text, simply highlight the paragraph or introductory text you want to modify and assign it the "monospace" format.
Why This Hack Makes a Difference
The beauty of this technique lies in its versatility. You can now create three distinct typography layers in your design:
Bold, attention-grabbing headlines
Elegant, sophisticated deck text
Clean, readable body copy
This layered approach is exactly what gives editorial designs their professional, magazine-quality appeal. The best part? You can adjust the font sizes, letter spacing, and other properties of each layer independently, giving you complete control over your design hierarchy.
If you're excited to experiment with this technique, start by exploring different font combinations available within Squarespace.
You might be surprised by how many sophisticated pairings you can create using just the built-in options. I’d love for you to check out our blog post on my favorite font pairings on Squarespace →
The next time you're working on a client project that calls for that high-end, editorial feel, you'll have this powerful technique in your back pocket. No custom code required—just pure, native Squarespace magic.
Which website builder ranks best in accessibility?
Which website builder is the most accessible right out of the box? And how can we actually test if a website is accessible? This comprehensive review will help guide your choice.
Which website builder ranks best in accessibility?
We tested your go-to web design platforms so you don't have to. Get the full report to see how they compare.
Which website builder ranks best in accessibility?
To build a website is to create a welcoming space where visitors can engage with our brand. You'd likely keep in mind a few things: design, function, and ease of use. This way, anyone can enter and feel that their needs are catered to within your digital presence.
But not all needs are created equal. There are people with disabilities who require specific accommodations so they too can fully interact with the websites we create. Do we also make space for them in our web designs?
Certainly you'd want to serve as many users as possible, regardless of their ability. This is what we call accessibility, a principle that starts with choosing the right tools to prioritize usability.
We know you're committed to building inclusive websites that provide a meaningful experience to people of all abilities. That's why we decided to evaluate how popular website builders—Shopify, Showit, Squarespace, Webflow, and Wix—perform in terms of accessibility.
Why is accessibility important?
The World Health Organization (WHO) estimates that around 16% of the world's population—around 1.3 billion people—live with significant disability. In the US alone, that's more than 1 in 4 adults who need assistance in terms of cognition, mobility, hearing, vision, self-care, or independent living.
Amber Hinds, founder of accessibility-driven Equalize Digital, advocates strongly for their inclusion in digital spaces as in physical spaces.
"Accessibility at a baseline is about ensuring everybody can use the web and anyone can become a customer of your business or reader of your web content," she emphasizes in our interview.
From an entrepreneurial perspective, accessibility standards seem to fade in the background of more pressing concerns such as operations, marketing, or sales. But Amber believes that accessibility has broader implications that align with business goals. For one, merely ensuring that website elements like images and headers are properly tagged will also be beneficial to SEO. And besides, would clients want to miss out on a relatively sizable chunk of target customers?
She still finds, though, that the best way to widespread adoption of accessibility is to ensure they're already baked into the website builders we use:
"Having a builder or a toolset that you use when you're building websites for your clients that supports accessibility is good because you may be building this website and potentially handing it off to someone who [may be] good at using Microsoft Word, but that's about it." —Amber Hinds
This is ultimately what pushed Equalize Digital to assess the performance of WordPress builders—and inspired me to conduct a similar test on other platforms.
What were the considerations for this accessibility test?
Some aspects of accessibility rely on the platform or structure, others on the content or design. Since this is a comparability study of website builders, it was not feasible to test each template or every component. We also can't account for other factors like font pairings, color palette, or custom code, which depend on input and may be prone to user error.
Instead, Amber wants to focus on how platforms are providing guardrails with baseline features: "In what areas are certain builders stepping up and guiding users a little bit more?" You'd be surprised to hear that not all options consider accessibility by design, if at all.
We built test sites using the documentation and best practices of website builders to figure out what accessibility features they have by default. Even then, we know that these may not offer enough information to set up inclusive websites for non-technical users.
A keyboard and multiple screen readers (e.g. Mac VoiceOver, Windows Narrator) simulate common use cases for mobility and vision issues, among others.
"This is a snapshot. I think it's a really good snapshot," Amber remarks. "I think it shows a lot of variety, provides some really good patterns."
We focused on Website Code Architecture
Our study focused on the code architecture of the platforms. While content quality, assigning header tags, color contrast, and visual design are crucial for accessibility, these can be mostly controlled by the website creators.
Hence, our test focused on areas where platforms have most control — how their ready-made components are built and how their platform generates the underlying code structure.
For example, the DOM order, ARIA labels, and semantic structure are built into the platform's base architecture and gaps in these aspects persist regardless of how carefully a website creator follows content creation best practices and accessibility guidelines.
Amber thoroughly spent approximately 2-3 hours per platform to complete the accessibility audit matrix. You may view this along with her accessibility test videos.
What accessibility categories are we looking into?
Our accessibility study evaluates each website builder based on a rigorous set of criteria — it can get a pass, fail, concern, or not applicable (N/A) for every item. Their overall accessibility score reflects the percentage passed among the applicable measures.
We're generally testing the functionality and code architecture of ready-made components in five broad categories:
Headers
Starting from the top, we'd want to make a great first impression for visitors landing on our website. Can we use our keyboard to navigate through the menu? This could indicate that the focus feature is available for people who cannot use a mouse or trackpad. If there are issues, it might be helpful to inspect the code to see whether the items are properly tagged.
Users shouldn't be forced to tab through every dropdown item; in fact, we're looking for a hidden function called skip links which gives us an option to jump to the main content.
Text
Written content has to be indexed with a page language and flow smoothly without overlapping with other elements, even when zoomed in. Another crucial issue that gets overlooked most of the time? Underlined links—Amber stresses this as an easy fix to benefit users who may be color-blind.
Media
This time we're paying attention to images and videos on the platform. Does the website allow you to zoom in on pictures to see the details? How easy would it be for you to set up alt text? It's useful for screen readers and search engines alike.
Videos also have to function with proper keyboard navigation, regardless if they are directly hosted or embedded. There needs to be an easy way to pause any clip that's on autoplay.
Carousels & accordions
These two components need to be handled with care in terms of keyboard navigation.
Like videos, carousels must have a pause button for autoplay—or better yet, autoplay can be turned off by default. Your tab key has to be able to flip through the slides, with screen readers being able to glean content from each one.
As for accordions, we'd want to check if we can tab through the sections and expand them using the return (enter) or space key.
Forms
If there's one other crucial feature you need to look out for, it's your website's default form. Correct field grouping and labeling can allow for efficient autocompletion (e.g. name, address, email). Required fields must be marked prominently so people can't miss them. It's also better to use clear and concise descriptions for user input rather than inserting placeholder text.
Any screen reader should be able to read out comprehensive error or success messages after every form submission, so even those with impaired vision can get helpful feedback.
So which platforms performed well in accessibility?
No website builder is perfect, but some options are still better than others. Here's how a handful of popular platforms fared in a series of independent accessibility checks:
We're generally testing the functionality of default templates in five broad categories:
1. Shopify
The platform's default Dawn Theme shines in its emphasis on multi-national benchmarks for e-commerce websites. It's an undeniable well-rounder in our spreadsheets with the highest spikes in carousels and accordions, text, and media components. No wonder it's one of the most widely used base templates by expert designers and developers; even my Esencia theme in Standout Shopify is no exception.
"It makes sense that Shopify is putting a lot of effort into accessibility because a lot of the laws… [are] very focused on e-commerce," Amber explains. She does, however, think that they can still improve in terms of error descriptions and success messages for their forms.
2. Squarespace
The major 7.1 update to the platform furnishes all new websites with the same base template, so we can safely place the recent Fluid Engine in second rank. Squarespace did well with accordions just like Shopify, and it particularly excelled in its default forms. However, there are a few concerns in navigating carousels, zoom, and focus indicators via keyboard.
Squarespace remains to be a well-performing choice for accessibility, especially for service-based businesses that do not need the commercial bells and whistles of Shopify.
3. Webflow
This website builder is known for its relatively steep learning curve, and the same can be said of its settings for accessibility. Even we had to dig deeper into its documentation to look for setting up the site for success, with mixed results.
A lot of these functions are left to the expert developer's discretion which can quickly get overwhelming for beginners. The extensive customization does make it possible to facilitate an accessible Webflow site—so long as you know what you're aiming for, at least.
4. Wix
Following closely behind is another user-friendly favorite that places accessibility front and center among its infrastructure fundamentals. This drag-and-drop builder is more forgiving to its first-time users than Webflow, but its open-ended approach to inclusive design can make accessibility seem like an add-on rather than a requirement. Users would still need to make manual adjustments to accommodate disabled audiences.
5. Showit
Out of all builders we surveyed, this may be the one that shocked us the most. Showit seems to have relegated accessibility to the back burner, with Amber noting the disjointed keyboard navigation as its fatal flaw.
Not only do the components fail to work as expected; some of these features, such as skip links or logical tab sequences, are missing altogether. "You'd go from the logo to the right side of the navigation menu and work backwards, and dropdown menus wouldn't appear in the expected order," Amber reports in astonishment. "This kind of implementation can cause users to simply leave the website."
The issues identified - such as reversed DOM order, improper semantic structure, and fundamental navigation problems - stem from core architectural decisions in how the platform generates and structures its code. This means that even experienced developers may find it challenging to implement accessibility improvements even through custom code solutions.
How do you convince clients to prioritize website accessibility?
For some clients, design standards that uphold accessibility may come across as unnecessary constraints to their creative freedom. It may not be enough to simply remind them of existing laws and possible repercussions for non-compliance.
Amber takes one approach that works best for her: showing clients a few examples of renowned websites that are both accessible and aspirational.
"I like to try and find [enterprises] or larger companies in the same industry, because while it is common to have template-based builds to have a lot of animations in them… you can show [your clients] that [companies] don't do this," she elaborates.
Gently guiding them towards these best practices can help handle pushback against smaller design details, like underlining links or toning down saturation.
Can I use accessibility overlays instead?
You may have heard of accessibility overlays, third-party extensions that offer overarching solutions for technical gaps in accessibility. For a monthly subscription of $50 or more depending on page views, they appear to single-handedly shoulder the responsibility of complying with website regulations and shield you from potential lawsuits.
If it sounds too good to be true, that's because it is. "I have seen some instances where overlays have improved something," Amber concedes, before adding, "But I have also seen a lot of instances where they can add problems."
Overlays just end up sweeping your website's accessibility issues under the rug rather than addressing them on a structural level. They even add another layer of JavaScript code to the browser, which could significantly slow down website speed.
Take it from the page visitors who are most impacted by these problems:
"A lot of people with disabilities do not like overlays, particularly people who are blind, because if an overlay recognizes that they are using a screen reader, it will modify the website in a way that is not helpful." —Amber Hinds
At the end of the day, it pays more to invest on a holistic accessibility audit from the very beginning—an initial fix that can last indefinitely—rather than spend on a subscription that turns into an expensive mistake in the long run.
How could I best approach web accessibility?
Whichever platform you choose, adopting a proactive stance in accessibility during design and development can help launch your website without a hitch.
Amber recommends web designers to conduct an initial round of automated testing. It's perfectly alright to use third-party tools (e.g. WAVE, Headings Map, taba11y, Landmark Navigation, Google Lighthouse) to flag any possible issues you might miss; just keep in mind that this is merely a precursor to your subsequent manual checks.
After addressing the glaring issues, engage in user testing with disabled individuals when possible. This is the single best way to gather and implement feedback more effectively: by communicating with people who will benefit from these accommodations.
Of course, accessibility is a constant work in progress. We must continue to monitor the overall user experience and educate ourselves on the topic. The Web Content Accessibility Guidelines (WCAG) and A11Y Collective provide a good starting point for actionable advice. Not to mention, Equalize Digital hosts a bimonthly WordPress Accessibility Meetup to discuss platform-agnostic concepts; feel free to join their Facebook group here.
If you ever find an issue that you can't solve on your own, you can report whatever needs fixing in the website builder. Then again, Amber admits this isn't always an effective course of action. "The reality is, sometimes you just have to change your tool," she concludes.
How does WordPress compare in terms of accessibility?
The accessibility of a WordPress site highly depends on the page builder being used. In fact, this comparative study of website builders was inspired by Amber Hinds' comprehensive analysis of WordPress page builders' accessibility, which revealed significant variations in accessibility compliance between different WordPress page builders.
For more detailed information about WordPress page builders' accessibility performance, we recommend checking out Amber's in-depth video and analysis at her blog.
Meet Copyspark: Your AI-powered website content assistant
Quickly generate pages, sections, and copy ideas for your website
Introducing CopySpark, an AI-powered website content assistant that quickly generates suggested pages, sections, and copy ideas based on simple brand and website details.
Meet Copyspark: our AI-powered web content assistant
a.
Business
b.
Video
As someone who's built countless websites over the years, I've noticed a consistent pattern: the biggest bottleneck isn't design – it's finalizing content.
I found that most business owners feel less overwhelmed when they can review and refine existing content alongside design drafts, rather than starting from a blank page. This observation led me to develop CopySpark, an AI-powered website content assistant that generates thoughtful placeholder content based on your brand details
Why I developed Copyspark
Before creating CopySpark, I tried everything to help clients provide website copy on time. I created detailed Google Docs with prompts and frameworks. I built structured forms to guide them through the content creation process. While clients appreciated these tools, many still felt overwhelmed by the prospect of writing from scratch.
What I discovered was simple but powerful: clients feel more confident reviewing and refining existing content than creating it from nothing. This insight inspired me to leverage AI thoughtfully, creating placeholder content that aligns with their brand and design direction.
What Copyspark is for
Let me be clear: CopySpark isn't meant to replace conversion copywriters. There's absolutely no substitute for the strategic insights that come from deep brand discovery and customer research. Think of CopySpark as a brainstorming partner, helping you get those initial content drafts flowing.
How CopySpark Works
I developed Copyspark to be straightforward and user-friendly for both designers and clients. Here's the process:
Start with basic information: Business type and industry
Add optional details like website goals, key features, and brand voice
Include any additional context about brand promise, values, or differentiators
Generate suggested pages and sections based on proven content frameworks
Refine and customize the content through iterations
What makes CopySpark special is its flexibility. You can:
Specify words to avoid
Request specific sections
Optimize for SEO keywords
Match existing brand voice by providing sample content
Technical Details You Should Know
I've built Copyspark with privacy in mind:
All inputs and results vanish upon refresh
No data is stored in any database
Built on OpenAI API model
Your data isn't used to train any models
This means you should always copy and save content you like before regenerating or refreshing the page.
Looking Forward
CopySpark started as an internal tool for generating thoughtful placeholder content, but it's grown into something I believe can help many creators in different ways. I'm excited to see how you'll use it in your projects, and I'd love to hear your feedback as we continue developing this tool.
Feel free to tag me on Instagram @squarestylist to share how you're using Copyspark. Your insights and suggestions will help make this tool even more valuable for our community.
Remember, whether you're a designer helping clients with their websites or a business owner working on your own site, Copyspark is here to make the content creation process less daunting and more collaborative.
Shop our Creative Components Library
Our collection of ready-to-use plugins for Squarespace and Shopify
Welcome to our Creative Components Library—a revival of our popular Stylish Sections shop from 2020. This blog post guides you through our various shop offerings (Free, Perk, Premium, and Exclusives) and shares our vision for the shop's future growth.
Shop our creative components
a.
Squarespace & Shopify
b.
Creative Components Library
From Stylish Sections to Creative Components
Many of you might remember our original Stylish Sections shop. It was an overwhelming success back in 2020—a tipping point that completely changed the trajectory of my life and career. Not only did it help my young business thrive, but it also showed me something important: people want to create more unique and stylish websites, ones that didn’t look like at all like templates.
This insight prompted me to develop my flagship course, Standout Squarespace. Our team decided it would be best to temporarily close the shop to focus on building a solid course guiding you on how to design and code stunning websites without limitations. Now, we're thrilled to bring back our shop, new and improved, by popular demand!
What's New in the Creative Components Shop?
Our new Creative Components shop reflects everything we've learned from you and our experiences in web design education. Here's what you can look forward to:
A wider range of components for multiple use-cases, no matter the industry
Improved customization options to perfectly match your brand
Regular updates and new additions to keep your websites fresh and on-trend
Seamless compatibility with the latest Squarespace and Shopify features
Creative Components offers: Free, Perk and Premium
This shop serves different purposes in our offer suite, so I'd like to walk you through what this means for you, especially if you’re a Standout Squarespace or Standout Shopify member:
First, we have Free components. These are just free code snippets that I share primarily on YouTube or on our blog.
There's our Standout Perk category, which include code techniques from our Code Toolkit (free for all Standout members) but are now available as one-off components via our shop. I’ve also improved our classic components such as the Mega Menu, Movable Blocks et al.
Lastly, we've added Premium components which are not included as part of the Standout program but active Standout members can purchase them at a discounted rate of 30% off. This is an evergreen discount available to you as long as you are an active Standout member.
You will notice there are code snippets that we call Standout Exclusives. These are coding techniques available in our Code Toolkit but that are not sold as separate one-off products on our shop. The only way to access and use these components is by enrolling in any one of our flagship courses, Standout Squarespace or Standout Shopify.
Why We're Excited (And Special Offers for you to be excited about too!)
This shop is more than just a collection of beautiful design elements. It's a toolbox that empowers you to create websites that truly stand out. Whether you're a seasoned pro or just starting out, our components will help you take your projects to the next level.
Do visit the shop every so often as we’ll be filling up this library of components gradually the next coming months—I can’t wait for you to scroll through hundreds of hand-coded possibilities to incorporate in your next build.
Here's to creating stunning websites together,
Rache
How to add Video Carousel to Squarespace
Easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site.
Learn how to add a beautiful video carousel to your Squarespace site! In this quick preview, I'll show you how to install our video carousel component that works seamlessly with Squarespace's native video blocks.
How to Add Video carousel to squarespace
a.
Squarespace
b.
Video
Hi there! In this guide, I’ll walk you through how to install our Video Carousel for Squarespace component. This versatile tool is a paid feature, but if you’re part of my Standout Squarespace Program, you get free and unlimited access for all your websites. If you’re looking for free components, visit our shop at squarestylist.com/shop—many come with video walkthroughs for easy setup.
Here’s how to set up the video carousel and make the most of it:
Step 1: Use the Classic Editor
First, ensure you’re using Squarespace’s Classic Editor. You can add video blocks within this editor, which will be the foundation for your carousel.
Tip: I recommend adding videos in three columns for easier previews.
If you’re uploading custom videos, optimize them before uploading. Tools like Veed Compressor are excellent for reducing video sizes by 60–80% without losing quality.
Step 2: Add Video Blocks
With the image in place, we’ll add some code to bring it to life.
Insert your video blocks as needed.
You can use videos from platforms like Pexels, which are web-optimized.
For custom videos, compress them using tools like Veed Compressor (it’s free and user-friendly).
Step 3: Customize Video Settings
Squarespace’s native settings for video blocks work seamlessly with the carousel. Adjust these to suit your needs:
Mute, autoplay, or loop videos.
Decide whether to hide or show player controls.
Accessibility Tip: If autoplaying videos, ensure users can pause or play them easily for compliance.
Step 4: Add the Carousel Code
The last step involves some simple coding:
Copy the code snippet provided in the documentation.
Paste it into Squarespace’s Code Injection area (accessible via the Search icon).
Once pasted, the video blocks transform into a stunning carousel automatically.
This component is perfect for designers and business owners who want to elevate their Squarespace sites. Here’s why:
Purchase it for standalone use or access it as part of the Standout Squarespace Program for unlimited installations.
The program also includes my Personal Code Toolkit, featuring hundreds of plugins, techniques, and workshops to supercharge your Squarespace projects.
Final Thoughts
Installing the Video Carousel is simple, effective, and a game-changer for your Squarespace site. If you’re a website designer managing multiple sites, the Standout Squarespace Program is a no-brainer for maximizing your resources.
Explore the possibilities and create something extraordinary with your next project!
Ready to get started? Check out our shop or join the Standout Squarespace Program today.
Are Wireframes still necessary if I can design directly on website builders?
Does wireframing still play an important role in modern web design?
What I believe the role of wireframing is in modern web design and a walkthrough of our well-loved Wireframe Kit.
Are Wireframes still necessary if I can design directly on drag-and-drop website builders?
a.
Design
b.
Video
As web designers in the era of user-friendly website builders like Squarespace, we face a dilemma: Should we skip wireframing altogether and design directly on the editor? Or is it worthwhile to spend a few hours exploring layouts in visual editors like Adobe XD, Figma, or Canva before moving on to the actual website build?
The Appeal of Direct Building
Let's address the elephant in the room - yes, you can design directly on Squarespace or similar platforms. The ability to drag and drop elements, adjust colors and fonts, and add media on the fly is undeniably appealing. It's immediate, it's tangible, and it feels productive. So why bother with wireframes?
The Value of Wireframing
While wireframing in tools like Adobe XD, Figma, or Canva isn't a strict requirement, it offers several advantages that can significantly improve your design process and outcomes:
Faster Layout Exploration. Wireframing tools allow you to explore multiple layout ideas without the constraints of a website builder. This gives you space for more creative freedom.
Unique Designs. Templates on website builders are an excellent starting point, but they can sometimes lead to websites that look too similar or, as I like to call it, "too Squarespace-y." Wireframing offers you the chance to create unique, tailored designs without being overly influenced by pre-made templates.
Time and Cost Efficiency. While it might seem counterintuitive, spending time on wireframes can actually save time and money in the long run by identifying and solving potential issues early in the design process.
Better Client Communication. Wireframes serve as a great tool for early-stage client presentations. They allow clients to focus on layout and functionality without getting hung up on specific design elements.
Finding the Balance
The good news is that there's no single correct approach to this dilemma. I advocate for wireframing because I've experienced and witnessed firsthand how it can elevate a designer's work. That said, some designers have found success working directly on builders—which is truly admirable—and we encourage them to continue with what works best for them.
An invitation to use our well-loved Wireframe Kit
As always, I find myself creating tools to simplify our web design and development process, including of course, wireframing.
I've built this Wireframe Kit to simulate the drag-and-drop experience of the Squarespace editor, complete with all base elements and sections native to platform. The idea is for you to feel you’re dragging and dropping elements as you would on the editor so you get to familiarize yourself with built-in features and possibilities within the editor itself, and yet still be able to to ideate and design beyond it.
I swear by this Wireframe Kit, and so does hundreds of my students who have built their proudest websites using this as their starting point.
Free for Standout Squarespace members, whether enrolled in the Foundations or Full program. Download this Wireframe Kit in the Knowledge Base.
Final Thoughts on Wireframing
While not strictly necessary, especially given the capabilities of modern website builders, wireframing remains a valuable tool in a web designer's arsenal. I recommend dedicating 2–3 hours wireframing to explore more original layouts and secure client approval before moving on to development.
This process is tried and true—and I say this not just as a personal claim. It's been an honor to witness how this wireframe-to-platform workflow has worked wonders for the many talented web designers and developers in our Standout community.
How to Add a Custom Back to Top Button in Squarespace
Easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site.
Easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site. With just a few steps, you can give users a quick way to return back to the top of the page, improving navigation and enhancing user experience.
How to Add a Custom Back to top Button in Squarespace
a.
Squarespace
b.
Video
Introduction
In this guide, we’ll dive into an easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site. With just a few steps, you can give users a quick way to return to the top of the page, improving navigation and enhancing user experience. Let’s get started!
Why Add a Scroll-to-Top Button?
Adding a scroll-to-top button is an excellent way to provide users with an effortless way to navigate back up without excessive scrolling. This is especially helpful on longer pages. Plus, with custom graphics and branding, you can keep your design both functional and visually appealing.
Step 1: Adding Your Button Graphic to the Footer
Go to the Footer Section
Scroll down to the footer of your page. We’ll add an image here, which will act as our scroll-to-top button once we apply some coding tweaks.Insert a Placeholder Image
In the footer, add a small image anywhere—it will be hidden later. Make sure it doesn’t interfere with existing content, so resize it if necessary.Select Your Custom Graphic
From your image library, pick a graphic that aligns with your site’s branding. For this tutorial, I pre-uploaded a scroll-to-top graphic designed to match my branding. Choose something that suits your style!Add Alt Text for Accessibility
For accessibility, label the alt text as “Scroll to Top.”Link the Image to the Top of the Page
Set the image link to#top. To ensure it opens in the same tab, turn off the “Open in New Tab” toggle.Positioning
For a standard placement, drag the image to the bottom-right corner of the footer.Save Your Changes
Step 2: Adding the Code
With the image in place, we’ll add some code to bring it to life.
Open the Code Injection Section
From your main menu, search for “Code” to access the Code Injection area.Paste the Provided Script
Copy the script provided in this resource and paste it into the footer section of the Code Injection panel. This script controls the button’s visibility, ensuring it only appears once the user scrolls.
<script>
document.addEventListener('DOMContentLoaded',()=>{const b=document.body,l=document.querySelector('footer a[href="#top"]'),f=l?.closest('.fe-block');f?.classList.add('scroll-to-top');const t=()=>b.classList.toggle('is-scrolled',window.scrollY>200);window.addEventListener('scroll',t);t()});
</script>3. Add Custom CSS
To access the Custom CSS panel, type “CSS” in the search bar or use the forward-slash (/) shortcut. If you have existing CSS, add the new code at the bottom. This CSS code will style and position the scroll-to-top button, setting dimensions and placement on the screen.
html{scroll-behavior:smooth}.fe-block.scroll-to-top{opacity:0;transition:.5s}.fe-block.scroll-to-top a{display:none}@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-top{opacity:1}body.is-scrolled .fe-block.scroll-to-top a{display:block}body:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-top{position:fixed;grid-area:unset!important;bottom:0;right:0}body:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections{z-index:11}}
.fe-block.scroll-to-top {
right:2vw !important;
bottom:2vw !important;
width:100px;
height:100px;
}
Step 3: Customize the Look and Position
Change the Button’s Dimensions
Adjust the width and height properties as desired. The default is set to 100 pixels, but feel free to tweak it based on your design.
Refine Positioning
The right and bottom CSS declarations control the button’s distance from the screen’s edges. Play around with these values to position the button exactly where you want.
How to Create a Fixed Split Screen Layout in Squarespace
Learn how to create a split screen layout in Squarespace with sticky scrolling elements - no coding required!
Creating a split-screen layout with sticky and scrolling elements in Squarespace just got easier! Thanks to the new Fluid Engine, you can now design this layout by maximizing built-in features, including the pinning function. Here's a step-by-step guide to help you achieve this fixed split section in Squarespace effect without any coding.
How to Create a Fixed Split Screen Layout in Squarespace
a.
Squarespace
b.
Video
Introduction
Creating a split-screen layout with sticky and scrolling elements in Squarespace just got easier! Thanks to the new Fluid Engine, you can now design this layout by maximizing built-in features, including the pinning function. Here's a step-by-step guide to help you achieve this fixed split section in Squarespace effect without any coding.
Split-screen designs are visually engaging especially for creatively presenting galleries and lists. Previously, this required extensive coding, but with Squarespace 7.1 and Fluid Engine, we can make it happen through the interface itself. Let’s dive into how to build this from scratch.
Step 1: Setting Up the Section and Grid
Add a Blank Section: Begin by adding a new section to your page. Choose the blank section to have full control over element placement.
Activate the Grid: For easy alignment, press the
Gkey to display the grid. This will help visualize where your elements will sit on the screen.Adjust Padding and Rows:
Turn off full-screen padding by deselecting the “Fill Screen” option in the section settings.
Adjust the row height to fit more elements as you progress.
Set the horizontal gap to zero to center-align your shape blocks later.
Step 2: Adding Blocks for the Left Screen
Image Block: Upload and insert your main image on the left side. If you've pre-uploaded assets, just select the image from your library.
Text Block: Anchor your left side with a text block. Drag it flush to the edge for a true split-screen look.
Style the Text Block:
Add padding around the text to keep it visually balanced across devices.
Align the text vertically to the center of the block for a cohesive appearance.
Vertical Centering: Center-align the text by using the layout options to ensure it remains in
Step 3: Building the Right Side and Adding Decorative Elements
Shape Blocks: To create a colored background or decorative elements:
Insert a shape block and adjust its opacity and padding. Use overlapping elements for added visual depth.Make Adjustments: You may copy-paste additional elements by pressing
Command+CandCommand+Vto fill out the section.
Step 4: Implementing the Sticky Effect
Pin Text and Images: Select the element you want to stay fixed and click the pin icon.
For Centered Sticky Elements, choose the center option to keep the element at the screen's center as you scroll. For Top-Aligned Sticky Elements, pin at the top if you want images or text to remain at the top.Add Offset (Optional): For breathing room, add a slight offset (e.g., 32 pixels) to prevent elements from sticking directly to the screen's edge.
Step 5: Mobile Layout Adjustments
Fluid Engine allows independent adjustments for mobile views, so your design doesn’t have to match the desktop layout.
Reposition Elements for Mobile: Adjust each block’s placement to ensure the layout is clean and functional on smaller screens.
Skip Sticky Elements on Mobile: To optimize space, avoid using the pinning feature on mobile. Sticky elements can crowd the limited space available.
For more design tools and inspiration, visit our Creative Components Library for free and premium assets. And if you’re interested in learning how to code on Squarespace, check out our course on becoming a sought-after Squarespace designer, Standout Squarespace.
Is coding hard?
Why I believe coding isn’t as complicated as people— and even some experts—claim it to be and 3 tips to simplify your learning process.
I hear this question a lot, and Mia recently asked me the same: Is coding hard?
So many people get overwhelmed just imagining how hard coding could be, they give up before even trying. I made this video in response to Mia’s questions, but also for those of you who may be struggling with similar doubts.
IS CoDING HARD?
People often hesitate to learn code because they feel it could be more than they can handle. There are many misconceptions about code after all, so some assume that perhaps coding is not for them. This is the hardest part of learning how to code I believe—overcoming these initial hesitations. It gets easier as soon as you decide to simply start.
How can we learn code the easy way?
1. Learn one website platform or coding language at a time.
Focus on mastering one website platform or coding language at a time rather than trying to learn everything at once. For example: it's beneficial to have a general understanding of various website builders, but becoming an expert in one platform is a much more effective strategy.
In my case, when I decided to move ahead with Squarespace as my main website builder, I invested a lot of time understanding its features, limitations, and possible solutions. That effort paid off in eventually being able to build efficiently and beautifully with the platform, developing unique troubleshooting techniques that I otherwise may not have discovered if I were caught up in working on multiple builders at a time.
2. Start simple and progress gradually.
This step-by-step approach allows you to build confidence having a thorough understanding of fundamental principles before learning more complex concepts. Essentially, our goal is to make sure we avoid any feelings of overwhelm or dread as you work your way into learning more advanced techniques.
And this is exactly how I set up my Standout Squarespace and Standout Shopify programs, starting off with foundational know-how on how the platforms work, best practices for modern websites as well as wireframing and typography tricks before easing into learning coding techniques, starting off with HTML and CSS, adding decorative elements with pseudo-elements and eventually incorporating animations.
3. Learn with a mentor and a community.
Seek out web designer & developer communities and consider meeting up with them in person to share experiences, ask questions, and learn from others. Why not reach out to your favorite design studio or an expert you admire for mentorship? Whatever the case, try not to learn code alone. It’s more satisfying growing in your craft alongside like-minds, and you’ll go much farther.
So, is coding REALLY hard?
No. Coding is not hard, but it does require hard work. By focusing on a specific website platform, learning progressively from the basics to more advanced concepts, and learning alongside a supportive community, you can break down the coding process and build your skills with more ease.
I want you to remember that every expert was once a beginner–this is my personal story as well. With consistent practice, a whole lot of patience and support from other experts, you too can unravel the craft of code and discover all that you can become and create with it.
An invitation to learn design and code with Standout Squarespace & Standout Shopify
I designed my web design & coding flagship programs Standout Squarespace and Standout Shopify with beginners in mind. As a self-taught website designer myself, I know how it feels to not know where to begin or move forward with my learning process whenever I got stuck.
I keep thinking back to the earlier days of my learning journey and how I would’ve preferred to learn code. For one, I would’ve avoided those many days of burnout had I learned all basic knowledge first before easing to more advanced concepts. It also would’ve been better if I reached out to a mentor or a learning group for more support, which makes all the difference if you ask me.
All of these things I wish I had access to when I was still starting out, I made sure to incorporate in the Standout courses—lessons laid out from essentials to more advanced coding techniques and an organized Knowledge Base with design inspiration, coding cheat sheets, plug-and-play code snippets and business resources to name a few.
Learn more about our design & code course for Squarespace & Shopify.
How to add accessible Accordions to Squarespace product pages
Add accordions to Squarespace product details page information area
Here’s how to add accordion menus to your Squarespace product detail pages.
How to add accessible Accordions to Squarespace product pages
a.
Squarespace
b.
Video
Introduction
Accordion menus are a great way to present product information in a clean, organized layout, letting customers view important details before they add items to their cart. Here’s how to add accordion menus to your Squarespace product detail pages.
Step 1: Start Adding Your Accordion Content
Go to Product Details
Begin by navigating to the product detail page where you want the accordion to appear. Look for the Description section—this is where you’ll add your accordion content.Create Accordion Titles
Start by entering the first title for your accordion menu. Make sure to format each title as Heading Four (H4) to ensure proper display and functionality.Add Content Under Each Title
After entering a title, press Enter and add the relevant text or details that you want to appear under that section. This will be the collapsible content associated with the title.Repeat for Additional Sections
Add any additional accordion sections by repeating the same process—enter the next title, format it as Heading Four, and add the relevant text beneath it. You can create as many accordion sections as you need.
Step 2: Adding Code for the Accordion Feature
Access the Accordion Code
We have a free accordion menu component available on our Creative Components page. Simply click the link provided in the video description to access it, and copy the code needed for your accordion.
Insert Code into Footer Injection Area
Go to the Injection Area in Squarespace. To find it, click the search icon and type “injection.”
In the footer injection area, paste the copied accordion code.
Apply Custom CSS
Copy the custom CSS provided on the Creative Components page.
Access the Custom CSS Area by searching for “CSS” in Squarespace.
Step 3: Save and Test Your Accordion Menus
Once the code is in place, save your changes and refresh the page to see the accordion menu in action. The titles should now expand and collapse as you click on them, neatly organizing the product information on your page.
Accessibility Features
These accordion menus are designed to be accessible for users who navigate with keyboards only. Customers can open and close each section using the Return key or Space bar, which is an essential feature for an inclusive web experience.
Additional Resources
If you’re interested in more stylish components or other solutions for your Squarespace or Shopify site, check out our Creative Components page for free resources. You can also subscribe to our channel to stay updated with new tutorials and resources.
Fab & Free Flodesk Email Templates with Easy Tutorial
Create stunning emails fast with our fab and free flodesk email templates
Add a whisper of nostalgia to your newsletters with our newly handcrafted trio of Flodesk templates
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
Introducing Template Wizard: AI-Powered Support for Squarespace Template Customers
Considering design intensives? Here's a good look at what they are, how they differ from templates or fully custom designs, and which clients need them.
How to provide squarespace template support
a.
Business
b.
Article
Introduction
Hi there! We've recently launched an exciting new workshop focused on selling Squarespace templates. This workshop is designed to teach you how to launch your very own Squarespace template shop using our proven systems.
The Template Wizard
One of the standout features of our workshop is the introduction of an AI-powered help center, which we call the Template Wizard. This innovative tool serves as an AI-powered knowledge base to support your template customers.
Addressing Common Concerns
We're aware that many Squarespace designers shy away from selling templates due to the daunting task of creating numerous tutorials for their customers. The Template Wizard is our solution to eliminate this barrier.
The Framework Behind Template Wizard
The Template Wizard is built on the principle that most templates function similarly, especially when you utilize the framework shared in our Selling Templates Masterclass.
Customer Experience After Purchase
Let's walk through what your customers will experience after purchasing a template:
They'll be directed to a password-protected page on your website.
This page link will be sent to them via email immediately after purchase (if you follow our automation process).
The page will outline clear steps for getting started with their new template.
Inside the Template Wizard
Here's a preview of what the Template Wizard looks like:
It's hosted on our website (you'll receive access details upon enrolling in the Selling Squarespace Templates course).
The information is thoughtfully organized to provide just the right amount of guidance without overwhelming your customers.
Key Features:
Getting Started Module:
Instructions on backing up sections before editing
Tips for previewing their website effectively
Customization Essentials:
Covers only the most crucial aspects of website customization
Keeps videos concise, as we've learned template customers prefer brevity
Squarespace Basics Module:
Available for those who need to brush up on fundamentals
Includes guidance on aspects like e-commerce or blogging that may not be covered by all templates
Automatic Updates:
We keep the videos current, updating them whenever Squarespace changes its interface
Searchable Content:
Customers can easily find specific information without watching entire videos
AI-Assisted Support
The most remarkable feature of the Template Wizard is its AI-assisted support:
Customers can ask questions using the "Ask" button.
Unlike general AI assistants, our Template Wizard only references information curated in its knowledge base.
It provides accurate, relevant answers without making up information.
Example:
When asked about setting up a newsletter block, the AI will:
Provide step-by-step instructions
Point to the primary resource (video)
Give the exact timestamp where the process is demonstrated
The Advantage Over Traditional Support
After years of selling Squarespace templates, we've realized:
Most customer questions are actually covered in existing tutorials.
Customers purchase templates to launch their sites quickly.
The Template Wizard helps them find answers fast, reducing the time you spend answering email queries.
Streamlined Support Process
In our template guides, we encourage customers to:
First, seek support via the Template Wizard
Only email for support with specific template-related questions that aren't addressed by the AI
By implementing the Template Wizard, you'll be able to provide efficient, 24/7 support to your template customers while freeing up your time to focus on creating and selling more templates.
Convinced that templates are the way to go?
You’ll want to check out my masterclass on this topic, Selling Squarespace Templates. It’s your short course on everything you need to know about template building, delivery, and support—along with a comprehensive template toolkit to get you started.
Five ways to Sell Templates to Small Audiences
Is Selling Squarespace Templates for you? Here are five ways creating and selling Squarespace Templates can benefit your studio.
Considering design intensives? Here's a good look at what they are, how they differ from templates or fully custom designs, and which clients need them.
FIVE WAYS TO to sell templates to small audiences
a.
Business
b.
Article
Introduction
Many designers believe that website templates are a brilliant source of passive income—at least if you could somehow manage to get a lot of eyes looking your way. To err on the side of caution, they tend to do one of two things: sell their templates on online marketplaces like Etsy or wait until they’ve amassed a sizeable audience before setting up shop.
It might surprise you that when I began Squarestylist I took neither of those options. In fact, I went ahead and launched my first template on my site with next to no followers on Instagram.
Success did not come to me spontaneously. It took months of building my audience before my templates transformed into a sustainable source of revenue on their own. Yet I found from experience that templates can support your studio in unexpected ways—ones that can work for you even while you’re still growing your reach.
Here are five interesting ideas to get the most out of your own website templates:
1. Treat templates as creative playgrounds
One upside to not having a massive following that awaits your designs at every turn is that you have space to explore what stirs your curiosity without fearing judgment. What are the colors, textures, patterns that excite you? Sketch your ideas on paper. Gather your visual inspirations on a moodboard. Or better yet, put them together in a template of your own.
Take a moment of introspection to reflect on your aesthetic skills and sensibilities so they lead you to the types of clients you want to serve—not the other way around.
Style is a design signature that you define over time the more you create, so continuous hands-on practice will only strengthen your distinct body of work. The more effort you put into this upfront, the better you will attract the attention of like-minded clientele in the future.
2. Showcase templates as portfolio pieces
Breaking into the web design industry can seem like a tangled mess of prerequisites: to get new clients, you need a portfolio; to build a portfolio, you need clients.
Like many designers before me I opted to offer my services at the lowest possible price. My first Squarespace site earned me $500. In retrospect, I shouldn’t have been surprised that this client referred me to more people who expected websites for free or cheap.
The truth is, building your portfolio is a steady act of building trust—trust that you are capable of performing the task expected of you as a professional without wasting someone’s time or resources. But there are other ways of earning that trust, especially ones that do not involve trading off your unpaid labor.
Upon promoting my templates as part of my personal project, I didn’t just get purchases from bootstrapped customers; I also received foot traffic from clients who wanted something special. Whenever I asked them for their website inspirations, they said the same thing: “I saw your template and knew that I wanted you to recreate that aesthetic for my brand.”
To their eyes, a live Squarespace demo was a more effective representation of what I can do for their business than static mockups or testimonials.
3. Utilize templates as robust foundation
Who says only your customers can use the templates you create?
A template isn’t just a digital offering for passive income; it can also be the starting point for your fully custom projects if you want it to be. Think of it as setting the tone in the staging process. Your personal template places your signature sections and go-to presets within arm’s reach so you don’t have to go through each and every toggle in the settings.
Not to mention it saves you from staring at a blank page in Figma and Squarespace alike, given that you’re just modifying a copy of your existing design prototype.
You’d be most familiar with the features and constraints of your own template—what you can and cannot change within the framework. This helps with managing client expectations all throughout. By the end of the project they’ll be delighted to receive a website that looks nothing like the template you started with, since it’s now made uniquely theirs.
Of course, you can always choose to designate your base template exclusively for internal use rather than making it available to the public.
4. Offer templates as accessible downsells
Every now and then you’d come across inquiries that do not yet have the financial capacity to work with you one-on-one. This can be a good sign that your studio is starting to gain traction in terms of audience. Instead of turning them down altogether or lowering your prices to accommodate, why not point them towards your template shop?
If they have more time than money on their hands, they’d appreciate you lending your expertise in a way that makes sense for their business.
There are more cost-efficient ways you can deliver templates to these types of prospects. For instance, you can offer template reskins then have their website ready by the end of the day (or week) via design intensives. Templates in this context grant you the flexibility to match your support with the investment they can readily commit.
5. Create templates for compelling collaborations
You may not realize it, but a website template is a digital product that lends itself to potential collaborations. Think back to your ideal client and the additional services they still need for their business to flourish. These are the service providers you’d want to keep tabs on.
The nature of your partnership would depend on their level of involvement with the project. Affiliate marketing and virtual events promote your templates to their audience in exchange for a cut of every sale. Co-creation invites them into the template design process to ensure it caters to their specific niche. Bundling features your website template alongside similar templates and guides for a more holistic service package. The choice is all yours.
Convinced that templates are the way to go?
You’ll want to check out my masterclass on this topic, Selling Squarespace Templates. It’s your short course on everything you need to know about template building, delivery, and support—along with a comprehensive template toolkit to get you started.
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.
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.
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
Watch a walkthrough of our all-new website on Squarespace
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 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?
Creating expert-level Squarespace websites
The making of the our new Brand Visual Identity.
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:
Patchwork websites rely on guesswork and piecemeal solutions.
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:
Will this code slow down the site or impact accessibility?
Will it be easy to update?
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 our new brand identity
The making of the our new Brand Visual Identity.
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:
Handcrafted
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
Where creativity finds the curious. Subscribe to our newsletter all about digital curiosities and explorations.
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
How I built my dream Shopify Theme and how you can build yours too.
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
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
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
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.
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.
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.
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:
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.
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.
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.
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:
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.
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.