# Select the selected item and display the image based on the selected item **URL:** \ **Category:** Ask for Help\ **Created:** [November 12, 2023, 2:04pm UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711 "2023-11-12T14:04:09Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Tinwarit\_Tanachonyar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tinwarit_tanachonyar/32/65953_2.png) [@Tinwarit\_Tanachonyar](https://community.glideapps.com/u/Tinwarit_Tanachonyar)\ **Post date:** [November 12, 2023, 2:04pm UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/1 "2023-11-12T14:04:09Z")
First of all, sorry for translating the need for help on Google Translate. I’m studying making an app store. There is 1 set of shoe products. 1 set of shoes consists of different colors and shoe sizes. I want the application to display a list of shoes when I select the desired item by selecting the shoe color. and show the image of the item I selected, for example, choose the color of red shoes The picture will show the color of the shoes is red. If you choose another color of shoes The picture also shows the shoe color that has been selected. I don’t know what to do. Or is there an example for me to copy and learn more about? ![สกรีนช็อต 2023-11-12 203231](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/4/d48341177e206eed631a91ef50617bbf34fb19ad.jpeg) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [November 13, 2023, 12:22am UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/2 "2023-11-13T00:22:57Z")
You would have to structure two tables for this: Products & Product Variants. **Products table** | RowID | Product Name | | --- | --- | | abc | Product 1 | | abd | Product 2 | | abe | Product 3 | _Product Variants table_ | RowID | Product ID | Variant Name | Variant Image | | --- | --- | --- | --- | | v123 | abc | Variant 1a | Image link | | v124 | abc | Variant 1b | Image link | Then create a relation using the product ID to get all variants of a product, and use it in a choice component writing to a user-specific column, write the rowID of the variant. Use the rowID that was chosen to create a single relation to the Variants table and retrieve whatever info you need, including the image, to display. ---
**Author:** ![Tinwarit\_Tanachonyar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tinwarit_tanachonyar/32/65953_2.png) [@Tinwarit\_Tanachonyar](https://community.glideapps.com/u/Tinwarit_Tanachonyar)\ **Post date:** [November 13, 2023, 3:58am UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/3 "2023-11-13T03:58:47Z")
Try doing as you told me. Is it like this? ![สกรีนช็อต 2023-11-13 104600](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/4/c4a58eafb8309975b77d93ef90ee39cff64ca557.png) ![สกรีนช็อต 2023-11-13 104617](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/7/d726f48838ac26081facb33d03070c09072be842.png) ![สกรีนช็อต 2023-11-13 104652](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1cc1e8b1262f0b5f517451bbf243b1eace5c3d59.jpeg) Why doesn’t an image of the selected product appear when I click on a product in the choice component? Did I miss any method? 😅 ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [November 13, 2023, 4:02am UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/4 "2023-11-13T04:02:18Z")
You’re writing the choice to a user profiles column. If you want to do it that way, you have to create the relation from the user profiles table to grab the image. I would suggest writing to a user-specific column in the Products table instead. Then use a relation - lookup to pull the image and display it in your Image component. ---
**Author:** ![Tinwarit\_Tanachonyar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tinwarit_tanachonyar/32/65953_2.png) [@Tinwarit\_Tanachonyar](https://community.glideapps.com/u/Tinwarit_Tanachonyar)\ **Post date:** [November 13, 2023, 4:48am UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/5 "2023-11-13T04:48:23Z")
Sorry, the system cannot display the images for the selected item. 😅 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/9/09209abf7d49ed15205a23a5ad3947195f6ccca9.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e13838d5669d71d1a74f29dae8bd0c83fc580b8a.jpeg) Can I message you? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [November 13, 2023, 6:42am UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/6 "2023-11-13T06:42:25Z")
What column are you pointing the image component to? Please keep the discussion here so if I’m not available, someone else can chime in. ---
**Author:** ![Tinwarit\_Tanachonyar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tinwarit_tanachonyar/32/65953_2.png) [@Tinwarit\_Tanachonyar](https://community.glideapps.com/u/Tinwarit_Tanachonyar)\ **Post date:** [November 13, 2023, 7:27am UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/7 "2023-11-13T07:27:19Z")
I choose Products Variants table according to the attached file: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/61b87e77284ad39120b1fc1be44f863256098102.jpeg) The table that I drafted ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/63f61ab6238728aeecab48c3f555bbbcc2f8b0ec.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/5/a5e20318fcf362270d2ebe585fd10fc8fb6e9112.png) Or is there an example where I can copy the template? 😂 ---
**Author:** ![Tinwarit\_Tanachonyar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tinwarit_tanachonyar/32/65953_2.png) [@Tinwarit\_Tanachonyar](https://community.glideapps.com/u/Tinwarit_Tanachonyar)\ **Post date:** [November 14, 2023, 3:27am UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/8 "2023-11-14T03:27:16Z")
@ThinhDinh From your method Now I can select a product(color) and display images based on the selected product(color). But I still have to change the column ProductsID name to something else for the option to show. I don’t know if there is a way that doesn’t require changing the column ProductsID. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/c/2cca26ac030766f1456ed4825f27d12e566e92ce.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13687d78701a991b968611b7070894820eb22e0e.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/24a5752a79c14c082aa181879ceff5036e348e31.jpeg) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [November 15, 2023, 11:44pm UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/9 "2023-11-15T23:44:57Z")
> [@Tinwarit\_Tanachonyar](#): > > But I still have to change the column ProductsID name to something else for the option to show. I don’t understand this part. Can you elaborate more? ---
**Author:** ![Tinwarit\_Tanachonyar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tinwarit_tanachonyar/32/65953_2.png) [@Tinwarit\_Tanachonyar](https://community.glideapps.com/u/Tinwarit_Tanachonyar)\ **Post date:** [November 16, 2023, 1:51am UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/10 "2023-11-16T01:51:58Z")
@ThinhDinh I mean Your method can now display images based on the selected items. But it is not classified as a type of product. The created items will be displayed as product variants of Products 1 and Products 2 in the Choice Component (if I add product variants of Products 1 and Products 2 to the table). I want the products to be listed by category. For example, if I click on Category Product 1 will display product 1 variants in the Choice Component, without Product 2 variants included. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [November 16, 2023, 11:31pm UTC](https://community.glideapps.com/t/select-the-selected-item-and-display-the-image-based-on-the-selected-item/67711/11 "2023-11-16T23:31:10Z")
If you have constructed the Product Variants table correctly, from the Products table, you can create a muiltiple relation to the Product Variants table to retrieve only related variants and use that as a source for your choice component.