How to Embed Your Etsy Store on Squarespace: A Step-by-Step Guide

Published On - December 3, 2024

ivan Blogging
What Are Global Variables in JavaScript   

Are you an Etsy seller looking to enhance your online presence by integrating your Etsy store into your Squarespace website? Whether you want to showcase your products directly or add a seamless shopping experience for your visitors, embedding your Etsy store on Squarespace can help streamline your business operations and attract more customers. In this step-by-step guide, we’ll walk you through the process of embedding your Etsy store on your Squarespace site.

Why Embed Your Etsy Store on Squarespace?

Before diving into the how-to, it’s essential to understand why embedding your Etsy store on Squarespace is beneficial:

  • Increased Visibility: If you already have an Etsy store, embedding it on your Squarespace site can attract more traffic, as it consolidates your online presence.
  • Ease of Shopping: By adding your Etsy store to your Squarespace site, visitors can easily view your products without navigating away from your website, creating a more streamlined shopping experience.
  • Brand Cohesion: Embedding your Etsy store allows you to maintain consistency between your Squarespace website’s design and your Etsy shop, ensuring a smooth user experience for your customers.
  • SEO Benefits: Integrating Etsy with Squarespace can help with search engine optimization (SEO) by providing more links and content related to your business.

Step 1: Get Your Etsy Shop URL

To start embedding your Etsy store, you need to have your Etsy shop URL ready. Follow these steps:

  1. Log into your Etsy account and go to your shop’s homepage.
  2. Copy your shop’s URL from the address bar. It will look something like this: 
    https://www.etsy.com/shop/YourShopName

Make sure the URL is correct because this will be the link that directs your visitors to your Etsy shop.

Step 2: Log Into Your Squarespace Account

Common Scenarios for Accessing Global Variables   Next, you need to access your Squarespace website where you want to embed your Etsy store.

  1. Log into your Squarespace account and navigate to the page where you want the Etsy store to appear. This could be your homepage, shop page, or a dedicated page for your Etsy collection.
  2. Ensure that you have edit access to the page where the store will be embedded.

Step 3: Add a Code Block to Your Squarespace Page

Squarespace allows you to embed third-party content, such as your Etsy shop, using the Code Block feature. Here’s how to add one:

  1. In the page editor, click on the “+” icon where you want to add the Etsy store. This will open the block menu.
  2. Choose Code from the available options. This will open a text box where you can insert custom code.

Step 4: Embed Your Etsy Store Using an iframe

Once you’ve added the Code Block to your page, you’ll use an iframe code to embed your Etsy store. An iframe is a container that allows you to embed content from one website into another. To do this:

  1. In the Code Block editor, paste the following HTML code:
<iframe src="https://www.etsy.com/shop/YourShopName" width="100%" height="800px" frameborder="0"></iframe>
  1. Replace "YourShopName" with your actual Etsy shop name.
  2. Adjust the height and width values to fit the layout of your page. For instance, you can set the width to 100% to make it responsive to different screen sizes, while you can change the height to ensure the iframe fits well on the page (e.g., 800px, 1000px, etc.).

Step 5: Save and Preview

After embedding the code, click Apply or Save to save the changes. Now, preview the page to ensure the embedded Etsy store displays correctly. You should see a fully functional Etsy shop within your Squarespace page, allowing visitors to browse your products without leaving your site.

Step 6: Customize the Look (Optional)

While the iframe is a quick and easy way to embed your Etsy store, you can also adjust the aesthetics to better match your Squarespace design. Here are a few ways to customize the look:

  • Border and Padding: You can add custom CSS to style the iframe container, such as removing borders or adjusting padding around the embedded store.
  • Styling the iframe: To make the iframe match your website’s design, you can use CSS. For example:
iframe {
   border: none;
   padding: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Add this CSS in the Custom CSS section under Design → Custom CSS in your Squarespace admin panel.

Step 7: Test the User Experience

Once everything is set up, test the functionality:

  • Make sure the iframe is fully responsive and adjusts according to the screen size.
  • Ensure the page loads without issues and that customers can click through to your Etsy store to purchase products.
  • Check for broken links or misaligned elements.

Alternative: Link to Your Etsy Store

If embedding your Etsy store via an iframe isn’t your preferred option or you face any limitations with the iframe size, you can also provide a direct link to your Etsy shop. To do this:

  1. Add a Button Block to your page.
  2. Set the button’s link to your Etsy shop URL.
  3. Label the button something like “Shop Our Etsy Store” or “Visit Our Etsy Shop.”

This method gives visitors a clear call to action and allows them to open your Etsy store in a new tab, offering a seamless transition from your Squarespace site.

Conclusion

Embedding your Etsy store on your Squarespace site is an excellent way to streamline the shopping experience for your customers and improve the visibility of your products. By following this simple step-by-step guide, you can integrate your Etsy shop smoothly into your Squarespace website, creating a unified and professional online presence. Whether you choose to use an iframe or a direct link, your customers will appreciate the easy access to your Etsy products while enjoying the custom design of your Squarespace site.

Now that you know how to embed your Etsy store on Squarespace, you can start attracting more visitors and boosting your sales today!