Can AI build a website?

Everyone’s talking about generative AI lately, especially the way it’s reshaping web design in real time. So I tested Lovable, Claude, and Squarespace to give you a realistic look into how these AI website builders work.

1. The brief

2. Comparison

3. FAQs

Can AI Build a website?

a.
Squarespace
b.
Video

Everyone’s talking about generative AI lately, especially the way it’s reshaping web design in real time. The idea is simple enough: describe what you want in plain language, and a chatbot turns it into a website. If that works well enough, business owners can skip the usual web design process and the platforms that come with it. Or so the story goes.

So can AI really build a website? Here’s my short answer: yes, it can; and faster than you might expect. All three tools I tested turned the same brief into a working site. Whether that website is one you’d trust to run your business on for years, though, is another story entirely, and that’s where the real differences become apparent.

Quick verdict: Yes, AI can build a website!  What it can’t do on its own is guarantee security, maintainability, or quality over the long haul. If you’re confident with the technical side and have expert eyes and skills to review the output, AI-led tools like Lovable and Claude will serve you well. For everyone else, my recommendation stands: build on an AI-assisted platform like Squarespace, where AI lends a hand while the platform carries the weight of security, updates, and scaling.

Let's put that theory to the test. For this small experiment, I gave each model the same prompt to level the playing field, providing as much textual and graphic context as I possibly could to increase the specificity of the outputs. Then I compared them in terms of customization, cost, security, SEO, accessibility, and scaling. By the end, you’ll know when AI is worth using, and why, so you can create a website that truly serves your business and gives you peace of mind.

This post was sponsored by Squarespace. Squarespace is the first platform where I learned to design websites, and it remains one of my most recommended platforms. I’ve also used and recommended others, and deployed custom websites when a client needed one. Every opinion here is my own.

Two kinds of AI website builders

Today’s AI website builders can be categorized into two:

AI-led code generators take a plain-language prompt, then generate the code and decide the tooling themselves. Lovable, Bolt, Replit, Base44, and Claude Code are popular examples. You end up owning a codebase, along with the hosting, maintenance, and security that come with it.

AI-assisted website platforms are established builders that have added AI features to help with parts of design and development. Squarespace, Shopify, and Webflow belong here. The platform remains the foundation, and AI helps you work within it.

For this test, I used Lovable and Claude as the AI-led examples and Squarespace as the AI-assisted example.

The brief: a fashion blog called Cherie

To test these tools the way a thoughtful business owner would, I wrote one detailed prompt and used it everywhere. Cherie is a fashion blog by Margaux, and it earns mainly through affiliate commissions on the products it recommends. The prompt names the brand and founder, lists the pages needed, and describes the look and feel, including color and font preferences.. It also makes one priority clear: because the blog needs constant updating, adding and editing posts has to be easy. Finally, it asks for a site that works on mobile, meets accessibility standards, and is set up well for SEO and discovery.

1.1 The prompt used across Lovable, Claude, and Squarespace.

Test 1: Building Cherie with Lovable

1.2 Cherie homepage generated by Lovable.

After signing up at Lovable.dev, you can paste a prompt right away. Two settings are worth knowing before you do. First, Lovable offers plan mode and build mode; for a first ask, plan mode is the better choice because it asks clarifying questions before it starts building. Second, the attachment option in the lower left lets you add brand guidelines or visual references. I used plain text for this test, with color and font preferences written into the prompt.

Lovable’s clarifying questions covered how we’d write and publish articles, where to store email signups, and how to handle product recommendations. Since Cherie needs to be independent from Substack, I chose a built-in admin dashboard, storing signups on the site itself, with simple links and text for products.

Then came the plan: the pages to be built, an admin dashboard for publishing and editing posts, and notes on the technical stack. One note mattered most. The build would require Lovable Cloud, infrastructure Lovable sets up automatically (in partnership with software like Supabase) to handle the database and authentication. A static site with no ongoing edits might not need it. A blog that’s updated constantly does, because that’s what gives it a content management system. Details like these can feel intimidating, but I recommend reading through them and understanding what they mean for your site. I also confirmed the plan carried over our requests for responsiveness, accessibility, and SEO before clicking approve.

The homepage came out closely tied to the prompt, down to the hand-drawn fashion illustrations it generated throughout. One practical note: partway through generating, Lovable told me I’d run out of credits, and I had to upgrade to Lovable Pro to continue.

The admin panel deserves careful reading. Whoever visits the dashboard link first and signs up claims owner access, so do this yourself before sharing the link with anyone. Once signed in, the dashboard lets you write new posts and edit existing ones: title, body text, and a cover image file.

For everything else, you ask the chat. You can also annotate on the canvas, change text inline, or select a single element and ask for a revision to that element only. When I selected an image and asked for a more realistic version, Lovable changed only that image. When I asked for a folder dropdown in the navigation, it built the dropdown and flagged several security issues in the same breath. Those flags are worth addressing before you publish.

Publishing is a single button. Lovable gives you a built-in domain immediately, and you can connect a domain you already own or buy one through Lovable.

Lovable at a glance:

• Plan mode is the better choice for a first ask—it asks clarifying questions before building anything.

• One detailed prompt produced a coherent homepage, hand-drawn illustrations, a set of pages, and an admin dashboard within minutes.

• Expect to hit a credit ceiling: I had to upgrade to Lovable Pro partway through generating.

• Claim the admin dashboard before sharing the link—whoever signs up first gets owner access.

• New features can surface security flags in the same breath; address them before you publish.

Test 2: Building Cherie with Claude Design and Claude Code

1.3 Cherie homepage generated in Claude’s design mode.

Claude.ai offers different modes: Chat, Cowork, Code, and Design. For building websites, I find it most efficient to start in design mode (through the design tab, or directly at claude.ai/design), especially if you already have a design system to set up first. For this test I pasted the same prompt, using the Opus 5 model, Claude’s most capable model at the time of recording.

Claude asked clarifying questions, the first being how we’d add blog posts: edit a simple post file, or connect a proper CMS (separate software requiring its own signup). I chose the simpler option, knowing we could switch later. Tech-savvy users can also point Claude at an existing GitHub codebase at this stage.

The generated site had working navigation between pages. Claude doesn’t generate images; it asked me to drop in my own or browse local files. An edit button lets you select any element and change its text, colors, and some layout properties, though you can’t drag elements or sections around. As with Lovable, you can select an element and ask for a change, and the folder dropdown request worked here too.

Managing blog posts is where the two tools diverge. When I asked how to edit posts, Claude pointed me to a posts.js file, the single file we’d chosen to edit. Workable, but not friendly for a founder publishing every week and quite intimidating for non-developers. To set up a proper CMS, we have to move from Design mode into Code mode.

Publishing also takes more steps. The share button offers a downloadable HTML file to host anywhere, or publishing as a Claude artifact limited to the Claude domain. Under “More formats and apps” there’s an option to send the project to Claude Code, which is where the flexibility lives. I started a web session, which carried the context over from design mode, and Claude Code asked its own round of questions. Its recommendation, to keep things simple, was still the single file, so we chose Next.js with a proper CMS. It flagged that this setup is heavier to host and maintain. For the signup form, it recommended embedding a Substack form or using Formspree. For hosting, it pointed to Netlify or Vercel.

About fifteen minutes later, Claude Code returned a long, developer-facing explanation of publishing with a CMS, and pointed to a README for the rest: sign up for Sanity.io, retrieve tokens, sign up for Netlify or Vercel, connect and deploy. For anyone without a development background, this is where the project turns intimidating.

1.4 The README instructions generated by Claude Code.

To be fair, a single-page site with no blog and no ongoing edits wouldn’t need nearly this much setup. But even a simple Claude-built site still needs hosting if you manage yourself. If you’re comfortable with that, the workflow I’d recommend looks like this: connect GitHub through Claude’s connectors, create a private repository, prompt Claude to push the code there, connect the repository to a project in Netlify or Vercel, then attach a custom domain from the hosting settings.

Claude at a glance:

• Design mode is the most efficient starting point, and Claude asks its own round of clarifying questions.

• The generated site had working navigation, but no images—you supply your own.

• Editing a selected element is easy enough; managing blog posts through a posts.js file is workable but intimidating for non-developers.

• A proper CMS means moving into Code mode and wiring up Sanity, tokens, and Netlify or Vercel—the point where non-technical founders may feel out of their depth.

Test 3: Building Cherie with Squarespace

1.5 Cherie homepage generated through Squarespace’s Blueprint AI.

Squarespace’s onboarding is now AI-powered, though there’s no box to paste a prompt into. You answer questions one at a time based on your brand needs. For Cherie, I selected fashion and style as the category, and chose publishing a blog plus a contact form as the functionality.

After signing up, you land in Blueprint AI, Squarespace’s guided AI building tool. Each brand personality option shows an example of its vibe; I chose “sophisticated.” Blueprint AI then generated assets from the answers so far, created About and Contact pages automatically (I added a Services page with a checkbox), and suggested a color palette and font pairings to match. Then I clicked finish.

1.6 Choosing a brand personality in Blueprint AI.

Everything generated at this stage is a starting point. From the dashboard, Website and Pages lets you add pages and sections. In the editor, you can drag elements, add blocks like video, images, and forms under View Layouts, explore layout suggestions, and add pre-made sections or build one from scratch. Here’s a step-by-step editing tutorial for Squarespace ->

For Cherie, the essential piece is the blog, so I added a blog collection under the main navigation and chose a layout. Squarespace doesn’t currently have an AI chat assistant that makes edits for you, but the framework for editing and publishing content is already built in. Opening a post and hitting edit shows how easily you can add video, galleries, text, and accordions. There’s nothing to connect. The CMS is Squarespace. Publishing means choosing a paid plan under the billing menu.

Squarespace at a glance:

• There’s no prompt box; Blueprint AI walks you through questions on category, functionality, and brand personality instead.

• Everything generated is a starting point, refined in an editor built for direct manipulation.

• The CMS is Squarespace itself—there’s nothing to connect and no separate software to maintain.

• Publishing simply means choosing a paid plan; hosting is part of the package

What happens after launch: 8 comparisons

Building the site is the easy part. What a business owner lives with is everything that comes after. Here’s how the three builds compare.

1. First-draft direction

This is where AI-led tools shine.

AI-led tools (Lovable and Claude):

• One detailed prompt gave Lovable enough to produce a coherent homepage, hand-drawn style illustrations, a set of pages, and an admin dashboard within minutes; Claude produced a full site with working navigation from the same prompt.

• Both asked clarifying questions before building.

• For exploring ideas, testing a direction, or showing a client what a concept could look like, this kind of first draft is valuable.

• Treat it as a starting point and review it, since the same prompt can produce a different result on the next run.

AI-assisted tools (Squarespace):

• Blueprint AI takes a guided route. It doesn’t read a prompt; it asks about category, functionality, and brand personality instead.

• It generates simple pages, a palette, and font pairings to match—more predictable and less exploratory.

• You land directly in an editor built for the next step.

2. Ease of customization

AI-led tools (Lovable and Claude):

• Most changes go through the chat. You can also annotate the canvas, change text inline, or select a single element and ask for a revision to that element only, which worked well when I asked for a more realistic version of one image.

• Claude’s design mode adds an edit button for text, colors, and some layout properties on a selected element, plus the same select-and-ask approach for everything else.

• Any change the interface doesn’t expose means writing a prompt, consuming credits, and waiting for a regeneration.

• Because the output is non-deterministic, a small request can occasionally touch more than you intended or lead to incoherent elements.

AI-assisted tools (Squarespace):

• The editor is built for direct manipulation: drag elements, add blocks, swap images, attach links, edit alt text, add animations, and freely add, delete, or reorder elements in a section like testimonials.

• Blueprint AI’s palette and font pairings are suggestions, and all of it can be changed without writing a prompt.

• For everyday adjustments, that directness might be better than a chat assistant, though the user needs to be familiar with how to navigate the platform.

3. Extent of customization

AI-led tools (Lovable and Claude):

• The widest reach: almost anything can be requested through the chat—new fields in the admin dashboard, a navigation dropdown, a payment flow, a different illustration style.

• The limits show up in the editing interface. Claude’s design mode, for instance, lets you change text, colors, and some layout properties on a selected element, but moving elements or sections around means asking for it.

• Every custom feature you add is one more piece of code to secure, audit, and maintain.

AI-assisted tools (Squarespace):

• Works within a defined framework of pages, sections, and blocks, with plenty of room to move: choose from layout suggestions, add pre-made sections or build one from scratch, and give each blog post its own arrangement of images, video, galleries, and columns.

• For projects that need to go further, Squarespace also accepts custom CSS and JavaScript.Learn more how you can extend Squarespace features with code ->

4. Maintainability

For Cherie, maintainability comes down to one question: how easy is it to publish and update blog posts week after week?

AI-led tools (Lovable and Claude):

• Lovable’s admin dashboard handles basic posts, but formatting options are limited, and adding galleries, videos, or images between blocks of text isn’t flexible.

• You can prompt Lovable to add more element types, but that takes time, and their position stays standardized across every post in the collection.

• Any edits outside the blog go through the chat, unless you specifically ask for those controls to be added to the dashboard too.

• Claude-built sites are more involved again: either a single posts.js file to edit by hand, or a separate CMS such as Sanity, where the same kinds of limitations show up.

• Beyond content, there’s the site itself to keep running. AI-generated sites depend on packages that need updates and can become vulnerable over time, and someone has to own that responsibility.

AI-assisted tools (Squarespace):

• The built-in CMS lets you add any block (images, video, even columns) inside any post, and every post can have a different layout.

• There’s no separate software to connect or keep updated, and platform updates are pushed to every site automatically.

• For ongoing maintenance and updates, I find it a more delightful interface to work in.

