For Business

Collections for Buy with Prime

Display customized collections of your Buy with Prime product range anywhere on your site or blog

Collections for Buy with Prime are embeddable web components that centralize and display customized collections of your Buy with Prime product range anywhere on your site or blog. Collections are dynamically managed as your products change Prime status, but you can select products to create curated collections applicable to a theme or event like a gift guide or holiday collection.

Prerequisites

To use Collections for Buy with Prime you must be signed up for Buy with Prime and have active listings in your Buy with Prime catalog.

Prepare your products

Before you create Collections for Buy with Prime, make sure you have eligible products in your catalog. Eligible products need:

  • Offer Prime turned on in your product catalog
  • Product detail page URL
  • Product title, image, and price

Create Collections

You can create up to 10 Collections for Buy with Prime. It’s recommended that you create a new page in your ecommerce site so your Collection is discoverable in your navigation or sub-navigation. This makes your collection discoverable for your shoppers and displays your Prime-eligible products in one place. Use the following steps to create a Collection:

  1. Sign in to the merchant console.
  2. On the side menu, choose Products, and then Collections.
  3. Choose Create a collection.
  4. In the Collections editor, under the Product selection tab, choose the products to appear in your Collection. Your Collection supports up to 50 products.
  5. Once you’re done selecting your products, make any additional customization. Choose Get code to copy and paste your Collection embed code at any time.
  6. Paste the code within <body> tags on your site where you want the Collection to display.
  7. Choose Save.

Customize Collections

Your Collections for Buy with Prime can be customized to match your sites brand and style. You can customize layout, product cards, product selection, banners, colors, and typography.

Choose products

When you create Collections for Buy with Prime, you must select which products you want to appear in your collection. To choose your products:

  1. Choose the Collection you want to edit.
  2. On the Design settings menu in the Collection editor, choose Product selection.
  3. Choose Select products.
  4. Choose the products for your Collections. You can select up to 50 products. Eligible products have Offer Prime turned on your Product detail page URL, product image, title, and price in your Buy with Prime catalog. You can update the products in your catalog to meet these requirements.

Layout

You can customize the layout of your Collections by choosing the Sort order, Collection width, Column number, Row spacing, and Product spacing. To customize your Collections layout:

  1. Choose the Collection you want to edit.
  2. On the Design settings menu, choose Layout.
  3. On the Layout side menu, choose your desired Display and Spacing settings.

Product cards

Product cards display your product price, image, and prime checkmark automatically, as these are mandatory for your Collections for Buy with Prime. Additionally, you can customize your product cards content alignment, corner style, image aspects, and add optional elements such as delivery promise, Buy now button, and automatic promotions.

Banner

You can choose if you want to display the Buy with Prime banner on your Collections. To activate the Buy with Prime banner:

  1. Choose the Collection you want to edit.
  2. On the Design settings menu, choose Banner.
  3. Toggle Buy with Prime banner on or off.

Color

You can choose the color of the text, promotion flags, and Prime Checkmark logo background for your Collections. To edit colors:

  1. Choose the Collection you want to edit.
  2. On the Design settings menu, choose Color.
  3. Choose a color for the text, promotions, and Prime Checkmark logo background.

Typography

You can choose the font style in your Collections for Buy with Prime. To edit the font style:

  1. Choose the Collection you want to edit.
  2. On the Design settings menu, choose Typography.
  3. Choose a front from a Font family or search for a specific font.

Embed and launch Collections

Once you’re finished customizing your Collections for Buy with Prime, you can save and embed the code within any webpage on your site or blog. Use the following steps to embed your customized Collections:

  1. At the top of the experience editor, choose </> Get code to copy your embed code.
  2. Paste the embed code within <body> tags on your site where you want the collection to display.
  3. Choose Save.

Note: If you want to place your Collections on another site, add the URL to your domain allowlist in your Buy with Prime button settings.

Manage Collections

You can edit, deactivate, or delete your Collections for Buy with Prime at any time.

Edit Collections

  1. Sign in to the merchant console.
  2. On the side menu, choose Products, and then Collections.
  3. Locate the collection you want to edit
  4. On the right-hand side, choose the 3 dots (…) and then choose Edit.
  5. Make your changes in the experience editor, and then choose Save.

Note: Changes might take up to one minute to appear on your site.

If you replace a Buy with Prime collection on your site you need to remove the old product content and then replace the Collections code snippet that contains the same products. These products are dynamically added and removed from your Collection based on Prime eligibility.

Deactivate Collections

  1. Sign in to the merchant console.
  2. On the side menu, choose Products, and then Collections. The Status column shows the Collection either as Inactive or Active.
  3. Toggle the status to Inactive on your collection. This deactivates the collection without needing to remove its code from your site.

Delete Collections

  1. Sign in to the merchant console.
  2. On the side menu, choose Products, and then Collections.
  3. Locate the collection you want to edit.
  4. On the right-hand side, choose the 3 dots (…) and then choose Delete.
  5. Navigate to your site and remove the code associated with the deleted Collection.

Collections for Buy with Prime FAQ

Get answers to common questions about Collections for Buy with Prime