How to Add and Sell Banner Ads on Squarespace

To add a banner ad to a Squarespace site, add a Code Block where the ad should appear, such as inside a blog post or in the site footer, set it to HTML, and paste a linked-image snippet. Code Blocks render plain HTML on every Squarespace plan, including Basic. JavaScript, iframes and Code Injection require Core, Plus, Advanced or certain legacy plans, as of October 2026. To sell the slot rather than hand-code one sponsor, use a hosted embed that takes bookings and swaps the banner on schedule.

Key takeaways

• Squarespace has no built-in ad tools, but a linked image in a Code Block works on every plan.
• JavaScript, iframes and Code Injection need Core or higher. That matters for ad network tags, not for an image banner.
• In version 7.1, the footer is the easiest site-wide spot. Content sidebars exist only in some 7.0 templates.
• Blog posts use the classic editor, where blocks stack on phones. Post Blog Item Code Injection adds one banner below every post.
• Use a fixed-size creative made at twice the slot size, and show it through a Code Block so Squarespace doesn't crop it.

Code Block vs. Code Injection

Squarespace's code block guide confirms that code blocks support HTML, Markdown, plain text and CSS inside <style> tags on all plans. If you're on an older Personal plan, Squarespace notes that some premium features may be available depending on when you signed up, so check before relying on scripts.

A banner needs no scripts. Here's a labeled 300×250 example with placeholder URLs:

<div style="max-width:300px;margin:24px auto">
  <p style="margin:0 0 4px;font-size:12px">Advertisement</p>
  <a href="https://advertiser.example.com/?utm_source=yoursite&utm_medium=banner"
     target="_blank" rel="sponsored noopener">
    <img src="https://example.com/acme-300x250.webp" width="300" height="250"
         alt="Acme Analytics: see every campaign in one dashboard"
         style="display:block;width:100%;height:auto" loading="lazy">
  </a>
</div>

To host the image on Squarespace, upload it under Custom Files in the Custom CSS panel, which is available on all plans; clicking an uploaded file there inserts its direct URL. Our guide to adding a banner ad with plain HTML explains each attribute, including why paid links need rel="sponsored".

How to add a Code Block

1. Edit the page or post where the ad belongs.
2. Hover where you want the ad, click Add block or +, and choose Code.
3. Click the pencil icon on the block to open the editor.
4. Set the Type menu to HTML, and leave Display Source off so the code renders instead of showing as text.
5. Paste the snippet and save.

If the block looks empty while you're logged in, check the live page in a private browser window. Squarespace says code sometimes doesn't appear for logged-in editors as a security measure, and the editor offers Preview in Safe Mode for this.

Where to put ads on Squarespace

Inside a blog post

Blog posts use the classic editor, even on version 7.1; Fluid Engine isn't available in posts. Add a Code Block between paragraphs using the steps above. A full-width block keeps its place on phones, but a block dragged to the right of text creates a second column, and on phones that column moves below the first, so a "sidebar" ad ends up after the text.

Below every blog post

On Core or higher, use Post Blog Item Code Injection. In the Pages panel, hover over your blog page, click the gear icon, open Advanced, and paste the snippet into Post Blog Item Code Injection. According to Squarespace's code injection guide, in 7.1 the code appears below the content of every post. In 7.0 it appears above or below the post depending on the template, and in templates with a grid or list blog page it shows on the blog landing page instead of individual posts.

On the Basic plan, keep a draft post that contains the ad's Code Block and duplicate it for each new post. Existing posts won't change, but an embed whose code never changes, like a hosted embed, won't go stale in the copies.

Site-wide in the footer (7.1)

Click Edit on any page, hover over the footer, and click Edit footer. Add a Code Block, paste the snippet, and save. The footer shows the same content on every page. On the blog landing page itself, you can't add blocks inside the blog section, but you can add a block section above or below it.

Sidebars (7.0 only)

Content sidebars exist only in some 7.0 templates, such as Avenue, Bedford, Five, Forte and Wexley. Open a page that shows the sidebar, hover over it, click Edit, and add a Code Block. On phones, most templates move the sidebar to the bottom of the page, and Ishimoto hides it. On 7.1, the closest equivalent is a narrow column beside your content in a Fluid Engine page section.

How the ads behave on mobile

Squarespace's two editors treat ads differently on phones:

• Fluid Engine (page sections and the 7.1 footer) lets you arrange the mobile layout separately. To hide a block on phones, switch to the mobile view, open the section's Layers list, and click the eye icon next to the block, as described in Squarespace's guide to mobile layouts in Fluid Engine.
• The classic editor (blog posts and all of 7.0) stacks blocks automatically. Hiding blocks per layout is a Fluid Engine feature.