5. Cost

AI-led tools (Lovable and Claude):

• Expect to subscribe to the first paid plan just to finish the build, and to a higher tier for more complex functionality. Claude is similar: free credits run out quickly and may not get you to the finish line.

• Because Cherie’s CMS lives on Lovable Cloud, it needs the Pro plan for cloud backend access, and each plan carries a set allowance for cloud usage. Cloud usage is metered runtime, and the allowance is finite.

• High traffic, elevated form submissions, or heavy asset uploads (images, video) can push past the allowance and trigger overage billing.

• Multiple sites can live under one plan, but they draw from the same pool of credits.

AI-assisted tools (Squarespace):

• There’s a free trial, and publishing requires a paid plan. As of this writing, Basic is $19 per month and Core is $29 per month; I recommend Core for most of my clients.

• Every plan includes unlimited bandwidth, with only video hosting and storage capped by tier, so more images, pages, or traffic won’t lead to surprise bills.

6. Security

This is the most important comparison. Lovable has integrated security checks that catch common issues, and that’s the nature of large language models: they spot patterns well, and they also make mistakes. Lovable’s own documentation says it can’t guarantee complete security.

AI-led tools (Lovable and Claude):

• Revisiting the Cherie build, the flagged issues came with a button to fix them all. It’s still worth understanding where the risks come from.

• Features that trigger Lovable Cloud create databases—in our case, ones storing contact form responses and blog post drafts. Keeping that data out of public view depends on correctly configured row-level security (RLS) policies.

• For simple projects, AI can usually configure them, but it can get them wrong, which is why Lovable’s Security Best Practices checklist emphasizes configuring and testing them.

• Security is also ongoing. As packages behind the site age, vulnerabilities can appear, which is why Lovable recommends regular security reviews.

1.7 Security issues flagged by Lovable after adding a navigation dropdown.

AI-assisted tools (Squarespace):

• Works from a standardized framework and set of security protocols. Updates are pushed to every Squarespace site automatically, so owners never need to track underlying packages and code.

• One concrete example: when I inspected the code of a Lovable-generated contact form, it had no spam filtering and no submission limits. Squarespace forms include guardrails like Google reCAPTCHA by default.

• It’s a good reminder that an AI security check won’t consistently catch every gap.

7. SEO and accessibility

We asked both AI-led tools for a site that was accessible and SEO-optimized, then audited the results with the browser inspector and dedicated tools. Both Claude and Lovable passed most criteria, including semantic markup. But gaps remained:

• A keyboard trap when opening one folder, found by testing keyboard navigation with the Tab key, the way someone who can’t use a mouse experiences a site.

• Incorrect ARIA labels on one section. ARIA attributes matter a great deal for screen reader users.

• No responsive image sizing from either Lovable or Claude.

• No structured data in either page source.

Squarespace implements responsive image sizing automatically, and every page ships with structured data and an auto-generated sitemap.

What’s worth noting is: AI tools are non-deterministic. The same prompt can produce different code from one run to the next, and quality may differ depending on the model used. The meta description on this build was generated correctly. There’s no guarantee it would be tomorrow. That’s the case for a human in the loop on any AI-generated code. In contrast, managed platforms like Squarespace stay consistent because the fields and configurations already exist.

8. Scalability

Say Margaux wants to grow Cherie beyond blogging and affiliate links into memberships or paid digital downloads.

AI-led tools (Lovable and Claude):

• With Claude Code, the stack gets considerably more complex. Ask Claude what’s involved and it will walk you through setting up Stripe, generating tokens, and wiring them into the code. Those Stripe tokens are secrets and must never appear in front-end code, so this calls for caution.

• Lovable Cloud simplifies this somewhat. Switching to plan mode produced a plan with a new page and new databases for customer and payment information.

• It looks straightforward on the surface, but security issues can come up along the way, and anything touching customer and payment data needs to be understood before it’s fixed with a button.

AI-assisted tools (Squarespace):

• Selling is built in. The store can sell physical goods, services, or digital downloads—exactly what Cherie would need—with the download delivered automatically after purchase.

• The Selling menu handles payments, taxes, and shipping, and customers get a standard account to track orders or manage a membership.

• The configuration is standardized, and the security is handled by the platform.

The comparison at a glance

• Aspect #listtotable

  • AI-led tools (Lovable, Claude)

  • AI-assisted platforms (Squarespace)

• First-draft direction

  • Strong. Full pages built-out with content suggestions. Useful for exploring ideas, though it should be treated as a starting point.

  • Less detailed. Limited to simple sections, page structures, and style direction. Less exploratory and more predictable.

• Ease of customization

  • Edits go through the chat or by selecting an element and prompting. Takes time and consumes AI credits.

  • Direct editing in a visual editor: drag, swap, reorder, and restyle without writing a prompt. But the user needs familiarity with the interface.

• Extent of customization

  • Nearly unlimited possibilities. Any feature or element can be requested, and each addition adds maintenance and security work.

  • Wide within the platform’s framework of pages, sections, and blocks, with custom CSS and JavaScript available to extend features.

• Maintainability

  • CMS is customizable but takes time or a separate app to set-up. Blog dashboards have limited formatting.

  • CMS built in. Any block can be added to any post, and platform updates are pushed automatically.

• Cost

  • Paid plan needed to finish the build, plus metered cloud usage with overage billing.

  • Flat monthly plan ($19 Basic, $29 Core as of this writing) with unlimited bandwidth.

• Security

  • Automated checks catch common issues but can’t guarantee coverage. RLS policies, packages, and reviews are your responsibility, on an ongoing basis.

  • Standardized protocols with updates pushed to every site automatically. Forms include reCAPTCHA by default.

• SEO and accessibility

  • Output may vary between runs. Semantic markup mostly present, but gaps found: keyboard trap, incorrect ARIA labels, no responsive images, no structured data.

  • Consistently configured: Responsive image sizing, structured data, and sitemap generated automatically on every page.

• Scalability

  • Adding payments or memberships means bootstrapping tools, new databases, Stripe tokens, and more code to secure and maintain.

  • Store, digital downloads, memberships, and customer accounts are built in and configured from the Selling menu.

• Best for

  • Technically confident owners and teams with expert review available.

  • Businesses without a dedicated tech team who want predictable costs and long-term maintainability.
    
    
    
    
    
    
    
    
    
    

When to choose an AI-led tool, and when to choose a platform

I truly believe there’s room for both. They suit different people and different projects.

Choose an AI-led tool like Lovable or Claude if:

• You’re confident with the technical side of building websites and understand the risks of hosting and maintaining a site yourself.

• You need advanced or complex functionality built quickly, and you have expert review available, at the initial build and on an ongoing basis, since those features open up risk.

• You want meaningful first-draft direction for exploring ideas. Treat it as a starting point.

Choose an AI-assisted platform like Squarespace if:

• You don’t have a dedicated tech team and want established guardrails, consistent configuration, and a strong foundation, with the platform handling security and updates.

• Your site needs standard functionality like blogs and stores. You can still use AI through built-in features for SEO and onboarding, orextend the functionality with code.

• You value long-term maintainability, scalability, and predictable costs.

So, can AI really build a website?

Absolutely. However, whether that website serves the business over the long term depends entirely on how the AI is used. On its own, AI can’t guarantee security, maintainability, or quality. It needs a reliable platform as its foundation and expert review along the way.

For business owners who aren’t especially comfortable with tech, and who don’t fully understand the risks of hosting and maintaining a site themselves, I still think a website platform is the right call. That platform can absolutely have an AI layer to assist. The platform should be the foundation.

Frequently asked questions

Can AI really build a website?

Yes. AI-led tools like Lovable and Claude can turn a detailed prompt into a working site within minutes, and AI-assisted platforms like Squarespace use AI to guide the setup and assist in aspects such as SEO and AEO. Whether that website can safely run your business for years is another matter—on its own, AI can’t guarantee security, maintainability, or quality. It needs a reliable platform as its foundation and expert review along the way.

What’s the difference between AI-led tools and AI-assisted platforms?

AI-led code generators (Lovable, Bolt, Replit, Base44, Claude Code) take a plain-language prompt and generate a codebase you own along with the hosting, maintenance, and security that come with it. AI-assisted platforms (Squarespace, Shopify, Webflow et al) are established builders with AI features layered on top; the platform remains the foundation, and AI helps you work within it.

Are AI-generated websites secure?

Not by default. Automated security checks catch common issues, but they can’t guarantee complete coverage—Lovable’s own documentation says as much. When I inspected an AI-generated contact form, it had no spam filtering and no submission limits, while Squarespace forms include guardrails like Google reCAPTCHA out of the box. If you build with an AI-led tool, plan for expert security reviews at launch and on an ongoing basis.

How much does an AI-built website cost?

With AI-led tools, expect to subscribe to a paid plan just to finish the build, plus metered cloud usage that can trigger overage billing as traffic, form submissions, or asset uploads grow. AI-assisted platforms charge a flat rate—on Squarespace, $19 per month for Basic or $29 per month for Core as of this writing, with unlimited bandwidth on every plan.

Are AI-built websites good for SEO and accessibility?

Partly. In my audits, both Lovable and Claude passed most criteria, including semantic markup, but gaps remained: a keyboard trap, incorrect ARIA labels, no responsive image sizing, no sitemap, and no structured data. And because AI is non-deterministic, the next run could produce different results. Managed platforms configure these consistently on every page.

Should I build my business website with AI or a website platform?

If you’re confident with the technical side, understand the risks of hosting and maintaining a site yourself, and have expert review available, AI-led tools can accelerate complex builds. For everyone else—especially businesses without a dedicated tech team—an AI-assisted platform is the safer long-term home, with predictable costs and security handled for you.

Inside Standout Squarespace: Become a Web Designer in the AI era

A guided tour of my flagship program, following the same journey I take my students on—from strategy and first lines of CSS to a thriving web design business

1. Who it’s for

2. The Pillars

3. The Invitation

Inside Standout Squarespace: Become a Web Designer in 2026

a.
Squarespace
b.
Video

Some might see Squarespace as limiting. But because I took the time to understand how to work with code and push its boundaries, I learned to make magic from this simple tool, and I believe that has become my edge as a web designer.

At first, I only wanted to learn code because I had a vision in mind and needed code to implement it. What I discovered along the way is that learning code sparked my creativity, too. That made me wonder: what if I could teach other designers to code, so they could develop the same deep understanding of how to use it to their advantage? That question inspired me to create Standout Squarespace.

In this post, I'll take you inside the program through the pillars behind my method, the projects you'll build, the tools you'll take with you, and the kind of designer you become on the other side.

Who Standout Squarespace is for

Standout Squarespace is a program for aspiring and established website designers who believe that continuously honing their craft and innovating is the key to setting their work apart.

It might be hard to believe that a single program could cater to such a wide range of designers, from beginners to advanced. But the main driving force behind our community is a shared love for learning. So while the curriculum walks you through the very basics, right from starting a Squarespace account, it also grows alongside the ever-evolving needs of working web designers.

For me, the most fulfilling part is witnessing students go from intimidated or overwhelmed by code to confident and genuinely excited by it. I love watching that confidence ripple into how they price their work, how they lead sales calls, and how they realize what they're truly capable of.

The method behind the program

Learning code goes far beyond writing code; my approach is much more holistic. Everything inside Standout Squarespace is organized around the pillars of my method, so instead of a scattered collection of lessons, you follow a progression: design with intention, master Squarespace and its code, then use that mastery to create the unexpected. Here's what each pillar looks like in practice.

Pillar 1: Design with intention

A standout website starts long before you open the Squarespace editor. It begins with intention and strategy, not tinkering.

Inside the program, that means gathering client insights through our discovery workshop and discovery questionnaire, alongside website content prompts and guides. We discuss responsive design in Squarespace, accessibility, and designing for discovery and performance. You'll work from an entire Squarespace-specific SEO checklist, as well as guidelines on how to design for AI visibility, because that's where search is heading in 2026.

Equipped with those design principles, you'll build your homepage layout in Figma or Adobe XD using our wireframe kit. It comes stocked with the icons, shapes, and dividers that are built into Squarespace, so what you design translates seamlessly into the platform.

Pillar 2: Master Squarespace and its code

The second pillar is mastering our tool—Squarespace itself—and its underlying code.

We start by making the most of Squarespace's built-in features. You'll build a complete project that demonstrates how to use native elements and components in an aesthetic and functional way, learning to create every page type along the way: portfolio, blog, shop, even courses. Just as valuable, you'll learn when not to use code, so your sites stay easy for clients to edit on their own.

From there, you'll learn the very basics of how to write CSS in Squarespace. No coding experience is required. You're guided step by step to understand how to scope code so you never break parts of a website unintentionally, and to write code that's scalable and easy to maintain from day one.

Pillar 3: Create the unexpected

The third pillar is where the fun begins: using your mastery of Squarespace and its code to innovate.

You'll learn the smart way to add code to Squarespace, making the most of existing components so that sections and blocks remain easily editable by clients. You'll also discover the value of code beyond aesthetics. We use it to present content that's aligned to the brand style yet still accessible to screen readers and search engines, or to add a background gradient instead of a heavy image, which keeps pages fast.

You'll build a second complete project as you learn the essential coding techniques, and you'll be surprised at how combining just a handful of them opens up dream layouts in Squarespace. We then build a full Squarespace template together, so you learn how to properly incorporate coded features into templates you can sell at a premium price.

The tools that put the pillars to work

Our smart coding method is the key to a faster creative workflow, so we've built the pillars directly into tools you can use right away.

The first is the Montage master template. Every time you start a new Squarespace project, you can duplicate Montage and instantly have a site packed with sought-after features you can activate without slowing anything down. It also works as an upgrade suite, so if you're redesigning an existing Squarespace site, you can still apply its components.

