How to Add Shopify Buy Button to Squarespace

What Is the Shopify Buy Button?

The Shopify Buy Button is a sales channel within Shopify that lets you sell products on any website - not just a Shopify-hosted store. It generates a small JavaScript embed code that renders a product card, an Add to Cart button, and a checkout flow directly on the page where you embed it. The checkout is handled entirely by Shopify, including payment processing, shipping calculations, and order management.

The Buy Button is available on all Shopify plans, including the Starter plan (the lowest-cost option designed specifically for selling on external websites and social media). This means you can maintain your Squarespace website for content and branding while using Shopify exclusively for product sales and checkout.

How to Add a Shopify Buy Button to Squarespace Step by Step

Step 1: Create a Shopify Account and Add Products

If you do not already have a Shopify account, create one at shopify.com. Add the products you want to sell - include titles, descriptions, images, pricing, and variants (sizes, colors, etc.). You need at least one product published before you can create a Buy Button.

Step 2: Add the Buy Button Sales Channel

In your Shopify admin, go to Settings > Apps and Sales Channels (or click the plus icon next to Sales Channels in the left navigation). Search for "Buy Button" and add it. Once installed, the Buy Button channel appears in your Shopify admin sidebar.

Step 3: Create a Buy Button

Click on Buy Button in your Shopify admin, then click Create a Buy Button. Choose whether to embed a single product or a collection. Select the product or collection you want to feature. Shopify will show you a preview of the button with customization options.

Step 4: Customize the Button Appearance

The Buy Button editor lets you customize the layout (product card with image, standalone button, or full product detail), colors (button background, text, accent), fonts, and what information to display (price, description, variants). Adjust these settings to match your Squarespace site's design. The goal is to make the Buy Button look like a natural part of your page, not an obvious third-party embed.

Step 5: Copy the Embed Code

Once you are happy with the design, click Generate Code. Shopify produces a JavaScript snippet. Click Copy Code to copy it to your clipboard.

Step 6: Embed the Code in Squarespace

Open your Squarespace editor and navigate to the page where you want the Buy Button to appear. Add a Code Block (found under the More section in the block menu). Paste the Shopify embed code into the Code Block. Make sure the block is set to HTML mode, not Markdown. Save the block and preview the page - your Shopify product should appear with an Add to Cart button.

Step 7: Test the Checkout

Click the Add to Cart button and follow the checkout flow to verify everything works. The cart and checkout are powered by Shopify, so they will open in a Shopify-styled overlay or redirect depending on your Buy Button settings. Confirm that the product image, price, and variants display correctly, and that the checkout accepts payment. For help with the code embedding process, our guide to adding custom code to Squarespace covers Code Block configuration in detail.

Customizing the Shopify Buy Button for Squarespace

Matching Colors and Fonts

In the Buy Button editor, set the button color to match your Squarespace site's primary CTA color. Set the text color for readability against the button background. Use the font settings to approximate your Squarespace template's typography - the Buy Button supports a limited set of web-safe fonts, but you can get close to most template styles.

Controlling Layout and Width

The Buy Button's width is determined by the Code Block container in Squarespace. To control how wide the product card appears, place the Code Block inside a specific column width in your Squarespace layout, or wrap the embed code in a div with a max-width style. For advanced styling, use Custom CSS to target the Shopify iframe or button elements. Our guide to adding custom CSS to Squarespace covers how to style embedded elements.

Embedding Multiple Products

You can create separate Buy Buttons for multiple products and place each one on the same page or across different pages. For a collection of products on one page, use Shopify's collection embed instead of individual product buttons - this generates a grid of products with individual Add to Cart buttons, all from a single embed code.

Shopify Buy Button vs. Squarespace Commerce

The Buy Button approach is ideal if you want to sell a small number of products without paying for a Squarespace Commerce plan, or if you need Shopify-specific features like advanced shipping rules, multi-currency support, or third-party fulfillment integrations that Squarespace Commerce does not offer.

Squarespace Commerce is the better choice if you want a fully integrated store with native product pages, built-in inventory management, and no reliance on a second platform. It is also simpler - everything lives in one dashboard. For design strategies that work with Squarespace's native commerce features, our Squarespace design tips guide covers product page layout and conversion optimization.

Troubleshooting Shopify Buy Button on Squarespace

Buy Button Not Showing on the Page

Confirm the Code Block is set to HTML mode, not Markdown. Check that you pasted the complete embed code including the script tag at the bottom. Try previewing the published page in an incognito window - some browser extensions block third-party JavaScript.

Cart or Checkout Not Opening

If clicking the button does nothing, check for JavaScript conflicts with other code on the page. Temporarily remove any custom scripts from Code Injection and test again. The Buy Button requires JavaScript to function - if your site has a Content Security Policy that blocks external scripts, the button will not work.

Styling Looks Off on Mobile

The Shopify Buy Button is responsive by default, but it may not match your Squarespace template's mobile breakpoints exactly. Test on actual mobile devices and adjust the Code Block's column width or add a max-width wrapper if the product card appears too wide or too narrow on small screens. For mobile layout optimization, our guide to customizing your Squarespace website covers responsive design techniques.

Start Selling Shopify Products on Your Squarespace Site

The Shopify Buy Button is the simplest way to add e-commerce to your Squarespace site without switching platforms or paying for a Squarespace Commerce plan. You get Shopify's checkout and order management combined with Squarespace's design tools - and the setup takes less than thirty minutes.

Create your Buy Button, match its style to your site, embed it in a Code Block, and test the checkout. Once it is live, you can sell products from any page on your Squarespace site while managing all your orders from one Shopify dashboard.