A 300×250 fits every screen, so it's the safest size inside posts. A 728×90 leaderboard shrinks on a phone until its text is hard to read. If you want a leaderboard on desktop and a 320×100 on phones, put both embeds in one Code Block with a media query. It works on every plan and in either editor:

<style>
  .ad-mobile { display: none; }
  @media (max-width: 767px) {
    .ad-desktop { display: none; }
    .ad-mobile { display: block; }
  }
</style>
<div class="ad-desktop"><!-- 728x90 embed here --></div>
<div class="ad-mobile"><!-- 320x100 embed here --></div>

Keep loading="lazy" on both images. As our guide to ads and Core Web Vitals explains, Chrome, Safari and Firefox don't download lazy images hidden with display: none, so phones skip the desktop banner. Squarespace doesn't document how blocks hidden through Layers are handled, so the media query is the predictable choice when impression counts matter. Either way, each size is its own slot that advertisers book separately.

Image sizing for Squarespace ads

• Use standard sizes. 300×250, 728×90, 320×50 and 320×100 are sizes advertisers already have. Our banner ad sizes guide covers file-weight limits and pairings.
• Request images at twice the slot size, such as 600×500 for a 300×250, and keep width and height at the slot size so they stay sharp on high-density screens.
• Don't follow photo advice for banners. Squarespace recommends uploading most images about 2,500 pixels wide, then resizes them into several widths and places them in containers that crop images whose shape doesn't match. A banner's text shouldn't be cropped, so a Code Block that shows the image at its exact shape is the better fit.
• Keep files light. Compressed WebP, JPG or PNG files load faster, and animated banners get heavy quickly.

Sell the slot with Spreadiom

Spreadiom's embed is one line of plain HTML with no JavaScript, no iframe and no cookies, so it works in a Code Block on every Squarespace plan, including Basic:

<a href="https://www.spreadiom.com/ABC-12/link" target="_blank" rel="sponsored noopener"><img src="https://www.spreadiom.com/ABC-12/img" width="300" height="250" alt="Advertisement" style="max-width:100%;height:auto" loading="lazy"></a>

1. Create a slot in the size you want and copy its embed code.
2. Paste it into a Code Block in a post, page section or footer, or into Post Blog Item Code Injection on Core or higher.
3. Until someone books, the slot shows an "Advertise here" image that links to its public booking page with an availability calendar.
4. Advertisers book as guests: they pick dates, upload a banner that's automatically cropped to the slot size and screened for prohibited content, and pay by card through your own Stripe account or with PayPal straight into your own PayPal account. Spreadiom never holds the money.
5. The booked ad goes live on its start date automatically, so you don't edit Squarespace for each campaign.

With approval turned on, cards are only authorized at booking and charged when you approve, PayPal advertisers pay after approval (within 48 hours), and requests you don't review are canceled automatically. You see impressions, clicks and CTR per slot, and each advertiser sees them on a private booking page; only people are counted, with crawlers and other bots filtered out. Test mode works with Stripe test keys before you take real money.

Spreadiom is free to start. A 5% platform fee applies to completed bookings, invoiced monthly and paid by PayPal, and it's never deducted from the advertiser's payment; Stripe or PayPal processing fees are separate. See pricing for details.

FAQ

Can I put ads on my Squarespace website?

Yes. Squarespace has no built-in ad integrations, but you can paste ad code into code blocks as long as the ads follow its Terms of Service and Acceptable Use Policy. A plain linked-image banner works on every plan, while ad networks that rely on JavaScript need Core or higher.

Which Squarespace plan do I need for a code block?

Every plan, including Basic, can use code blocks for HTML, Markdown, plain text and CSS inside <style> tags. As of October 2026, adding JavaScript or iframes requires Core, Plus, Advanced or a legacy Business or Commerce plan, and Code Injection requires Core, Plus, Advanced or some legacy plans.

Does Squarespace 7.1 have sidebars?

No. Content sidebars are only available in some version 7.0 templates. On 7.1, place ads in the footer, inside blog posts, below every post with Post Blog Item Code Injection, or in a narrow column of a Fluid Engine page section.

How do I add the same ad to every Squarespace blog post?

On Core or higher, paste the ad code into Post Blog Item Code Injection, found in the blog page's settings under Advanced. In 7.1 it appears below the content of every post. On Basic, add a Code Block to a draft post and duplicate that draft for each new post.

Why doesn't my code block show up when I'm logged in?

As a security measure, Squarespace sometimes hides embedded code from logged-in editors even though visitors can see it, mainly with embedded JavaScript. Open the page in a private browser window, or use Preview in Safe Mode, to see what visitors see.