The second is our Adagio Animations library. If you'd like to introduce movement, interaction, and what we call scrollytelling into your Squarespace websites, you'll adore this one. You can install the entire catalog in seconds and activate one or many animations in any project using simple keywords, then customize them further with your code fundamentals.

Systems to run your business with ease

Sought-after skills need systems behind them, so the program guides you through facilitating Squarespace projects from inquiry all the way through launch.

You'll become more confident in sales calls and in scoping projects: knowing when Squarespace is the best platform, when to recommend something else, and when to integrate third-party software. You'll also find ready-to-duplicate client hubs, communication frameworks, and a project management system, along with guidance on managing client expectations by communicating the value of accessibility, responsiveness, and performance.

Many students arrive winging it through endless email threads. They leave with a process that clarifies each client's vision, filters for good-fit projects, and makes every engagement feel professional from the first inquiry.

Where the pillars take you

The best part is that these skills have many applications, whether you choose to run your own studio, work in an agency, sell digital products, or expand to other platforms. That's why the program includes supplementary resources to support wherever you're headed.

The Selling Squarespace Templates Masterclass walks you through running a template business, and we've had many success stories of students who now focus on selling templates. I love this model myself: I remix my own templates so I don't have to design from scratch every time, and clients get a polished, high-end website experience without the full custom price. There's also our Figma Design Essentials training, which helps you explore ideas for your Squarespace designs and equips you to offer design as a standalone service. And students have carried these foundations into Shopify, Kajabi, and fully custom builds.

With so many resources, you don't need to go through all of them to make the most of the program. It's a library where you pick what you need at the moment. We even launched an AI-powered Course Discovery tool: describe the feature you have in mind, or upload a client's inspiration image, and it points you to the exact workshop or lesson to revisit.

A program that grows with you

Squarespace is always evolving, so the program is continuously updated with new techniques, workshops, and code snippets. And you're never learning alone: our community brings together hundreds of like-minded designers who support each other with feedback, troubleshooting, and even project referrals.

With technical mastery as your foundation, you become more confident in running your design business and pricing your services. You know the features you develop are directly achieving business goals for your clients, and you've built a specialized skill that clients can't easily find elsewhere—all while giving them the delightful Squarespace interface that makes managing their own website a breeze.

Is Standout Squarespace right for you?

If you're on the fence, it's good that you're thinking it through. You might be wondering about the time commitment, or whether the program is too basic or too advanced for where you are. You're always welcome to reach-out, and I'm happy to help you assess whether it fits your goals.

What I can assure you is this: you'll have a deep library of resources, my guidance and mentorship pointing you to the right one at the right time, and a community cheering you on. If you love continuously learning and innovating, and you're excited to discover what you're capable of, Standout Squarespace is here waiting for you→

Squarespace Finish Layer in Practice: Building the Design Forward Landing Page

Block Animations, Stacks, Block Transforms, and Font Uploads, working together on a real project. A full walkthrough of the Design Forward landing page, built with no custom code.

1. Landing Page

2. Finish Layer

Squarespace Finish Layer in Practice: Building the Design Forward Landing Page

a.
Squarespace
b.
Video

For the Make It Real Challenge by Squarespace and Contra, I submitted a Squarespace landing page for Design Forward, my upcoming four-week live bootcamp for web designers exploring how AI can streamline the tedious parts of their process. This website uses purely Squarespace’s native design tools -no added code. The page invites interested designers to join the waitlist for our September launch.

‍

I have been building Squarespace websites for a decade, and my approach has always been to maximize the built-in features first. So I set one rule for this build. No custom CSS, no JavaScript, no extensions. Everything on the page came from Squarespace Finish Layer, the suite of design tools Squarespace released for advanced control inside the platform.

The site is built on a visual identity I have been crafting with my talented friend Edinah of Wildlogic. My goal for the experience was to guide the user's attention while reinforcing the brand's message. Design Forward is catered to multilayered creatives who are ready to push boundaries, so I wanted those unexpected layers to reveal themselves as you scroll. The overall feeling is optimism and artful play.

Font Uploads

The Design Forward type system pairs vivacious 1960s letterforms with fashion-forward contemporary typefaces. Using the Font Upload feature, I applied four custom fonts across the site with no added code. On any earlier version of Squarespace, four typefaces meant hosting the files, writing @font-face rules, and assigning them by selector.

‍ ‍

The Scale Text feature carries the rest. It keeps sizing coherent across breakpoints while preserving a proper heading hierarchy, which supports SEO and accessibility at the same time. Typography that behaves well is doing more than looking good.

‍ ‍

Block Transforms and Animations

I combined block animations, transforms, and the pin block feature to introduce movement and to carry the page from one color theme into the next, blurring the boundaries between them. Left alone, a theme change reads as a hard cut between sections. Animated across the seam, it becomes part of the scroll instead of an interruption.

‍ ‍

The animations are carefully sequenced based on scroll progress, so the story unfolds one scene at a time. You are never looking at a full section all at once, which keeps attention moving in the order I intended.

‍ ‍

For the horizontal scroll section and the scrolling banners, I layered scale and offset animations to move the composition across the screen and add visual interest. On a long landing page the call to action has to reassert itself more than once, and a moving banner does that without a second headline competing for attention.

‍ ‍

Stacks‍ ‍

Stacks are the backbone of the layered editorial cards and the complex responsive layouts throughout the page. I nested stacks within stacks to reach the editorial composition I wanted, then animated each stack as a group.

‍ ‍

Because a stack can hold any element, I used video blocks inside the cards for accessibility and flexibility. And because the group carries its own alignment and motion settings, I perfected one card and duplicated it. Every card after the first inherited consistent layout and timing without me setting either again.

‍ ‍

Of the four tools, this is the one that changed how I work.

‍ ‍

Mobile Overrides

Independent mobile settings let me adjust transform values, timing, and layout specifically for smaller screens. Same content, different arrangement, no media queries.

‍ ‍

A scroll sequence tuned for a wide viewport rarely reads the same way on a phone, and being able to retime it directly meant a streamlined mobile flow without compromising the desktop experience.

‍ ‍

See the site

‍ ‍

The finished page is live at designforward.live. Scroll it on desktop and on your phone, since the two are arranged differently on purpose.

‍ ‍

If you want to go deeper into how I approach Squarespace projects, both the native tooling and the code that goes beyond it, that is what I teach inside Standout Squarespace.

Your dream Shopify sections, built in minutes with AI

Maybe you've tried building Shopify websites before, but you found it creatively limiting. That has finally changed. You can now build your dream Shopify sections and layouts in minutes with the help of AI.

1. Intro

2. Read our Story

Your dream Shopify sections, built in minutes with AI

a.
Shopify
b.
Video

Shopify No Longer Has to Be Creatively Limiting (00:00)

Maybe you've tried building Shopify websites before, but you found it creatively limiting. That has finally changed. You can now build your dream Shopify sections and layouts in minutes with the help of AI.

I built this custom section, which is responsive and accessible in Shopify, and it actually started out as a Figma design. I love designing first on Figma. This is how I'm able to experiment with different layouts. I'm also going to link the video where I share more about my design process.

Why I Use Claude and Its Skills Feature (00:38)

I primarily use Claude as my AI tool. I prefer Claude the most because of its skills feature, because I can assign a specific skill for a specific task.

When you click this plus icon, you'll see your database of skills, and then I do have a specific skill just for creating Shopify sections. In this skill, I included:

• Best practices in writing liquid codes for Shopify

• Making sure that each section that's generated is accessible and responsive

• Specific instructions for themes that I typically use, which are Horizon and Dawn

But if I use a different theme, then this skill is trained to ask relevant questions such that it can create sections that are compatible with that particular theme.

Two Ways to Have Claude Reference Your Design (01:27)

There are two ways by which we can have Claude reference the design that we've created.

Option 1: Using Connectors

First is by using connectors. If you design using Figma, then you can use the Figma connector and simply share the link to your Figma file.

Option 2: Using Screenshots

But most of the time using screenshots will work. What I'll do right here is to simply take a screenshot of my design, and then upload it to our chat box, and then I can simply type "please create the section attached for Horizon theme."

We may add more information to our prompt, such as that we would like these texts in the left column to function as tabs, but most of the time I find that Claude is smart enough to identify the user's intent. So we can start just by using this simple prompt.

From Prompt to Live Section in Minutes (02:12)

It took around three minutes. It started by analyzing the layout, and then it went ahead and came up with a liquid file that we can instantly add to our Shopify.

Here's how to get it into your store:

• Simply download this file generated by Claude

• Open this using any text editor

• Copy all the content

• Paste it to your Shopify code editor

• Save this file and refresh your customizer

Once you do this, you'll find that when you add a section, you'll find the new section in your sections catalog.

Easily Customizable, Not Hard Coded (02:48)

When you click it, you'll find that you can easily customize it, because this section is not hard coded, but instead it is observing best practices in building Shopify sections where users or designers can easily change the content, including text as well as images.

So I can change the label right here. Select for more existing images. You may also:

• Remove tabs or add new tabs as needed

• Change the colors, as with other sections within the theme

We'll also notice that it adapts to the setting of the theme. If I switch from one tab to the other, notice how it also respects the site-wide animations.

Also, the sections that are generated are responsive by design, so it looks good no matter what the browser or device size is.

Built to Be Accessible (03:42)

What I really focused on in building this skill dedicated to building Shopify sections is to advocate sections and layouts which are accessible to be compliant to accessibility regulations.

One of the requirements is for users to be able to navigate through our website just by using their screen readers or keyboard. A quick task to do on our end is to tab through the content. So, notice if I start tabbing, we'll be led to our material section.

When we have tabbed content like this:

• Users must be able to navigate through the tabbed items using the arrow keys — notice I am clicking the right arrow key on my keyboard, and I'm able to easily tab through all these items

• If there are links within this focused item, then our users must be able to access them too

Why Knowing How to Read Code Still Matters (04:43)

Looking back into our design, there are some more aspects that we can polish, and to polish this, having an understanding of how to code in Shopify is really useful.

You don't have to write codes from scratch or memorize the syntax; it is sufficient to just be able to read codes, especially CSS and Shopify Liquid.

You'll also make the most out of the custom, beautiful sections that you develop through this workflow by having an understanding of core Shopify features, such as meta objects and meta fields.

For example, aside from adding this section to the homepage, we can actually add this section to our product page, and then be able to pull dynamic data per product. That means even if you have tens of thousands of products, you simply need to install this section once, and it will automatically change the values of the image, as well as the text, depending on the product that is shown up.

Deepen Your Shopify Knowledge with Standout Shopify (05:38)

Hence, if you'd like to deepen your technical knowledge in terms of building Shopify websites, then I invite you to check out my program, Standout Shopify. We have resources for you, whether you are starting out as a Shopify designer or if you're already experienced.

For example, I share:

• The exact workflow and skill file by which I'm able to create custom Shopify sections in minutes

• The fundamentals of building Shopify sites, as well as customizing it with code

It's a monthly membership, so you can come and go as you need to. I'll walk you through the basics of building Shopify websites and running a web design business, crafting high-value Shopify websites.

By joining the membership, you'll get immediate access to the course lessons, as well as trainings like Figma Essentials and Klaviyo Essentials.

Inside Standout Shopify: Course & Community for Designers

Curious what's inside Standout Shopify? In this preview, I'll walk you through the program: built for designers who want to confidently design and build high-value Shopify websites for their clients.

1. Intro

2. Read our Story

Inside Standout Shopify: Course & Community for Designers

a.
Shopify
b.
Video

Welcome to Standout Shopify

I'm Rache of Squarestylist. In this video, allow me to walk you through our Standout Shopify program.

[00:00] What Standout Shopify Is

Standout Shopify is a course, community, and creative resource library for designers ready to build high-value Shopify websites.

Our program is hosted in Circl — this is where you'll find all our resources, including the courses or the lessons, as well as our community discussions.

In the top bar, you'll find the Courses tab, where you'll find structured lessons available for you.

[00:35] Designed for Every Stage of Your Shopify Journey

What I'd like to highlight is that this program is designed for you, no matter where you are in your Shopify design journey — whether you are a complete beginner or an experienced designer, rest assured that there are resources to support you here.

• If you're new to Shopify, I recommend going through the lessons in order.

• If you're already familiar with Shopify, for example, you may just look into the Shopify Build or Shopify Code modules.

This is designed to be a library where you pick what you need at the moment.

[01:10] The Discussions Space

And that's not only the case in terms of our courses or lessons. That's also how we designed the discussions.

So for example, under our Membership Space group, you'll find the workshops where I share workshops that you can incorporate in any Shopify site that you are working on. Note that you can apply these workshops to any Shopify project immediately, without having to complete the lessons.

And if you need any guidance, that's where our Discussions space is about. You can create a new post to ask questions about any topic. For example:

• How to approach your Shopify project

• How to build a certain layout or functionality in Shopify

I personally attend to every question, and I love problem-solving with my students. So please don't hesitate to ask questions.

[02:01] How to Post in the Community

It's best to create separate posts per topic. So for example, if you're working on an entire page in Shopify, it's best to create a new post for every section.

In every post and reply that you make, please make sure to tag me at @Rache. This is how I'll get notified.

Again, I'd like to highlight that the program is meant to be a support system for you, so please don't hesitate to seek support, especially if you're working on a current Shopify project. For example, if you need help achieving certain styles or layouts in Shopify, then this is what our Discussions space is about. I will:

• Guide you step by step on how to achieve certain layouts

• Provide alternatives

• Point you to a specific lesson or workshop

Of course, I highly recommend that you go through our course lessons, because that will give you a good foundation. But going through the lessons or the discussions is not a requirement. For example, if you need a certain functionality added to your Shopify site, then I'm happy to point you to a resource or customize a specific resource for you. Of course, it depends on the complexity, but I try my best.

[03:05] The Standout Shopify Knowledge Base

In our community and in our lessons, you'll find me referencing resources that are hosted in our Standout Shopify Knowledge Base. This is in Notion, and all you need is a free account to access this resource.

You should receive an invitation from me to view our knowledge base 24 hours after you join our Standout Shopify membership.

You don't have to go through all of them at once, but you'll find that when you go through our courses, for example, in the Business unit, you'll find me referencing these resources in our lessons. For example:

• Contracts

• Message templates

• Email scripts

All of those — I just wanted to have a central repository for all those resources and templates.

This is also where you'll find our Shopify Code Toolkit, which is a central database of the codes that you might find helpful in your Shopify builds. It's just easier to copy and paste from Notion to your Shopify site.

And again, you don't have to go through everything. But for example, if you're looking for a specific layout, like a gallery that you wish to add to your Shopify site, then you can look through the inspirations or ready-to-use sections that you can incorporate to any Shopify site.

[04:30] Walking Through the Course Lessons

Now let me walk you through the course lessons available for you at the moment.

Business

First, we have the Business unit, where I walk you through how to build a web design business with Shopify. And if you're just starting out, you'll also find a lot of resources on how to start your web design process, like:

• The questionnaire

• The project management dashboard

• How to go about communicating with a client, from pricing to handoff

Designing for E-commerce

We also have Designing for E-commerce, where I walk you through the principles of designing for e-commerce websites. We don't only tackle aesthetics, but also the strategy behind:

• How to achieve business goals

• How to make sure that our websites are at par with website standards on accessibility, performance, and SEO

Shopify Basics

And Shopify Basics introduces you to building in Shopify, including how to create your Shopify Partners account, as well as being familiar with the theme editor, the Shopify dashboard, and the store data.

The lessons tackled here are applicable to any theme, that includes:

• Setting up shipping

• Taxes

• Launch and handoff

[05:38] Dawn vs. Horizon Architecture

But in terms of the actual build and coding of Shopify sites, there are nuances depending on the theme that we use. There are thousands of Shopify themes that you'll find on the internet, but they are actually categorized into two main architectures:

• Dawn architecture

• Horizon architecture

So Dawn has been used for years, and currently, as of May 2026, this is the only architecture used by 100% of the paid themes in the marketplace.

But Horizon was introduced in May 2025, because it is a completely new architecture. It is not yet adapted by the existing paid themes, and there isn't an easy upgrade path from Dawn to Horizon. Hence, at the moment, the Horizon architecture is only available via the free themes provided by Shopify. In fact, when you install a new Shopify site, the default theme is called Horizon.

[06:39] Why Our Build & Code Modules Use Dawn

Currently, our Shopify Build and Shopify Code modules are built around the Dawn architecture. This way, whatever you learn from these modules, you can easily transfer it to other themes available in the Shopify marketplace.

The Dawn architecture is still widely used. And in fact, in these modules, I ask you to use a specific theme called Essentia. Essentia uses the Dawn architecture, and it is still being used by our students to build new Shopify websites.

When you visit our showcase page and filter to the Shopify projects, these are using our Esencia theme. Even in recently launched websites by our Standout Shopify students, like this one by Ellie, they are still using our Essentia theme.

[07:31] What's Coming for Horizon

Using the new Horizon architecture, though, has some advantages, which I discussed in the Shopify Basics module. This is why I'm adding new lessons to a module specific to Horizon.

So from here we have:

• Shopify Build — Dawn (available now)

• Shopify Build — Horizon (coming in the next months)

• Shopify Code — Horizon (coming after that)

Please note, though, that if you already have a project at hand, you may get started with the Dawn architecture, and whatever you learn from building with any theme in Shopify, that's the same framework that we can use in building with other themes.

[08:08] How to Get Help

And again, if you need any help in approaching a project — for example, if you need help:

• Choosing which theme to use

• Choosing which architecture to use

• Navigating the program in general

— please feel free to reach out. You may post in our community, or you may also directly message me.

Vibe Code in Squarespace

Imagine if you can add fun and interactive features to your Squarespace website

1. Intro

2. Read our Story

Vibe code in squarespace

a.
Squarespace
b.
Video

Vibe Code in Squarespace: Add Fun & Interactive Features Using Claude Skills

Imagine What's Possible on Your Squarespace Site [00:00]

Imagine if you can add fun and interactive features to your Squarespace website, for example:

• An online virtual photo booth where users can snap pictures of themselves and download that as a keepsake

• A 3D global locator like this one

• A sketch canvas where users can draw anything and download it

What's great is they are safe and compatible to be added to any Squarespace website — like this quiz — which doesn't require any app or any ongoing costs.

More so, designers and clients can easily edit the properties of these features using this visual editor.

How It Works: Leveraging Claude Skills [00:39]

The way this works is by leveraging a game-changing feature of Claude called skills. Skills are pre-packaged instructions for specialized tasks.

So what I did is to create a specific skill just for creating fun and interactive features that are compatible and safe to add to any Squarespace site.

Uploading the Skill [01:01]

All we need to do is:

1. Click the Customize tab in the side menu

2. Under Skills, simply upload the skill file

3. Once uploaded, we may now use the skill for creating these features

Using the Skill to Create a Feature [01:13]

So we'll start typing forward slash sqsp vibe feature, and from here, we can simply describe what we want to be added to our Squarespace website.

Example: Build Your Own Package Feature [01:27]

For example, if I'd like to add a build your own package feature such that customers can estimate the cost of particular services, the prompt can be as simple as this — because the skill is already pre-packaged with instructions.

Once we initiate this, our skill will come up with some relevant questions. We may answer them in detail. In my case, I created a mock-up in Figma and I can simply take a screenshot of this. So we'll:

• Answer these questions concisely

• Upload our mock-up from Figma

Then it will start creating the artifact right here — just a preview of what our feature would look like. You may prompt further to make any changes, and we can now add it to our Squarespace website.

Responsive to Global Changes [02:18]

And what's created is also responsive to any global changes. For example, if we wish to change the color of the background, this responds accordingly.

Adding a Visual Editor for Clients [02:30]

Then if you wish to have an option for your clients to be able to edit the details of this feature even after project hand-off, then we can simply prompt this to add a visual editor that allows us to change:

• Texts

• Hourly rate

• Locations

• Other properties that you wish

It will then come up with an updated code with the visual editor. Once we add the updated code, we'll now have access to this visual editor settings that gives us access to these properties.

So, for example, I can make changes to the labels, and these changes will be reflected accordingly.

So Many More Features You Can Build [03:05]

There's so many more features that we can achieve using this method, like:

• This 3D global store

• This interactive drawing canvas

• Or even an online photo booth

Standout Squarespace Pop-up activity

I shared the exact method and skill file to create these features in a limited-time pop-up activity in our Standout Squarespace program.

The camp ran from May 16 to June 16, 2026. If you wish to be updated about future camps on AI for designers, subscribe to our mailing list →

Course Discovery Tool Walkthrough: Find the Right Squarespace Workshop for Your Vision

Are you always wondering whether a layout, feature or functionality can be achieved in Squarespace? In this video, I'm going to share with you a free tool that you can use to easily answer that question.

1. Intro

2. Read our Story

Course Discovery Tool Walkthrough: Find the Right Squarespace Workshop for Your Vision

a.
Squarespace
b.
Business

Introduction [0:00]

Are you always wondering whether a layout, feature or functionality can be achieved in Squarespace? In this video, I'm going to share with you a free tool that you can use to easily answer that question.

So if you'd like to check whether the vision you have in mind or the layout that you wish to accomplish in Squarespace is something that we can achieve using the current resources within our program, then you can use this tool.

How to Access the Tool [0:30]

This is a public resource, so you simply need to go to our sales page: Standout Squarespace. Then in the navigation that follows you, as you scroll, you'll find that you can see this Discover call to action at the top right.

Using Sample Questions [0:45]

There are sample questions that you can reference, or you may simply click them. For example:

• "What are the different ways to style a blog list page?"

And then if you'll start to go through our database of workshops, then it will list the relevant workshops based on your question.

So for example, for your blog list page, we have several workshops to help you ideate layouts for that:

• The Editorial Blogs layout

• The Tag List layout

And there is the See Preview option to give you more context of what this technique is about.

Uploading Images as Reference [1:15]

You may also provide images as reference. For example, if your client needs a particular layout to be present on their website, or you have a mock up in mind, then you can simply take a screenshot and then upload that to the chat.

For example, I can simply upload this image, then I can start asking:

• "Can I add a filter to summary blocks like this attached image?"

Then it will start analyzing our image, and again, look through a database if something matches our image and description. And it came up with these options. It says you can absolutely add category filtering to summary blocks using one of our techniques — the most relevant one is Summary Block Category Filter.

A Quick Note on Image Uploads [1:50]

Just to note that if you are uploading images, it's best to keep them below two megabytes. And then if you need help optimizing that image or compressing it, then you can use my tool called pixresize.com.

When You Need Extra Help [2:05]

Also, if you have a specific layout in mind, and our Course Discovery tool can't find it in our workshops, then you can use this chat button and I will personally attend to your question.

Introducing Standout Stories: How Web Designers Shape Meaning Through Style

Introducing Standout Stories, an editorial series that highlights the richly detailed lives of web designers and developers inside our Standout Squarespace and Standout Shopify communities. We’re getting up close and personal on how their experiences and aspirations shape their signature style, if only to inspire you to craft your own.

1. Intro

2. Read our Story

Introducing Standout Stories: How Web Designers Shape Meaning Through Style

a.
Design
b.
Business

Each website has a story to tell. It’s a virtual space that shapes us as we shape it. When I enter a lovingly crafted site, my eyes linger on the lines, typefaces, colors, textures, and movements. What are they trying to tell me? All these elements draw from their founder’s memories or encounters. Like a home, a website builds a sanctuary for its visitors, and it’s the act of intentionality that will keep them coming back.

This entrusts an important role to the web designer-developer: a facilitator of meaning between brand and website.

As an educator, I tend to step back when it comes to matters of taste. I focus my efforts on teaching you the tools of the trade, because I know that nurturing your signature style is a deeply personal process. It takes careful introspection to know which parts of your experiences and preferences show up consistently in your body of work. I can help you build the skills to scaffold your style, but style you would have to realize within yourself over time. This distinct sense of artistry is what resonates with your ideal client.

Introducing Standout Stories

How, then, do we begin to shape our own style as web designers and developers? We must keep our eyes open, paying close attention to the details that escape the typical bystander. More importantly, we listen to prominent creatives and the effort that goes into their own website pieces. This is what I had in mind for my new multimedia series, Standout Stories, which is an intimate look into the designer-developer’s craft.

Our first feature is none other than Hello-World Studio, a boutique design agency co-founded by Standout students Joy Yiu and Reyna Dashefsky. Their website is a trip down the textboxes and trinkets of Y2K yesteryear, signifying a simple core philosophy—a return to the whimsy and sincerity of the early internet. It has been a delight for me to discover what has brought Reyna and Joy together for this virtual masterpiece.

ASCII art and kaomojis may not be your style, but this story could bring you closer to yours. And who knows? You might find your own words and work featured in this series soon enough.

Introducing Savvy: Your Squarespace-Specific AI Coding Assistant

Meet Savvy: an AI code generator built specifically for Squarespace.

1. Get Started for Free

2. How to use Savvy

Introducing Savvy: Your Squarespace-Specific AI Coding Assistant

a.
Squarespace
b.
Video

You've probably heard that building websites is getting easier with AI. You’ve tried using ChatGPT, Claude, or Gemini—maybe you even pasted their code into Squarespace and… it didn’t work.

That’s because most AI tools aren’t built with Squarespace in mind. They don’t understand the platform’s unique element structures, code patterns, or best practices.

That’s exactly why I built Savvy—an AI coding assistant built specifically for Squarespace.

What Is Savvy?

Savvy sits right beside your Squarespace website. It lets you:

• Click directly on any element on your site

• Upload reference images for customizations

• Generate accurate, context-aware code tailored to your Squarespace site

Visit squaresavvy.com to get started.

Getting Started with Savvy

1. Sign Up

Head to the landing page and click “Start for Free.” If you're a standout Squarespace member, make sure to sign up using the same email you use for the Standout Squarespace community.

2. Confirm Your Email

After creating your account, check your inbox (and spam folder!) for a confirmation email. Click Confirm Email to access your Savvy dashboard.

3. Install the Chrome Extension

Click the “Add Chrome Extension” button in the dashboard. Once it's added, pin it in your browser for easy access.

Now, on any Squarespace site, you can activate the extension and use Savvy's powerful features.

Using Savvy to Customize Your Squarespace Site

Savvy needs to understand which element you're working with—so the first step is always to use the pointer tool at the bottom-left of the Savvy panel. Once it's active (turns gold), hover over your site, and click the element you want to modify.

Here’s a walkthrough of what you can do:

Add a Border to an Image

After selecting an image, just type:
“Add a border to this image.”

Savvy considers Squarespace’s quirks (like how images are set to fit) and generates the correct CSS. Copy the code, open the CSS panel (/ > type “CSS”), and paste it in. You might need to preview in a no-redirect browser (?noredirect at the end of the URL) to see the effect.

Want rounded corners? You can ask Savvy—or just use the built-in image block options.

Bonus: Savvy uses Squarespace variables like --paragraphMediumColor so your customizations respond to your theme settings. You can always swap in a hex code if needed.

Custom Bullet Points with SVG Icons

Want more on-brand bullet points? Select your text block and say:

