# How to create a cart with buttons for each item?

**URL:** <https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162>\
**Category:** Questions about Thunkable X\
**Tags:** beginner\
**Created:** [June 12, 2022, 6:38am UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162 "2022-06-12T06:38:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhanushan48608nkfw](https://avatars.discourse-cdn.com/v4/letter/d/fbc32d/32.png) [@dhanushan48608nkfw](https://community.thunkable.com/u/dhanushan48608nkfw)\
**Post date:** [June 12, 2022, 6:38am UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/1 "2022-06-12T06:38:35Z")

</div>

The quantity change buttons should be added to the each item which the user add to the cart. Just like the cart in other shopping apps. How to add those? I’ve attached a picture for example

 ![delivery-option](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/9/b9e3b27e24fed371269ceaadd53fff52a09c7319.png)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 12, 2022, 2:08pm UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/2 "2022-06-12T14:08:45Z")

</div>

Use a custom Data Viewer List or Grid and design all your labels and buttons to show with every item.

---

<div class="post-metadata">

**Author:** ![dhanushan48608nkfw](https://avatars.discourse-cdn.com/v4/letter/d/fbc32d/32.png) [@dhanushan48608nkfw](https://community.thunkable.com/u/dhanushan48608nkfw)\
**Post date:** [June 13, 2022, 9:24am UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/3 "2022-06-13T09:24:28Z")

</div>

can you please be more clear? i don’t know how to do that

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 14, 2022, 7:53am UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/4 "2022-06-14T07:53:46Z")

</div>

See this [Data Viewer Custom Layouts Tutorial - YouTube](https://youtu.be/UIZtLgELGyk)

Or this [How to Use the Data Viewer List in Thunkable X - 2020 To Do App - YouTube](https://youtu.be/cccFpkrKPPw)

---

<div class="post-metadata">

**Author:** ![dhanushan48608nkfw](https://avatars.discourse-cdn.com/v4/letter/d/fbc32d/32.png) [@dhanushan48608nkfw](https://community.thunkable.com/u/dhanushan48608nkfw)\
**Post date:** [June 14, 2022, 7:55pm UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/6 "2022-06-14T19:55:10Z")

</div>

i saw the videos, but i couldn’t find the features in my thunkable.x  
there is no “row” or “column” and “save as data viewer layout”

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [June 14, 2022, 8:02pm UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/7 "2022-06-14T20:02:59Z")

</div>

Hey there @dhanushan48608nkfw ,

If you are not seeing rows/columns, that’s because they are not available in the drag-and-drop interface of Thunkable just yet. We are working hard on a new component called Layouts that will bring this feature to our more powerful interface. This component will also allow to maintain any aspect ratio instead of stretching items to fit the dimensions of the phone they are on.

If you need to get started today, you can use the Snap to Place interface. In order to do this, when you create a new project an uncheck the box titled “Use the Drag and Drop builder” as shown in the video below.

![](https://downloads.intercomcdn.com/i/o/512076256/3fb84c9a25246b6de9110d7b/giphy.gif)

---

<div class="post-metadata">

**Author:** ![dhanushan48608nkfw](https://avatars.discourse-cdn.com/v4/letter/d/fbc32d/32.png) [@dhanushan48608nkfw](https://community.thunkable.com/u/dhanushan48608nkfw)\
**Post date:** [June 14, 2022, 8:10pm UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/8 "2022-06-14T20:10:21Z")

</div>

Thank you very much,  
I’ve already built the 90% of the app in the drag and drop interface. I s there any way that i can shift them now or use the layout i create in new interface in the other app?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 14, 2022, 8:17pm UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/9 "2022-06-14T20:17:21Z")

</div>

Once you create the Data Viewer Layout in the StP UI, it will be available in the list of layouts in the DnD UI.

---

<div class="post-metadata">

**Author:** ![dhanushan48608nkfw](https://avatars.discourse-cdn.com/v4/letter/d/fbc32d/32.png) [@dhanushan48608nkfw](https://community.thunkable.com/u/dhanushan48608nkfw)\
**Post date:** [June 15, 2022, 5:40am UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/10 "2022-06-15T05:40:39Z")

</div>

Thanks you

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [September 13, 2022, 5:40am UTC](https://community.thunkable.com/t/how-to-create-a-cart-with-buttons-for-each-item/1921162/11 "2022-09-13T05:40:58Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
