Possible to create a Horizontal Product Comparison Table?

Highlighted
New Member
1 0 0

Hey Everybody,

 

I've tried finding a solution to my problem here and elsewhere without success. 

 

I've a shop with 5 different Products which i want to compare in a table.

Therefore, I plan to create a "product comparison" page where the user can check all products in one.

The main element on the page will be a table that compares the different aspects of the products.

The information will be inserted manually. 

 

For a great usability on smaller screens and mobile the table must be able to scroll horizontal. Even better if its possible to freeze the first "category" column and only scroll the products.

 

Check illustration to see what I am trying to say

 

I hope you get what I mean and there's a solution to that.

PM: I'm not looking for a compare product function were visitors have to select individual products.

 

Thanks so much,

Dennis

 

 product comparison grafic.JPG

 

0 Likes
Shopify Partner
1843 172 543

Hi Dennis,

 

That's a very general HTML / CSS question which would be better suited for places such as stackoverflow or unsurprisingly a quick Google search. Latter returns a good number of examples - here is one of them.

 

As for mobile / device views, I'd recommend reading up on responsive table design - a good beginning would be here.

 

Best wishes and let us know how it goes!

I turn coffee in to code - since 1998
0 Likes