Streaming live at 10am (PST)

CMS Product with models


#1

This is both a CMS question and a CMS Design question
Here is my designer share link: https://preview.webflow.com/preview/greatamerican?preview=abe669a87b3ccb97f673a5da5a87511d
a) There will be 8 different product families (pool tables), but within those pool tables each has a few models.
For instance:

Pool Table FAMILY-1, has models MODEL-600F1, MODEL-600F1
Whereas FAMILY-2, has models MODEL-600F2, MODEL-600F2

I am trying to make it easy to enter new items, so first I did a Table Model CMS with all of the specs that go with it, then a CMS called Tables, which links to that reference.

Not working out so well, when I add the models to the table cms template, it shows ALL of the models, instead of just the ones that belong to that family page.

Secondly, this is on the design side (and you’ll see it if you just go to one of the pool table template pages (not models, just the table)
I need to make a spec sheet with “model name, size, dimensions, weight” etc.
It looks great on desktop, but not so much on tablet/mobile - any suggestions?
Thank you !


Here is my public share link: [[LINK]]
(how to access public share link)


#2

Hey there! :slight_smile:

Regarding your 1st question: you should set a reference filter to your collection, so that only the same pool table family items are displayed:

For the design part, tables don’t work well on mobile, so instead of using columns you can try using flexbox instead, which will give you more flexibility on controlling the different viewports:

Hope this helps :wink:


#3

Thanks so much !
On the first part makes total sense :slight_smile:

On the second piece I’m actually already using flexbox. :slight_smile:

The collection list for the models is in a wrapper and I have 5 divs to house each of the specs.
The headings are in their own wrapper above the collection list.

So my first thought for mobile would be to flex the wrapper vertically instead of horizontally.
Problem there is all of the headings would read on top then the spec data with no heading reference.

:confused: ¯_(ツ)_/¯


#4

Yep, that won’t work because you’ll lose the relation between the item and the headings.
Tables are very tricky, specially in mobile.

To keep the table structure in mobile, I’d play a bit with flexbox child element settings and the table typography size (carefully so it doesn’t compromise mobile readability), or you can choose to use a different approach for this.

One option would be using tabs to display the models and under each tab you’d include the specs. It’s merely a suggestion, design is always subjective :slight_smile: