View Categories

How to Use Amazon API with Elementor

Follow these steps to use the Amazon API with the Amazon AffiliateX plugin

On your Elementor editor, navigate to the “Element” panel.

Search for any of the AffiliateX blocks you want to use. For example, “AffiliateX Single Product” in the search bar.

AffiliateX Elementor Widgets

Drag and drop the block from the elements panel and drop it into your desired section on the Elementor canvas.

How to use Amazon API with Elementor

You can connect only a single field, like only image, only title, only description, only pricing, or only link, or you can connect all the fields at once.

How to Connect All Product Detail Fields at Once #

Click the “Connect” button to open the “Amazon Product Search” modal.

How to use Amazon API with Elementor

Insert the keywords to view various products available for you to pick from.

How to use Amazon API with Elementor

Click on your preferred product to view the product details (title, image options, description, pricing, your unique tracking link).

How to use Amazon API with Elementor

Automatically, all fields are checked. If you do not want to connect any field, you can uncheck it, as seen below.

How to use Amazon API with Elementor

To change the image, click the drop-down arrow icon on the image section to select your preferred image from the multiple product images provided.

How to use Amazon API with Elementor

Once you are satisfied, click “Connect fields.”

How to use Amazon API with Elementor

Click the “change” icon on the sidebar panel to change the product, image, or disconnect any connected field.

How to use Amazon API with Elementor

How to Connect Individual Fields #

Connecting Title Field #

Click the “Title Settings” drop-down menu to view the settings.

Click the Amazon icon to search for the product and connect the title

How to use Amazon API with Elementor

Connecting Image Field #

To connect the image field, click the “General Settings” drop-down menu.

On the “Image Source,” select the ”↗” arrow icon, which means “external source.”

Click the Amazon icon to search for the product and connect the image.

Connecting Image Field
To connect the image field, click the “General Settings” drop-down menu.
On the “Image Source,” select the ”↗” arrow icon, which means “external source.”
Click the Amazon icon to search for the product and connect the image.

Connecting Pricing Field #

To connect the pricing field, click the “Pricing Settings” drop-down menu. 

Enable the pricing by changing to “Yes.”Click the Amazon icon to search for the product and connect the sale price or the marked price (initial price).

How to use Amazon API with Elementor

You can also connect the product price to the button. To do this:

Click the “Button | Layout Settings” drop-down menu.

Change the Layout Style to “Price Button.”

Click the Amazon icon to search for the product and connect the sale price.

How to use Amazon API with Elementor

Connecting Description Field #

To connect the product description field, click the “Content Settings” drop-down menu.

Select the Amazon icon to change the “Content Type.”

Click the Amazon icon to search for the product, and connect a description from Amazon.

How to use Amazon API with Elementor

Connecting Your Tracking Link #

To connect your Amazon tracking link, click the “Button | General Settings” drop-down menu.

Click the Amazon icon to search for the product, and connect your tracking link for the specific product you are adding.

How to use Amazon API with Elementor