Functional demonstration for App Builder

To learn more about how to use Adobe Commerce with App Builder, view the video below that shows how to connect Adobe Commerce to Amazon Seller Central. This demonstration uses events from Adobe Commerce that are consumed by App Builder to enable continuous integration with Amazon Marketplace. This functional demonstration describes how this integration works and explores the potential of Adobe App Builder.

App Builder for Adobe Commerce


Hello everyone. Thank you for watching this recording. My name is Alex Salloum, and I’m a software development engineer at Adobe. In this video, I’ll be running a functional demo regarding the Amazon Sales Channel Extension that was built during the eventing framework. As a reminder, the Amazon Sales Channel Extension enables merchant to seamlessly sell products in the Amazon marketplace. The application is built choosing the two main components: the Adobe Commerce and the Amazon SP API third party system, using the Adobe app builder to perform a synchronization between those two systems. Let’s jump into the demo.

As you can see, I have my Amazon Sales Channel project built on App builder here in my Adobe developer console. If I go to my staging, I can see that I have a section called events and if I go check my events, I can see that I am subscribed to an event that is the Observer Event Catalog Product Save After with an event provider, the Adobe Commerce. And this means that whenever a product is saved in my Adobe Commerce, I will be notified with an event.

If I go to my Adobe Commerce instance under Stores Configuration, we can see that in my Adobe services Adobe IO events I have some configuration that is set. For more details regarding how to set this configuration and how to complete it, you can check our official documentation.

For the sake of the demo, we built the model under System Tools Adobe IO Amazon Sales Channel, and you can see that our extension is built.

We can add an Amazon store and in this case you have some data that is fetched directly from my Adobe Commerce, such as my list of websites. In my case, I have only one website and this is why it’s grayed out. Otherwise, I will have a dropdown list to choose the website I want to link. I have to fill some additional information and once this is done, I can connect my store. Once my store is connected, like my demo store here I can go and review my store, and here I will have a synchronization that is done between the products I have in my Adobe Commerce and in my Amazon Seller Central. In my case, I have two products in my Adobe Commerce. One was matched as inactive and the other one is in progress. Let’s go to the in progress listing. We can see that my Lucky Cat Red was not found in my Amazon store, whereas my Lucky Cat Blue, it was found and its status is inactive. This status comes directly from my Amazon store and we will see it in a few seconds. You can see also that I can have this exact same experience in a local host outside of my Adobe Commerce. I can add an Amazon store. I have my data also fetched from my Adobe Commerce. I can go and view my store, and in this case I have also my products that are synced correctly. How does does it look like in my Seller Central? Here’s my Seller Central. I have an inventory with just one product my Lucky Cat Blue that is inactive out of stock with an available quantity of zero and the price of six US dollars, and this is exactly what I am seeing in my Adobe Commerce. What happens if I go and perform a change of the price of this product? I will edit my Lucky Cat Blue, and I will change the product from six to $8, for example. I will proceed and save.

Once I save, I can see that in my Adobe Commerce my price is of this $8, so it was updated correctly. If I go to my Amazon and I edit my product, I can see that my price is not updated yet, and this is because I don’t have my event that arrived yet. So if I go to my debug tracing and I refresh my list, so today is 14th of October, so I’ll wait for a few seconds until my event is here.

Here it is, so this is my new event. If I go and check the payload, let me beautify this. You can see that I have my Lucky Cat Blue my product with the new price of $8. Now, if I go to my Amazon and I refresh, you will see that my new price is $8, and I can see that my product was correctly updated in my Amazon store.

That’s it from the functional point of view. Stay tuned because in the next video we will go more into the technical details with the technical demo in which I will present how this was implemented and how does it work with using the events, consuming those events, and sending this data to Amazon. For any question or feedback, you can always reach out to us using the community slack channel or by email to me, Oleg, Naomi or Timothy or via LinkedIn, and we’ll be more than happy to answer all your questions. Thank you. -

On this page