---
agentTools:
projectIndex: https://docs.storyly.io/llms.txt
---
# Shoppable Stories with Product Catalog
Shoppable Stories is an e-commerce feature that enables apps/websites to showcase their products on top of video/image Stories. It allows the shoppers to add products to their cart and complete the purchase without leaving the Story in very few steps.
[block:image]
{
"images": [
{
"image": [
"https://files.readme.io/4ab574a-1.gif",
null,
""
],
"align": "center",
"sizing": "100% "
}
]
}
[/block]
To achieve this experience, there are several steps that should be followed. In this guide, we'll cover what to do on **Storyly Dashboard & Studio**.
> 🚧 Before Starting
>
> Your app needs to have a special setup completed to use Shoppable Stories. You can check the documentation below:
>
> [Android](https://docs.storyly.io/docs/android-shoppable-stories)\
> [iOS](https://docs.storyly.io/docs/ios-shoppable-stories)\
> [Web](https://docs.storyly.io/docs/web-shoppable-stories)
Below, you may find an example of the usage of Shoppable Stories. There is a recipe below, which you can share with your Dev Team. They can follow the steps and create a similar experience for your users.
[block:tutorial-tile]
{
"backgroundColor": "#1f2048",
"emoji": "🛍️",
"id": "64369f2290a25806a6b12b94",
"link": "https://docs.storyly.io/v1.0/recipes/shoppable-stories",
"slug": "shoppable-stories",
"title": "Shoppable Stories"
}
[/block]
> 🚧 Warning
>
> Shoppable Stories became available with the 1.32 version of all SDKs.
>
> Please make sure that the SDK version integrated in your app is up to date.
## Preparing the Product Feed
To create Shoppable Stories, first, we need to prepare the Product Feed. With that feed, we'll fill the Product Catalog Interactive.
1. Please go to **Data Management** under Settings.
2. Under the **Products** section, please click on the **+ New Feed** button.
3. After giving a **name** to the Product Feed, please enter the **URL** of the feed.
4. Then, please match the fields with relevant information available in your feed.
5. When you hit **Continue**, there will be extra fields that you can match for variants (color, size, etc.) and any additional information that you may want to show in Stories.
6. Once you complete the matching, you may click on **Save** and see the feed start processing under **Products** section.
[block:image]
{
"images": [
{
"image": [
"https://files.readme.io/79ad028-2.png",
null,
""
],
"align": "center"
}
]
}
[/block]
Depending on the item count included in the feed, it may take a couple of minutes for processing to be completed.
After processing is completed, we're ready to create Stories.
## Creating Shoppable Stories with Product Catalog
1. While creating Stories in Storyly Studio, you can add **Product Catalog** interactive under the **CTA** section to make your Stories shoppable.
2. After placing the **Product Catalog**, we need to select the Product Feed that is going to be used at the top right.
3. Then, you can start adding products by searching their IDs or names. With drag\&drop on the left-hand side, you may change the order of products shown in the Story.
4. You may modify the button texts on both steps and enable or disable the information that you'd like to be included or excluded.
5. If you expand **Success message options**, you may also change the texts shown after adding items to the cart.
Once you hit **Save**, your **Shoppable Stories** are ready to go live!
[block:html]
{
"html": "
\n
"
}
[/block]