---
agentTools:
  projectIndex: https://docs.storyly.io/llms.txt
---

# Creating a Swipe Card Widget

How to create a Swipe Card Widget?

A Swipe Card is aTinder-like left/right swipe carousel that lets users quickly sift through products or offers, surfacing their favorites with a single, satisfying gesture. You can use this widget to showcase products in an interactive swipeable card format.

## Create a Swipe Card Widget

For creating a Swipe Card widget, click on **+ Create widget** in the top left corner and chose the Swipe Card option. The next steps will be giving a unique name to help you identify it later and hit **Create Widget** button.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/c144843093abffb765f1c3cadb64d28834456ad9bb2d23826a2a9bddfb187777-Screen_Shot_2025-12-03_at_23.28.34.png",
        "Frame 724.png",
        ""
      ],
      "align": "center",
      "sizing": "85% ",
      "border": true
    }
  ]
}
[/block]

## Edit Swipe Card Widget Design

By clicking on Edit design, you decide on your Layout settings, Text font, Swipe feedback icons and End-of-swipe-card message.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/094e92d4d09b907553cf4c62a6cd7bf1858102f0f74d7b6f5e270ab8545faeaa-Screen_Shot_2025-12-03_at_23.33.25.png",
        "Frame 724.png",
        ""
      ],
      "align": "center",
      "sizing": "85% ",
      "border": true
    }
  ]
}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/96148e70aa1093e9645d133b036a61a3c9aa93dcfe455470579ba629e7f73a6e-Screen_Shot_2025-12-03_at_23.32.35.png",
        "Frame 724.png",
        ""
      ],
      "align": "center",
      "sizing": "85% ",
      "border": true
    }
  ]
}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/40bbf251942155e7b3fde06e0f151de536fa8a6daa499c0ad34e977de93ea960-Screen_Shot_2025-12-03_at_23.36.05.png",
        "Frame 724.png",
        ""
      ],
      "align": "center",
      "sizing": "85% ",
      "border": true
    }
  ]
}
[/block]

Once you are done, click on Save and exit on the top right corner.