“Change default bullet points to a custom graphic.”

Savvy will guide you through:

1. Removing default bullets

2. Adding custom SVGs (just right-click > "Copy as SVG")

3. Pasting the new code and previewing the result

You’ll get a clean, branded bullet list. You can even tweak the icon size, color, and alignment.

Add Hover Captions to Gallery Sections

Visual customizations are often best explained with images. You can:

Paste in a screenshot or reference image (Figma or Adobe XD works great)

Describe your goal—e.g.
“I’d like the gallery caption to appear on hover like this image.”

Savvy will generate code scoped only for desktop (since hover doesn’t work well on mobile). Paste the code into your custom CSS panel, and you’ll see the caption reveal beautifully on hover.

To reuse this across multiple gallery sections:

• Edit the section settings and add an anchor link ID, like gallery-hover

• Use the updated code Savvy provides

• Save the section, and reuse it on other pages

Add Estimated Reading Time to Blog Posts

Select your blog post block and ask:

“Add estimated reading time below the blog title.”

Savvy will provide:

• JavaScript code (paste in Code Injection > Footer)

• CSS code (paste in the CSS panel)

It calculates based on 200 words per minute and displays a message like “1 minute read.”

A Reminder: AI Isn’t Perfect

While Savvy is trained on Squarespace-specific best practices, it’s still AI. It doesn’t have access to all your custom CSS or JS, so sometimes it’ll get you 90% of the way there—and you’ll need to apply your coding knowledge to finish the job.

For example, say you want to change a blog’s “Read More” link to say “View Project”:

• Select the block

• Ask: “Change Read More to View Project”

• Savvy will give you CSS to paste

If there’s an issue (e.g. strikethrough text), you may need to inspect elements manually to troubleshoot

This is where your coding foundations come in.

Help Improve Savvy

Within the chat history, you can:

• Rename conversations for future reference

• Click the three dots (⋯) to share feedback

When you do this, the entire conversation is shared with me. This helps me train Savvy even better.

Feel free to share your wins, too! What you’re building, what you love—it fuels continued improvement of the tool. You can also visit the Support menu on the dashboard for more resources.

Savvy is here to empower you to take control of your Squarespace customizations—without the guesswork. It’s visual, context-aware, and continuously improving.

But remember: AI is only as good as the questions we ask. Your creativity and coding foundation are the keys to unlocking its full power.

Can’t wait to see what you build with Savvy.

How to Upload and Use Custom Fonts in Squarespace (Finally!)

Squarespace has finally rolled out a long-awaited feature: you can now upload your own custom fonts directly, without touching a line of code.

1. Intro

2. Assigning Fonts

How to Upload and Use Custom Fonts in Squarespace (Finally!)

a.
Squarespace
b.
Video

If you've ever struggled with using custom fonts in Squarespace, we’ve got good news—it’s now easier than ever. Squarespace has finally rolled out a long-awaited feature: you can now upload your own custom fonts directly, without touching a line of code. Let’s walk through how this works and some tips to keep in mind as you start customizing your site’s typography.

Custom Fonts Without Code? Yes, Please.

Previously, if your preferred font wasn’t available in the built-in font picker, you had no choice but to inject code or CSS workarounds. But now, Squarespace has introduced a simple drag-and-drop upload feature for custom fonts.

To upload a font:

1. Head to the Font Manager.

2. Drag your font file (like .otf, .woff, or .woff2) into the upload window.

3. Squarespace will auto-detect the font name and weight—super handy!

💡 Note: Always ensure you have the proper web license for the font you upload. Many foundries sell separate licenses for desktop and web use.

Assigning Fonts to Your Site

Once uploaded, your custom fonts will show up in your Squarespace font drop-down menu, making it super easy to assign them to various text elements like headings, paragraphs, or even buttons.

For example:

• Replace Helvetica with your custom font like “Glossy Display” for headings.

• Adjust weight, text transform, and other styling directly in the design panel.

• Want to italicize? No problem. If you’ve uploaded the italic version of your font, Squarespace will handle the switch automatically when you apply italics.

Uploading Font Variations (Light, Regular, Italic, etc.)

You can upload different variations of your font—light, regular, italic—and Squarespace automatically organizes them under the same font family. That means:

• Upload a light italic? It’ll be categorized as such.

• Switch weights easily using the font settings panel.

• Italicize elements and see the correct version display beautifully—no fake italics here.

🛑 Pro Tip: Only upload the variations you actually need. Uploading too many can slow down your site. Squarespace even reminds you: fewer fonts = faster site.

Deleting Fonts You No Longer Use

If you decide to remove a font:

1. Make sure it’s no longer assigned to any element.

2. Click the “X” icon in the Font Manager.

3. If the font is still in use, Squarespace will prompt you to remove it from your site first.

Beyond Headings – Get Creative

Custom fonts aren’t just for headings. You can:

• Assign them to miscellaneous fonts like buttons or captions.

• Use them on specific blocks, like setting a monospace block to a custom sonar-style font.

• Apply them via granular font assignments in the style editor.

But here's a final piece of advice: if you're only using a custom font in one small spot, it might be better to upload it as an SVG. That way, you’ll avoid the performance hit that comes with loading extra fonts.

Squarespace’s new font upload feature opens up tons of creative possibilities—no more coding hacks or messy workarounds. Just drag, drop, assign, and go.

But remember:

• Always check licensing.

• Upload only what you need.

• Consider performance alongside aesthetics.

Now go ahead, give your Squarespace site that custom type vibe it deserves.

Introducing Adagio: Scroll-Driven Animations for Memorable Squarespace Websites

Adagio is an advanced scroll animation system designed specifically to bring immersive, scroll-driven features to your Squarespace website.

1. Intro

2. Installing Adagio

Introducing Adagio: Scroll-Driven Animations for Memorable Squarespace Websites

a.
Squarespace
b.
Animations

There are millions of websites out there, so how do you make yours unforgettable? That’s the question that led me to create Adagio — an advanced scroll animation system designed specifically to bring immersive, scroll-driven features to your Squarespace website.

And with Squarespace soon launching a native way to animate block elements, I figured now's the perfect time to introduce even more advanced, section-based scroll animations that work beautifully in tandem with the upcoming native features.

What Are Scroll-Driven Animations?

Scroll-driven animations are a type of website animation where the movement of elements is directly based on the user’s scroll position.

Take the beautiful Cosmos website as an example — elements start to move as soon as you hit certain sections, and their speed or transformation depends on how fast you scroll. Apple has also mastered this technique in their product pages, making users feel like they're unwrapping a product as they scroll.

When crafted well, these animations can transform your website into a story — an unfolding experience rather than a static presentation.

Meet Adagio — Graceful, Scroll-Based Animations

I wanted to make scroll animations easy and intuitive to implement in Squarespace. That’s how Adagio was born — named after the slow and sweeping expression of grace in music and dance.

Head over to CasaAdagio.com to explore a showcase of what's possible.

A Tour Through Casa Adagio

As you land on the page, you're greeted by a clock-inspired graphic that slowly rotates to reveal the brand’s colors. A message reads: "Take time as you scroll." This isn't just poetic — it’s instructional. Slow scrolling reveals the magic.

Highlights from the Demo:

Split Characters: As you scroll, text is slowly revealed letter by letter.

Stroke Animation: Custom graphics created in Figma are revealed in sync with your scroll.

Audio Integration: Click ‘Play Audio’ to enhance your experience with ambient music — toggled on or off, stuck at the bottom right of your screen.

Scroll-Synced Video Shifts: Full-width videos subtly transition between blocks as you scroll, creating a seamless storytelling effect.

Installing Adagio: Quick & Flexible

Installing Adagio is effortless. Here’s how it works:

Step 1: Install the Catalog

You can set it up in seconds — a simple code adds the entire animation system to your Squarespace site.

Step 2: Activate Specific Effects

You don’t have to activate everything. Use the visual guide to pick and activate only the effects you want — with just one line of code.

For example, to activate horizontal scrolling sections, all you need to do is add keywords to your section anchors:

• Add HL start to the first section

• Add HL end to the last section

Adagio automatically calculates the scroll length based on how many sections are included. No code editing required.

Scroll Animation Techniques in Adagio

Here’s a rundown of the scroll-driven animation types available:

1. Horizontal Image Scroll

Using Fluid Engine + Gallery Blocks, the images scroll horizontally. The scroll length adjusts based on how many images are in the gallery.

2. Draw on Scroll (SVG Reveal)

Create custom SVGs in Figma, Illustrator, or Adobe XD. These graphics reveal themselves as users scroll. Combine them with split-character text effects for layered impact.

3. Horizontal Scroll by Section

Assign full Fluid Engine sections to horizontally scroll. Add any type of content: images, videos, galleries, or lists.

4. Moments of Delight

Interactive hover animations — items bounce and respond dynamically as you hover over them.

5. Mouseover Reveal

Using just a gallery block, images swap based on mouse movement. It's great for showcasing portfolios in a clean, engaging way.

6. Circular 3D Scroll

Use list sections to create a 3D scroll wheel effect — perfect for displaying list items in a unique format.

7. Curved Horizontal Scroll

Another list-section-based animation, this one adds a soft curve to the scroll for a more dynamic look.

Block-Level Animations

Although Squarespace will soon have native block animations, I’ve added custom effects in Adagio that go beyond what the native tools can offer.

For example:

Split Text Animation: Add keywords like character split directly in your text block link (in edit mode), and the animation is applied automatically.

Customize stagger timing by adding a value (e.g., stagger:03) to control how fast each letter appears.

Scrollytelling System Built for Squarespace

What makes Adagio truly special is how it brings advanced animation techniques to your Squarespace site without requiring code editing. You simply:

• Add specific keywords to sections or blocks

• Use the visual guide to activate effects

• Customize effortlessly through section or block IDs

If you're curious to dive deeper, check out my free workshop on Scrollytelling — where I walk through how to design memorable Squarespace websites using scroll animations.

My one secret to keeping website visitors engaged

Make your audience linger a while longer with scrollytelling, subtle motions that bring a sense of novelty.

1. Intro to scrollytelling

2. Scroll animations to love

MY ONE SECRET TO KEEPING WEBSITE VISITORS ENGAGED

a.
Squarespace
b.
Animations

We tend to think of scrolling as a bad habit we fall into. Unlike deliberate action, scrolling comes across as lazy, thoughtless, repetitive. Our thumb goes through the motions searching for something new, yet we wind up in endless corridors of images and clips that blur into one another. Time, before we know it, has slipped through our fingers.

Can we change the way we scroll? Rather than treating it as a coping mechanism for boredom or dissatisfaction, we could turn scrolling into a medium for delight. Web designers and developers have the ability to reshape digital experiences by building websites for clients.

Holding people's attention begins with the intention of adding visual momentum to an otherwise flat website—an often overlooked technique called scrollytelling.

What does scrollytelling look like?

On the surface, it might seem that website design consists of mulling over brand imagery, font pairings, or color palettes. But this assumption can hold us back. We're working with a medium that allows for complex movements and transitions. Why not let our webpages unfold with animations?

The art of scrollytelling began as a journalistic ambition to reimagine center spreads beyond your typical morning paper. "Snow Fall: The Avalanche at Tunnel Creek" written by John Branch for The New York Times was the first feature of its kind in 2012, blending pop-up galleries, full-bleed interviews, and parallax scrolling into an immersive documentation of a tragedy in six parts. This award-winning multimedia piece later inspired other publications to take full advantage of coding techniques to contextualize their data-rich narratives.

These developments, as you can imagine, were not limited to newspapers or magazines. A number of businesses have adapted scrollytelling to infuse their sites with character. The elements don't just look the brand; they live and breathe and move it. Slow motion transforms into an invitation for each visitor to drink in the details at their own pace.

When performed well, animation breaks the monotony of the usual scroll. Both play and pause commit the movements to memory, and your attention to detail makes all the difference.

Stylistic scrollytelling effects to consider

It takes skill and intuition to find rhythm in scrollytelling. There are basic animation options available to website builders, but experts would find the selection limiting. Custom choreographies might be necessary for premium sites to carry out a client's specific requests. With the help of code, you can tailor transitions to fit the narrative—not the other way around.

Here's a look at advanced scrollytelling applications that can get you ahead of the curve:

Canals Amsterdam Website

Horizontal Scrolling

Some design rules are made to be broken. Horizontal scrolling shows you how fun it can be to turn the website on its head every now and then. This one's suited for sprawling timelines, media galleries, kind words, and other collections. A single code snippet slides your homepage from left to right, and it works even when your visitors scroll downward out of habit.

Going in circles

Another way to bend digital reality is to orchestrate the trajectory of objects on scroll. Consider adding a touch of whimsy to your project with a carousel going round and round the more you move down the page. You can have it in three ways: a gradual circular reveal, a curved horizontal path, or a single focal point spinning like a top.

Loti.ai website

Drawing SVGs

Treat every website like a creative canvas where even your visitors can draw along with you. Scalable vector graphics (SVG) allow you to work with single-stroke illustrations so anyone can scribble down the page as they scroll. The overall effect leaves a stunning, sketch-like impression. Pretty neat, don't you think?

Bouncing and Dragging Elements

What if users can play around with elements they see on screen? With a bit of JavaScript, you can add a delightful bounce or drag to any block around your cursor. This effect makes sections a whole lot more dynamic, setting your site apart from the get go.

The New York times article

Synced on Scroll

Turn scrolling into a conversation between your content and your visitor's curiosity. As elements drift into view, they wake up—images materialize from transparency, backgrounds blush with new colors, and text slides in from the wings.

Would you believe that you can do all these and more in Squarespace? People may know it as the all-in-one platform that's simple enough for beginners, but don't underestimate its capabilities. You'll realize it's possible to craft world-class websites right here, refining each project with polish while keeping maintenance easy for clients after launch.

