# Help with Creating a Product Attribute Comparison Matrix in Glide

**URL:** <https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997>\
**Category:** Ask for Help\
**Created:** [October 11, 2024, 11:24am UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997 "2024-10-11T11:24:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![LucD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucd/32/87418_2.png) [@LucD](https://community.glideapps.com/u/LucD)\
**Post date:** [October 11, 2024, 11:24am UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/1 "2024-10-11T11:24:30Z")

</div>

Hi everyone!

I’m building a product information management app where products are organized into product series. I’ve structured it so that:

1. I have an attribute table where I define all the possible attributes used in the app.
2. For each product series, I assign a specific set of attributes relevant to the products in that series.
3. I use an automation that dynamically creates product attribute value records when a new product is added.
4. Users can then populate the values of these attributes from a product details page.

But now users want to compare products within a series more easily. They’ve requested a matrix or pivot-style view at the product series level where they can see all product attribute values side-by-side. This would help them make quick comparisons between products.

I’m not sure how to approach this with my current setup of dynamically populating attributes for each product. Alternatively, if I hardcode all attributes as fields on the product table, I would need to manually control which attributes are displayed based on the product series, which doesn’t seem scalable and would require a more maintenance.

Has anyone implemented something similar or can offer advice on the best way to achieve this comparison view without resorting to hardcoding everything?

---

<div class="post-metadata">

**Author:** ![LucD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucd/32/87418_2.png) [@LucD](https://community.glideapps.com/u/LucD)\
**Post date:** [October 15, 2024, 3:09pm UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/2 "2024-10-15T15:09:37Z")

</div>

Any help anyone? 🙏

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 15, 2024, 3:43pm UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/3 "2024-10-15T15:43:42Z")

</div>

I don’t have any solid advice or an example, but if it were me, I’d probably store attributes for each product as JSON in a column in the product table. Then when products are selected for comparison, I’d probably create a javascript column to process through the JSON from the selected products and build an HTML table to show the comparison of each selected product.

Figure out your JSON structure and how to fill it, then pass a snippet of it into ChatGPT and ask it to generate javascript to parse through the JSON and build an HTML table comparing attributes from two or more products. You can display that HTML using a Rich Text component.

---

<div class="post-metadata">

**Author:** ![LucD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucd/32/87418_2.png) [@LucD](https://community.glideapps.com/u/LucD)\
**Post date:** [October 16, 2024, 5:53am UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/4 "2024-10-16T05:53:04Z")

</div>

Thank you Jeff. Will give that a try!

---

<div class="post-metadata">

**Author:** ![LucD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucd/32/87418_2.png) [@LucD](https://community.glideapps.com/u/LucD)\
**Post date:** [October 17, 2024, 3:19pm UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/5 "2024-10-17T15:19:42Z")

</div>

Absolute genious Jeff! That worked for me 🙂

Screenshot attached for example.

 ![Screenshot 2024-10-17 at 17.16.09](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/b/6bceb5fe4838d68be38249f720c50a10480c5126.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 17, 2024, 4:00pm UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/6 "2024-10-17T16:00:10Z")

</div>

Awesome! Glad my gibberish made sense.

---

<div class="post-metadata">

**Author:** ![LucD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucd/32/87418_2.png) [@LucD](https://community.glideapps.com/u/LucD)\
**Post date:** [October 21, 2024, 10:12am UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/7 "2024-10-21T10:12:55Z")

</div>

Hi Jeff

Any idea why the styling would disappear? I haven’t changed anything in the javascript column since sharing that initial screenshot.

 ![Screenshot 2024-10-21 at 12.10.51](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/7/6728890008601b85a3118e53785eeaf0170586f2.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 21, 2024, 10:44am UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/8 "2024-10-21T10:44:01Z")

</div>

How is the styling applied to the table?  
Are you using inline styling, or is it applied through Settings-\>Appearance?  
If the latter, you may need to enable the “Preview Custom CSS” setting.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [October 28, 2024, 10:44am UTC](https://community.glideapps.com/t/help-with-creating-a-product-attribute-comparison-matrix-in-glide/76997/9 "2024-10-28T10:44:30Z")

</div>

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