Showcase Amazon Products Seamlessly on Your Squarespace Website

Have you ever wanted to feature Amazon products directly on your website? Whether you’re promoting items, writing reviews, or selling your own products on Amazon, Squarespace’s Amazon Block makes it easy to display those items in a professional and engaging way—without needing associate links or custom code.

In this tutorial, I’ll show you step-by-step how to add Amazon products to your Squarespace site, style the display, and even include your Amazon Associates ID to earn commissions on sales.

Watch the video

Check out the YouTube video below. 👇🏼

Why Use the Amazon Block?

The Amazon Block is a powerful tool for:

  • Promoting Your Products: Showcase items you’re selling on Amazon directly on your website.

  • Affiliate Marketing: Earn commissions by linking products with your Amazon Associates ID.

  • Engaging Displays: Pull product images, titles, and links directly from Amazon with clean, stylish formatting.

Step-by-Step Guide to Adding Amazon Products

Step 1: Add an Amazon Block

  1. Open your Squarespace editor and go to the page where you’d like to feature Amazon products.

  2. Click Edit and add a new section or select an existing section.

  3. Add a Blank Section, then click Add Block.

  4. Search for “Amazon” and select the Amazon Block from the options.

screenshot of where the Amazon block is located in the blocks menu
 

Step 2: Add a Product to the Block

  1. Click the Pencil Icon on the Amazon Block to open the settings.

  2. Enter the product information. You can search by:

    • Product Name

    • Barcode

    • ASIN (Amazon Standard Identification Number): This is the most reliable method.

  3. To find the ASIN:

    • Go to the product page on Amazon.

    • Scroll down to the Product Details section.

    • Copy the ASIN and paste it into the search field in Squarespace.

  4. Select the product, and it will appear in the Amazon Block with its image, title, author (if applicable), and a “Buy on Amazon” button.

Step 3: Style the Amazon Block

  1. Adjust the block size by dragging the edges to fit your layout.

  2. Use the Settings Panel to customize:

    • Color Palette: Matches your site’s theme.

    • Aspect Ratio: Automatically adjusts to the product image’s dimensions on Amazon.

  3. Add multiple Amazon Blocks by duplicating the first block, then replacing the product.

Step 4: Add Your Amazon Associates ID (Optional)

If you’re part of the Amazon Associates Program, you can earn commissions for sales made through your links:

  1. Go to Settings > Developer Tools > External API Keys in your Squarespace dashboard.

  2. Enter your Amazon Associates ID in the designated field.

  3. Save your changes, and your Associates ID will apply to all Amazon products displayed on your site.

screenshot of where in the settings you will find the place to enter external API Keys
 

Pro Tips for Amazon Blocks

  1. Use ASINs for Accuracy: Searching by ASIN ensures the exact product is displayed, avoiding incorrect results.

  2. Optimize Placement: Use Amazon Blocks on relevant pages like blogs, product reviews, or dedicated shop sections.

  3. Maintain Consistency: Keep the styling of your Amazon Blocks consistent with the rest of your site’s design.

Wrapping Up

Adding Amazon products to your Squarespace site is a fantastic way to promote items, earn affiliate income, and enhance user experience. Whether you’re showcasing your own creations or curating items for your audience, the Amazon Block makes it easy to do so with style.

 

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

 
Squarespace Web Designer - Bryan Jernigan

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Bryan Jernigan

Freelance web designer for Abound Web Design LLC

https://www.aboundwebdesign.com
Previous
Previous

How to Duplicate a Page in Squarespace to Save Time

Next
Next

How to Use Section Dividers in Squarespace for Stylish Page Breaks