Stunning visuals do catch people's attention. But in the end, it's your ability to deliver a seamless story that makes them stay. I hope this inspires you to build interactive websites that can slow down our scrolling—and make each second count.

5 Creative Blog Layout Ideas for Squarespace

Transform your blog from template-standard to editorial-style with these unique code components designed to showcase your content beautifully.

1. Built-in customizations

2. 5 Creative Blog Code Components

3. Why create custom blog pages?

5 Creative Blog Layout Ideas for Squarespace

a.
Squarespace
b.
Video

Most blog pages you see online follow the same predictable pattern: blog cards arranged in simple grids or columns. While Squarespace's built-in options work perfectly fine, they don't have to be your only choice. With a few thoughtful code additions, you can create something that feels more editorial and uniquely yours.

In this post, we'll explore what's possible with Squarespace's visual editor first, then dive into five signature Squarestylist code components that completely transform how your blog looks and feels, just like magic.

Working with Squarespace's Built-in Options

Before we get into custom code, let's appreciate what Squarespace gives us right out of the box. The visual style editor makes it easy to customize your blog without any coding:

• Adjust fonts, colors, and spacing across your entire site

• Choose from different blog layouts like grid, side-by-side, or single column

• Control the number of columns and overall structure

• Toggle elements like author bylines, dates, categories, and tags

• Modify placement of blog titles and metadata

• Add thumbnail images, excerpts, or full post previews

These built-in options can take you pretty far, especially when you're strategic about combining them.

Simple Workarounds Using Existing Features

Sometimes the most elegant solutions come from creatively combining Squarespace's existing blocks:

• Summary blocks on custom landing pages let you create entirely different layouts for showcasing your posts

• Different styling between your main blog page and individual posts creates varied reading experiences

These approaches work well when you want something different but aren't ready to dive into custom CSS yet.

When You're Ready for Custom Code

If you want your blog to look truly distinct from templates, custom CSS opens up much more creative control:

• Custom styling and filtering for tags and categories

• Unique hover effects on blog images

Don't let the word "code" intimidate you—you can get started by simply copying and pasting code snippets. I keep all my favorite techniques organized in what I call my Code Toolkit, making it easy to search and apply them to new projects.

5 Plug-and-Play Blog Layout Components

Here are my favorite code components for creating blogs that feel editorial and unexpected:

1. Blog Stacked List

This typography-focused layout stacks your blog titles in elegant layers, perfect for showcasing a beautiful type system. It's ideal when your content is text-heavy and you want the titles to be the main attraction.

2. Blog Feature Grid

Creates an editorial magazine feel with your most recent post displayed prominently on the left while visitors scroll through the rest on the right, creating a nice focal hierarchy.

3. Blog List Follow Cursor

Adds subtle interactivity as thumbnail images appear and follow the cursor when hovering over post titles. It's playful without being overwhelming—a small detail that makes browsing feel more engaging.

4. Blog List Carousel

Transforms your standard grid into a smooth horizontal carousel that visitors can drag through or navigate with arrows and pagination. The layout automatically adapts to mobile, showing one post per slide for easy browsing.

5. Blog List Expand

Creates a dynamic expand-on-hover effect where images reveal themselves as visitors explore your post titles. It's unexpected and memorable without being distracting.

Why Code Your Blog Layouts?

The advantage of using custom CSS over workarounds like summary blocks is that you keep all of Squarespace's built-in functionality. Your visitors can still navigate to older posts, use pagination, and access all the features they expect from a blog while experiencing your unique design vision.

All of these techniques are available in our Standout Squarespace Code Toolkit, where they come with step-by-step video walkthroughs to help you implement them confidently. If you're just looking to try one or two specific layouts, they're also available individually in our Code Components Shop.

The goal isn't to make your blog complicated—it's to make it feel intentionally crafted. When visitors land on a blog that clearly reflects the creator's aesthetic vision, they're more likely to stay, explore, and remember what they found.

Which of these layouts speaks to your creative vision? I'd love to hear about your favorite approach in the comments below.

Setting up your studio’s tech stack

How to build the tech stack that will serve you in your day-to-day operations.

1. Studio essentials

2. AI Automations

3. Background checks

4. Access the Squarestylist Stack

Setting up your studio’s tech stack

a.
Business
b.
Tech Stack

When it comes to being a web designer, we often think about creative skills that develop your eye for good design. There's also the business aspect to it—the clarity and confidence that demonstrates what you can do for clients.

Yet we tend to overlook a key component to any design studio: the digital system that facilitates your best work and keeps the lights on even when you're away.

I call this collection of business apps and resources the tech stack, a term that I borrowed from web development circles. Think about the tools that blend seamlessly in the background as you focus on client projects. It's easy to take them for granted when they get the job done. However, when your workflow becomes too overwhelming and tasks begin to slip between the cracks, a few tweaks to your tech stack might be in order.

How do you know if you've chosen the right tool? When is it time to upgrade the size of your toolkit? Here are some useful tips to set up your studio for success:

Establish your studio essentials

Start with the tools of the trade—the items most closely involved in your creative projects. What's your bare minimum? These will shape the digital environment where you'll be spending the most time in, so choose what will grant you the most ease and flexibility.

For me, I can't imagine doing web design without Figma to craft my website prototypes and Squarespace to build and launch them for clients. I even created Pixresize so I can quickly optimize website images in bulk.

Mind the learning curve

How long would it take you to get used to navigating an app's features? This depends on your level of expertise, as well as past experience with similar tools. Extensive documentation, community support, and available courses could also go a long way in addressing any gaps in your knowledge.

For client-facing platforms, you need to keep in mind usability and accessibility even for less tech-savvy users. The tool has to be intuitive enough to require minimal handholding, and this is especially true for your website platform of choice.

Consider app compatibility

Does this app function well with other existing tools in your stack? Check the settings for third-party integrations with your favorite platforms. You might want to do a test run before you commit, or else you might find yourself addressing glitches or manually double-checking for errors all day.

There's one AI automation tool I run to when there are no built-in integrations: Zapier. Its visual interface lets me map out workflows that use my everyday apps to accomplish tasks on my behalf, such as collecting form responses.

Secure your digital storage

I believe this is one of the most crucial decisions you'll make for your studio: where to entrust your documents for safekeeping. Of course it's ideal to have a local backup of all your brand assets and projects. But online copies have an advantage in terms of collaboration—you could easily generate a link to share with clients for review.

Personally I use Dropbox to safeguard my brand assets and project files; it helps that it has a nifty feature called Sign that I can use for my contracts. As for gathering my bookmarks, notes, and images for inspiration, I stick to mymind as my virtual, self-organizing corkboard.

Streamline the smaller tasks

When you're used to handling every single task, it's too easy to get caught up in busywork that don't contribute meaningfully to your business. Which recurring items on your to-do list take too much of your time away from design? See if you can find tools that can get the tedious, repetitive work off your hands.

In my case, Peachs became my go-to for hassle-free affiliate marketing to save me the effort of onboarding and sending payouts. I also use Superhuman to get on top of my emails and Voicenotes to record my thoughts and meetings.

Future-proof your toolkit

It can be tempting to reach out for that new shiny toy you spotted in the market. Before you ditch the one you're currently using, ask yourself: Will this tool be able to support my needs in the long run?

Nothing lasts forever—even that lifetime access guarantee—but you can still do your background check on an app for signs of longevity. Research their business model and roadmap, as well as testimonials from avid users. Plus, it's worth looking into options for importing and exporting your data when you need it.

Contact your trusted experts

You've come this far doing everything on your own by being scrappy with tools. However, there comes a time when you'll have to take a step back and allow your studio to scale with the advice of mentors. It's perfectly alright to ask for assistance. Just because you could make it alone doesn't mean you have to.

Get exclusive access to the Squarestylist Stack

Curious about my studio setup yet? I'm sharing my very own tech stack with those who fill out my 2025 midyear survey for web designers. You can submit your response here to browse a list of my go-to apps and experts.

Shaping your tech stack is a constant work in progress; what may have suited you in the past may no longer fit your studio's growing needs today. It helps to revisit the systems you've set in place every now and then to evaluate what works. But there's no need to reinvent the wheel, either. Sometimes you can just keep an eye on what designers like you are already raving about.

You might also like:

• How to optimize and resize images for web

• Three essential Flodesk workflows behind my business success

• Which website builder ranks best in accessibility?

• Are wireframes still necessary if I can design directly on website builders?

• Add custom CSS to Squarespace easily with Selector Helper extension

The Ultimate Squarespace Tutorial for Beginners

Learning the building blocks of Squarespace that let you create distinctive websites.

1. Start smart

2. Font Hacks

3. Mastering Sections

4. Assigning Heading levels

The Ultimate Squarespace TUTORIAL for Beginners

a.
Squarespace
b.
Video

What I love most about Squarespace is how it scales with your ambitions. When you're starting out, this seemingly simple platform enables you to create something beautiful without the typical overwhelm that comes with using and learning a new website builder for the first time. As you grow more confident, you discover layers of sophistication, advanced design options, powerful section and block features, collection pages that transform into directories, courses, and full-fledged web shops.

I've seen students go from complete beginners to professional web designers, all while staying on Squarespace. These are the foundational techniques that unlock that potential, the pro tips that will grow with you from your very first website to professional client projects.

Start Smart

Skip the Template Overwhelm

Here's what most beginners don't know: every single Squarespace template is built from the same framework. Those beautiful galleries you see? They're just showing you what's possible when you understand the building blocks.

Instead of endlessly scrolling through templates, start with a blank canvas. Use those templates as inspiration, not limitations. This simple shift will open up unlimited creative possibilities.

Prepare Before You Build

Before adding any content, take these two steps that most people skip:

Optimize your images using a tool like PixResize. Images are the main thing that slows down websites, and you want yours to load seamlessly on every device.

Plan your content structure thoughtfully with Copyspark. It’s not hard to notice that planning the website content is the typical bottleneck of website builds. Creating a simple outline, more so a well-branded one that incorporates your tone of voice and business offerings, will save you hours of rearranging later.

Essential Shortcuts

Once you start building, these keyboard shortcuts will make you feel like a Squarespace wizard:

Press G to reveal or hide the invisible grid that helps you position elements precisely

Cmd+D to duplicate blocks

Cmd+A to select everything in a section for easy alignment

Forward slash (/) to search settings instantly

These might seem insignificant, but they'll save you countless clicks and make the whole experience feel more intuitive.

Design Secrets

The Scale Text Hack

This is one of my favorite discoveries: Squarespace has a "Scale Text" feature that automatically adjusts your text size to fit its container. Instead of manually tweaking font sizes, let Squarespace do the math. This allows your text to look perfectly proportioned on every screen size.

Hidden Font Category

There's an often-overlooked "Miscellaneous" font category that I find to be the easiest way to incorporate accent fonts to your website with zero lines of code. Assign it as the Monospace option, and suddenly you have beautiful accent fonts that make your site feel custom.

The Color Theme System

Set up your five main colors once, and Squarespace automatically creates color themes you can apply to any section. It's like having a professional design system built in—no more guessing if colors work together.

Mobile Mastery

In Squarespace, we may position and resize elements differently on mobile without affecting your desktop layout.

Squarespace makes responsive design approachable. You don't need to learn complex code. Just switch to mobile view and adjust as needed. Working on the desktop and mobile layouts simultaneously allows you to address design issues early on which saves you a lot of time and headache in the long run.

Advanced Techniques

Overflow Elements

Want your site to look custom-coded? Remove section padding and use shape blocks to create elements that appear to overlap between sections. It's a simple technique that adds visual sophistication.

Saved Sections Workflow

Once you've created a section you love, save it with the heart icon. You can reuse it across pages, creating consistency while saving hours of rebuilding. This is how Squarespace experts work efficiently.

Strategic Section Types

Squarespace offers different section types for different needs:

Fluid sections for complete creative freedom

Gallery sections for beautiful image showcases

List sections for testimonials and informative carousels

Classic editor when you need columned layouts

Learning when to use each type will bring ease to your build process.

SEO & Accessibility

Not so much a hack but a crucial pro tip: Assigning heading levels based on your page structure, not just how big you want the text to look. Think of it like a book outline: H1 is your title, H2s are chapters, H3s are sections.

This simple practice will help search engines understand your content and make your site accessible to everyone. Professional web design isn't just about looking good—it's about making sure it works well for all users.

Ready to Keep Learning?

These tips are just the beginning of what's possible when you understand Squarespace's true capabilities. If you're feeling inspired to dive deeper, I'd love to share more in my free workshop “Secrets to High-End Squarespace Projects.”

And when you're ready for complete mastery, Standout Squarespace teaches everything from these fundamentals to advanced techniques that create truly standout websites.

But for now, take these pro tips and start experimenting. Open Squarespace with fresh eyes, skip those templates, and start building something that feels uniquely yours. You've got this.

Want to see these tips in action? Watch my complete beginner tutorial where I walk through building a beautiful Squarespace website from scratch, using every technique mentioned in this guide.

Design Process: How to Design Unique Squarespace Websites

In this guide, I'll walk you through my design process for creating distinctive websites on Squarespace.

1. Watch Video

Design Process: How to design unique websites

a.
Design
b.
Video

I often hear from other designers that they can spot a Squarespace website from a mile away. So how do we design websites that don't look like Squarespace? Let me be clear, though—our goal is not to disguise the platform we're using. But in this day and age where it's so easy to publish websites and everything just starts to look and feel the same, how do we create websites that truly create lasting impact?

Because Squarespace is so easy to use, it comes with pre-built components and templates. I know that many users worry that their website will look just like everyone else's, but I'm a firm believer that Squarespace, like any website builder, is simply a tool. The results we achieve will ultimately depend on the creativity and expertise of the person using the tool.

I use other website platforms because Squarespace is not for all use cases, but I'd say that Squarespace is my most favorite platform because it's the easiest for my clients to use. And my goal as a designer is not to make websites difficult, but to delight my clients by working magic with the simplest of tools.

In this guide, I'll walk you through my design process for creating distinctive websites on Squarespace.

Step 1: Start with Purpose

Let me start with the first step, which is to start with purpose. This part is not necessarily the most fun part of the process, but I believe it informs the rest of the steps. I ask myself these questions in every project, whether it's a client project or a personal project:

1. What are the goals and how can we achieve them through design?

2. What are the problems that we're solving?

3. How should the website make visitors feel?

At the start of every website project, my very first milestone is to accomplish a website strategy document. I essentially summarize insights from the data and information that I've gathered from the client and their brand. Most of these insights come from:

• Customer testimonials and feedback

• Google Analytics data

• My own simulation while keeping in mind the target audience

The website strategy is all about coming up with website features, functionalities and flow that will meet these business and user goals. In the same strategy document, I highlight key features of the website and tie these features to the goals. The insights, goals and brand tone that we establish here will be the lens through which we identify which inspirations are relevant in the second step.

Step 2: Immerse Yourself in Diverse Sources of Inspiration (3:44)

The second step is all about immersing ourselves in diverse sources of inspirations for context. When I work with a client project, I require them to have at least the logo, typography and brand colors finalized before I start with the website design phase. However, these aren't enough for me to really establish the mood, vibe and the overall experience, so I still take time to go through inspirations.

When I was starting out, I would simply go through website directories like:

• Site Inspire

• Awwwards

• Standout Showcase (where I curate beautiful websites by our students)

These are beautiful references, but what really helped me come up with unique designs is when I look at inspirations beyond the website design space. I now look at inspirations such as:

• Packaging design

• Textures

• Interiors that align with the project I'm working on

For reference, here's how I establish different moods and vibes by curating inspirations for different projects:

Sophisticated editorial look - Clean lines, minimal color palette, strong typography

Nostalgic and eccentric - Vintage elements, playful layouts, unexpected combinations

These inspirations and the insights from our strategy document will all come together when we proceed to our next step.

Step 3: Craft Layouts with Character

To make this step more manageable, I broke it down into three sub-steps:

1. Defining the content

2. Visualizing the placement of elements through wireframes

3. Adding character

It would be overwhelming to go through the steps for the entire website at once, so my approach is always to work on one section at a time.

3.1 Understanding What Content to Present

In layout design, our goal is to present information in the most effective way possible. There's this age-old debate on whether we start with the design or the copy first. Personally, as a designer, I prefer having the copy to inform my design.

I really encourage clients to provide copy or to hire a copywriter. I guide them through the process by sharing a content guide where I give them examples of how to write hero statements. Some clients, even with this much guidance, still find it hard to provide copy.

When the client can't provide copy, I generate placeholder content using an AI tool I developed called Copy Spark. This tool is based on established copywriting frameworks, so it helps identify the sections that would go into every page. I find that some clients find it easier to edit the copy once they see it with the design.

3.2 Creating the Canvas

After defining the content, I proceed with a canvas where I assess how to effectively present the content visually. In this phase, I focus more on the placement of elements, without the typography, colors and imagery yet, so I can ensure that the right information is prioritized.

Here's my practical workflow:

1. Set up your design file - I use Figma, but you can use Canva or Adobe XD

2. Create two pages in your file:

   • Page 1: Insights and inspiration (from steps 1 and 2)

   • Page 2: Wireframes

3. Start with one focal section - For example, a brand manifesto

4. Create multiple layout options - Don't stop at just one; explore variations

When creating wireframes, I refer back to my inspirations to see if there are elements that can inspire the layout. It's totally fine to be inspired by website layouts—observe how other designers present content. But personally, I love looking at other design pieces and seeing how I can bring that to the web interface.

For example, if I'm drawn to overlapping elements and big typography in my inspiration collection, I'll explore how to incorporate these into my wireframes. I come up with several layout explorations because it's easy to move things around in visual builders.

3.3: Adding Character to the Layout

This is when I incorporate the visuals like typography, imagery and branding. The key question I ask myself is: What is the key defining feature that I can express throughout the website?

Examples of key defining features:

Geometric shapes - Used consistently across headers, buttons, and decorative elements

Bordered frames and outlines - Applied to testimonial blocks, images, and even the footer

Layered notes and memos aesthetic - Creating depth through overlapping elements

Table of contents style - Using archive list aesthetics throughout the site

Cards with overlapping elements - Combined with sideways text for visual interest

I visualize each wireframe into layouts with character by adding imagery, colors and the brand type system. Among these explorations, I pick the one that speaks most to me, then keep referring back to my inspirations page until I identify what will be the key defining feature of the website.

Step 4: Ground Yourself with Constraints

Before getting carried away designing the rest of the website with the key defining feature, I ground myself with constraints. Remember that these designs need to be translated to Squarespace.

Key questions to ask yourself:

What design solution is practical to build?

Can this design be easily updated?

Will it meet website quality standards in practice?

When designing the rest of the sections, you want the character to be carried throughout, but make sure you design with development in mind. Before proposing any design, ensure you can implement it on Squarespace and that it will be easy for the client to update.

Defining What's Practical

Knowing what's practical to design and how much time and effort it will require depends on your mastery of Squarespace. I highly recommend having a deep understanding of the native features of Squarespace so you know exactly what is easy to build.

I use a complexity factor when pricing projects:

Level One - No additional code aside from installing custom fonts

Level Two - Using existing techniques from my coded library

Level Three - Developing new custom features

The pages might look similar, but the amount of effort will be vastly different. I assess the level of complexity during the discovery call when the client shares their inspirations and references.

Step 5: Harness the True Power of Code

For level two projects, I reference a library of tried and tested features. This makes the design and development process much easier, especially when building the rest of the sections.

You might ask: If we keep referring back to the same library of tested features, won't our websites start to look the same? My answer is no—not if we learn the true power of code.

For me, code is another powerful design tool. Once we learn how to properly use it, so many possibilities open up. We can creatively combine or stack the current techniques we already know.

Real-world example: In my Standout Squarespace course, I share a code toolkit that includes a technique for horizontal fluid tabs. My students have taken this base technique and created completely reimagined layouts:

• One student used it to create an innovative portfolio section

• Another transformed it into a unique navigation system

• A third combined it with other techniques for a completely custom look

They're able to realize possibilities beyond the examples I've shown because they understand how code works, not just how to copy and paste it.

Final Thoughts

Creating unique Squarespace websites isn't about fighting against the platform—it's about understanding its capabilities deeply and then pushing beyond them strategically. By following this process:

1. Starting with clear purpose and strategy

2. Drawing inspiration from diverse sources beyond web design

3. Crafting layouts with distinctive character

4. Working within practical constraints

5. Leveraging code as a design tool

You can create websites that don't just avoid looking like typical Squarespace sites—they stand out as memorable, impactful digital experiences that serve both your clients and their audiences effectively.

If you wish to learn more about harnessing the power of code to create standout Squarespace websites, I invite you to my free workshop called "The Secrets to High-End Squarespace Projects."

Squarestylist’s Guide to Selecting the Right Squarespace Sections & Blocks

A Squarestylist guide to selecting the right Squarespace sections and blocks to achieve your dream layouts, functional needs and long-term management requirements.

1. List sections VS Gallery sections

2. List sections VS Summary blocks

3. List sections VS Fluid sections

4. Gallery blocks VS Gallery sections

5. Choosing the right building blocks

6. Download Sections & Blocks Comparison Guide

Selecting the Right Squarespace Sections & Blocks

a.
Squarespace
b.
Article

Squarespace website pages are built on the most clever engineering of sections and blocks—powerful and flexible components that we can tweak and customize to our liking, depending of course on each one's built-in functionalities and limitations.

Sections and blocks can have similar features, which is why those who are new to Squarespace, and sometimes even Squarespace experts, often find themselves asking: Which block or section should I use?

The truth is: There are many ways to approach builds.

Consider a team members page. You could:

① Add individual Images and Text blocks on a Fluid section to build your own layout

② Add a Gallery block (though this feature has spacing considerations and some aspects are limited to Squarespace Circle members) or

③ Use an Autolayout List section which lets you bulk upload images, add captions, and includes a Lightbox feature for enlarging images.

So which is the right choice for your project? It comes down to:

1. Functionality. What features do you need to prioritize for this layout?

2. Practicality. Is it simple to update and maintain?

In this post, we will explore the built-in features of Fluid sections, Autolayout List sections, Autolayout Gallery sections, Gallery blocks and Summary blocks, how they compare to each other, and my suggestions on which section or block to use depending on the layout and functionality you want to achieve.

List sections VS Gallery sections

Both the List section and Gallery section are types of Autolayout sections, just in different formats.

Autolayout sections are some of the most powerful tools in Squarespace, allowing us to quickly add content and switch layouts (between Carousels, Slideshows et al) without manually rearranging them. The content also reflows depending on the browser or device size, helping with long-term functionality and making updates much simpler.

List sections are ideal for making granular style tweaks to colors, sizing, spacing and alignments—all without using code.

Gallery sections are simple to edit and maintain for showcasing images, and can be further styled with code. If autoplay animations on certain imagery is a priority, I would use the Gallery section over the List section that has no animation nor Lightbox capabilities.

Autolayout sections are available in the Sections Catalogue with the Information ℹ️ icon.

Let’s first make a detailed comparison of the two different types of Autolayout Sections.

Autolayout List sections

• Supports formatted titles and descriptions

• Offers arrow navigation

• Lack Lightbox and animations

• Require code for clickable images

• Don't support masonry layouts

Autolayout Gallery sections

• Support simple captioning

• Provide bullet or arrow navigation

• Include built-in Lightbox and animations

• Feature clickable images

• Offer masonry layout options

Squarestylist’s recommendation: List sections are ideal for featuring branded content—from your services to testimonials—and similar informative content that requires images, titles, descriptions and buttons. Gallery sections are the better option for showcasing imagery with minimal captioning, with the option to activate Lightbox and animations. ✺

Autolayout List sections VS Summary blocks

Though they appear similar, List Sections and Summary Blocks have distinct features that make either one a much more ideal choice compared to the other, depending on your needs for functionality and practicality.

I recommend testing both on a sample website to better understand what makes each one unique and help you assess which one is best for your projects.

Autolayout List sections

• Intuitive to edit and update

• Easy to rearrange

• Independent from collections

• Cannot be added to product and blog items

• Functions as an independent section—doesn't support Fluid Editor blocks

Summary blocks

• Automatically pulls items from the blog, shop and events page

• To add content, new items must be published on either your blog, shop or events

• More challenging to rearrange—requires changing the publish dates of the blog posts or events

• Can be added to individual product pages or blog posts

• Can be placed anywhere within a Fluid section

Squarestylist’s recommendation: List sections are ideal for content that does not require syncing, such as your services list, team profiles or pricing options. For cases where we need to sync product items or blog posts on pages such as the homepage (as previews or related content), Summary blocks are the better option. ✺

Autolayout List sections VS Fluid sections

Fluid sections may seem like the more flexible option, especially for stylized layouts scattered around the page. For content that does not need to be updated regularly, like the team members in our example, working with a Fluid Section by adding individual image and text blocks could be a good approach. Style-wise, Fluid sections are easier to tweak without using code. However, Autolayout List sections are the better option for sections where content needs to be updated and perhaps even rearranged from time to time. Consider using List sections for showcasing your process, services or similar branded content.

Autolayout List sections

• Easy to add new entries

• Simple to rearrange

• Automatically reflows based on device size

• Can easily switch between layouts (Carousels, Slideshows, et al)

• Requires additional code for styling

Fluid sections

• Adding new entries is tedious

• Time-consuming to rearrange

• May appear too narrow on some devices

• Cannot switch between layouts

• Easier to layout and style

Squarestylist’s recommendation: Before building with a Fluid section, consider if a List section could work for your needs. While Fluid sections offer more styling flexibility without code, the ease of switching layouts and content that automatically reflows based on device size makes List sections the more sustainable option. ✺

Gallery blocks VS Gallery sections

These similarly named options can be confusing, but they serve different purposes. Gallery blocks offer the flexibility to incorporate videos with the option to add other blocks within Fluid sections. Autolayout Gallery sections function independently and are ideal for showcasing images, particularly with a masonry layouts.

Gallery blocks

• May have spacing issues when added to Fluid sections

• Can be styled alongside other Fluid blocks

• Offer arrow navigation

• Support videos

• No masonry layout option

Gallery sections

• Function as independent sections—not compatible with Fluid sections

• Cannot combine with other Fluid blocks

• Provide both arrow and bullet navigation

• Don't support videos

• Include masonry layout option

Squarestylist’s recommendation: Use Gallery blocks to showcase a combination of images and videos with the option to add other decorative elements using Fluid blocks. For classic gallery layouts with the option to activate Lightbox and animations, the Gallery section is a better option. ✺

Choosing the Right Building Blocks

When designing in Squarespace, the difference between a good website and a great one often comes down to selecting the right components for each job. Each section and block we've explored has distinct strengths:

List sections shine with highly-customizable, structured and adaptable content

Gallery sections create visual impact with clean image displays and interactive features

Summary blocks seamlessly connect your blog or shop content across your site

Fluid sections offer creative freedom for custom layouts that don’t require frequent updates

The key is understanding not just what each can do, but which will serve your specific needs for both functionality and long-term management. The best choice balances what looks good today with what will work smoothly tomorrow.

Armed with this knowledge of Squarespace's powerful building blocks, you're now better equipped to make intentional design decisions that enhance both aesthetics and functionality.

In our next post and video, we'll explore Collection pages—specifically Blog and Portfolio collections—comparing their features and identifying the best use cases for each.

10 Project Expectations I Set for My Own Clients

Communicate these 10 project requirements & limitations to your clients during the onboarding phase to manage their expectations.

1. Introduction

2. Project Requirements

3. Additional resources

10 project expectations I set for my own clients

The first consultation call with a prospect can feel like a whirlwind of ideas and possibilities. They talk about their business needs and goals; you can't wait to offer your creative vision. They tend to want a lot of things on their website, and that might rush you into saying yes to everything—to go above and beyond as a web designer.

Anything to get them to say yes to working with you, right? Unfortunately, being overly accommodating could lead to scope creep and milestone delays down the line.

This might seem counterintuitive, but in my many years of handling client work, I realized that the most successful projects do not rely on my unlimited availability or countless revisions. Instead, they're founded on mutual respect, clear communication, and well-defined boundaries. Being transparent with the level of service you can realistically provide will get you far in earning the trust of great clients.

As part of my regular practice, here are 10 project expectations I often discuss with web design clients before they sign a contract with me:

1. Defining project assets and file management

What will you be needing from your client? When do you expect to receive it? It's difficult to draw up a custom-fitted strategy for their website without its content, so ideally you'd want access to their brand elements, official photos, and website copy at least one week before kickoff.

Not every client has these assets ready, but at least you'd be able to assist them if they find this initial step overwhelming. For businesses without a strong brand identity, I typically offer my brand strategy and design services before building the website. But if it's writing their own website copy they're stumped on, I point them towards a brainstorming tool I built myself, Copyspark.

2. Establishing communication methods and channels

How will you be keeping in touch for the duration of the project? I personally don't like digging through my emails for comments or requests, so I set up a bespoke client portal that's easy to use and maintain on Notion. This way, we're always on the same page when it comes to tracking project updates, deliverables, and messages. Truly an understated way of providing a white-glove experience.

3. Setting web design studio hours and availability

When will you be working on the project and responding to inquiries? Let them know your timezone and work days while you're at it. This will help you pencil in milestone meetings without having to disrupt your sleep or postpone your weekend plans. Plus, it's reassuring for your client to know they can expect a reply from you, even when they don't get immediate answers.

4. Requiring timely client feedback

How much time does your client have to review what you've given them so far? Personally I'd like to give them a few days to go through the deliverables and provide their input. Clients can get too busy running their business, but their steady guidance remains necessary for the website project to proceed as planned.

It's essential to emphasize late fees and rescheduling fees, both of which apply to the final bill in case you don't hear from them within a certain period. You could, however, choose to make exceptions for emergencies on a case-by-case basis.

5. Limiting web design revision rounds

How many times can your client ask for a revision? A maximum of three rounds of refinement per phase is the sweet spot in my experience—allowing for adjustments based on client input without extending the timeline too much. This is all up to you, but do note that it's unreasonable to guarantee unlimited revisions for offers with much quicker turnarounds, like template reskins or design intensives.

6. Clarifying website performance standards

What factors do you consider in measuring performance? Which of these are within your control? A quick Google Lighthouse check illuminates insights on website strengths and areas for improvement. Use your own discernment to interpret these figures by benchmarking against the client's existing site, industry standards, or other relevant considerations.

It's possible to uncover opportunities to speed up page load before the launch. But if your client is unwilling to make concessions in the final build, feel free to explore alternatives to improve user experience such as crafting a custom loading GIF.

7. Specifying website responsiveness for devices and screens

How much can the website for accommodate for a variety of screen sizes? Unlike print and packaging design, web design is meant to be more fluid. In theory, it takes the shape of whatever screen size or orientation is available to it. Yet in practice, you can only ever check the build for specific resolutions and widths called breakpoints.

Not all clients are aware that the final design can deviate from your prototype for this very reason. I find that the best way to address their apprehension is by involving them in the testing process. A quick call or video walkthrough can do the trick.

8. Outlining browser compatibility testing and support

Which browsers did you use to test the website for potential glitches? Browser options abound, but as a good rule of thumb it's enough to optimize your design elements and custom code for the top three: Google Chrome, Mozilla Firefox, and Apple's Safari. After all, most niche browsers are built on the open-source, Google-maintained Chromium code (e.g. Brave, Opera, Arc).

If the business owner insists on testing cross-browser compatibility on major alternatives such as Internet Explorer or Microsoft Edge, you can consider this as a service add-on to be discussed and priced accordingly.

9. Addressing web accessibility standards and compliance

How do you ensure that their site is accessible to users of all abilities? At the very least, I'm sure we all want every visitor to have a pleasant experience scrolling through your client's website. But intention may not always lend itself to implementation. I do believe this aspect requires your careful consideration—so much that I examined how a select few website platforms perform in this regard.

We can do our best to educate ourselves as web designers and developers. Still, there is no better substitute to the cooperation of accessibility specialists for industries that require stricter compliance (e.g. e-commerce, healthcare, education, automobile, finance).

10. Integrating artificial intelligence tools in the design process

How much involvement does generative AI have in your design process? It's important to disclose whether you've intentionally employed machine learning tools (e.g. ChatGPT, Midjourney, Copilot) at any stage of the project. I'm certain your client will appreciate you taking great lengths to consider intellectual property (IP), data privacy, and other ethical matters that could directly impact their business.

If this is something you'd like to look into, you can read more about my collaboration with IP lawyer Ivy of Canary and Hedge as we discuss relevant contract language and use cases.

And there you have it—the many administrative and technical ways to manage client expectations before they even sign the dotted line. Trust me, it's best to bring these up within your consultation call and project proposal, rather than reserving them for your web design service agreement where they can be overlooked.

Broaching these key topics will not come across as unreasonable to the right clients. In fact, your honesty will demonstrate a deep familiarity with the design process—and by extension, a vote of confidence that their dream website is in the right hands.

You might also like:

• Meet CopySpark: Our AI-powered web content assistant

• Notion for designers: Project tracker and client portal

• Your easy, effortless intro to design intensives

• Which website builder ranks best in accessibility?

• Using AI tools ethically in my web design business

The Magic of Shopify AI Blocks

In this tutorial, I’ll walk you through how theme blocks work, the current limitations, and a clever workaround to use them with any Online Store 2.0 theme, not just the new Horizon them

1. Introduction

2. Better Prompts

3. Enable on any theme

4. Master Shopify AI

The magic of shopify AI Blocks

a.
Shopify
b.
Tutorial

Building websites on Shopify just got a whole lot easier. If you’ve ever felt overwhelmed by Shopify or struggled with theme limitations, now might be the perfect time to take another look. With the introduction of AI-powered theme blocks, Shopify has made store customization not only more flexible—but also incredibly intuitive.

In this tutorial, I’ll walk you through how theme blocks work, the current limitations, and a clever workaround to use them with any Online Store 2.0 theme, not just the new Horizon theme. We'll also dive into how AI-generated blocks work and how you can get even more accurate results with a simple tool I built.

What Are Theme Blocks?

Before theme blocks, customizing layouts on Shopify meant relying heavily on pre-built sections that came with your theme. You were boxed in by whatever layout templates were available.

With theme blocks, that changes.

You now have the freedom to start with a blank custom section and add site-wide modular blocks (text, images, product cards, etc.)

The Power of AI Block Generation

Here’s where things get really exciting.

Shopify now lets you generate custom blocks using AI. You simply describe what you want in plain English, and Shopify’s AI builds it for you.

For example, if you want a product carousel slider with arrows and pagination dots, just type that in. Shopify will do the heavy lifting—generating the layout, code, and even customization settings like autoplay, spacing, and background.

You can further tweak the output with follow-up prompts or even edit the code directly if you’re comfortable with Liquid or CSS.

A Real-World Use Case

Let’s say we want to build a layout with a headline and two images side-by-side.

Here’s how it works:

1. Start a custom section using the Horizon theme.

2. Add a text block (set it as a heading).

3. Add two image blocks from your media library.

4. Switch to horizontal layout and align blocks to the top.

Want to spice it up with a product carousel in the third column? Just type in your prompt, like:

“A product carousel slider with arrows and pagination dots.”

The AI will generate a functional block — sometimes even smarter than expected. You can refine it with instructions like:

“Show one slide at a time.”

And instantly—you’ve got a responsive product slider, complete with product descriptions and buy buttons.

Better Results with Better Prompts

I found that the AI feature best works if we describe the layout that we envision in detail. Hence I built a simple tool to make your prompts more specific and effective.

Here’s how it works:

1. Upload a screenshot of your design.

2. The tool analyzes the layout and asks questions about functionality.

3. It then generates a tailored prompt you can paste directly into Shopify’s AI block generator.

The results? Much closer to your design vision, often with no need for follow-up tweaks.

How to Add AI Blocks to Any Theme (Yes, Even Dawn)

Right now, AI blocks are only available with the Horizon theme. But what if you want to use your favorite theme like Dawn?

Here’s a quick workaround:

1. Go to your theme, click the ellipsis icon, and choose Edit Code.

2. Open the sections folder, click Add new section, and name it theme-blocks.

3. Delete placeholder code and paste in the snippet. Get the snippet here ->

4. Save and refresh.

Now, when you add a section, you can search for “theme blocks” and use the AI generator exactly like you would in Horizon—across any page or template.

Advanced Resources

This just scratches the surface of what’s possible with Shopify’s new AI-powered theme blocks. From dynamic layouts to AI-generated carousels, the potential for custom design is huge.

If you're serious about mastering this, I invite you to join my Master Shopify AI Workshop. You’ll get access to:

1. My theme prompt builder

2. Guidance on polishing AI-generated blocks

3. Making the most of other Shopify AI features

For those wanting a more comprehensive program, from Shopify basics to building a service-based offering—check out the Standout Shopify Program. The AI workshop is included in the pro version.

Transitioning to Independent Work: Is Standout Squarespace Foundations Right for You?

What does it take to transition from an in-house role to independent work?

We give you a glimpse into Standout Squarespace Foundations curriculum and course inclusions–along with a video tour of our classroom and Knowledge base–and how this could be the perfect course to support your transition.

1. Business resources

2. How Foundations supports

3. Your next step?

WALKTHROUGH OF STANDOUT SQUARESPACE FOUNDATIONS CURRICULUM & COURSE INCLUSIONS

a.
Squarespace
b.
Video

What does it take to transition from an in-house role to independent work? This question came into sharp focus some months ago when Shannon, a seasoned marketing specialist with over 20 years of experience, reached out to me. After decades of working in different companies, she was yearning for a change—specifically, a 15-hour work week that would allow her to truly enjoy her work while carving out more time for real life.

She then wanted to know if our Standout Squarespace Foundations program could help her make this transition.

Like many experienced professionals considering this shift, Shannon's main concerns centered around sustainability.

How do you create a practice that doesn't require constant hustle?

How do you package your expertise into valuable services?

What systems and processes do you need to work efficiently with clients?

What She Was Looking For

As Shannon evaluated different Squarespace design courses, her requirements were clear. She wanted access to:

1. Complete business templates and processes—from welcome packets to handoff documents

2. Sustainable approaches to client work that wouldn't require constant hustle

3. Examples of different business models so she could create a business that suits her individual strengths and lifestyle goals

4. Community support and guidance

5. Professional design skills to create distinctive websites

How Foundations Supports Your Transition

Build Your Sustainable Practice

Perhaps most importantly, Foundations helps you create a business that fits your life. Whether you're aiming for part-time work like Shannon or building a full-service studio, we show you how to:

• Structure services that support your ideal schedule

• Price your work to reflect its true value

• Set boundaries that protect your time and energy

• Create systems that scale with your growth

Our comprehensive toolkit eliminates the overwhelm of starting from scratch:

• Discovery questionnaires that effectively uncover client needs

• Project proposal templates that set clear expectations

• Carefully crafted email scripts for smooth client communication

• Website strategy frameworks that streamline your process

• The Standout Checklist—your reliable guide for every website project from asset preparation to launch

Master Distinctive Design

"I don't want my sites to look Squarespace-y" is something we hear often. That's why our approach focuses on helping you:

• Master Squarespace’s Fluid Editor

• Transform built-in features into unique design elements

• Create sophisticated, professional designs beyond templates and trends

• Build responsive, accessible websites

• Develop your signature style

• Understand technical foundations for future growth

Thrive in Community

Learning new skills in this digital age can feel isolating, but it truly doesn't have to be. In our private Circle community, you’ll have:

• Direct access to mentorship and feedback

• Connections with creatives on similar journeys

• A space for inspiration and collaboration

See Inside Foundations

Watch the 12-minute Standout Squarespace Foundation walkthrough video above, a video I originally recorded for Shannon, for a private tour of our classroom and course inclusions for the Foundation tier of our signature Standout Squarespace program. You’ll get a peek into:

• Our comprehensive curriculum

• The active community space

• The well-loved Knowledge base

• And previews of our business templates

Is Foundations Your Next Step?

Foundations is designed for you if:

• You're ready to transform your organizational experience into independent work

• You want to build a sustainable design practice without the hustle

• You're seeking proven processes rather than creating everything from scratch

• You want to create distinctive websites while growing at your own pace

When you're ready to explore more advanced coding customizations, you can seamlessly upgrade to our full program, building on the foundation you've established. To compare the Foundations and Full tiers of Standout Squarespace, visit this link.

Remember, every Standout designer started exactly where you are. The difference between staying stuck and moving forward often comes down to having the right support and systems in place—our team would love to hold your hand through this milestone.

Ready to create the design practice of your dreams? Visit Standoutsquare.space/Foundations to enroll.