Add grid settings (number of columns) #989
Conversation
ghost
added
the
|
Hey team, just getting caught up on this + refreshing my memory on the design work we did which feels like it was YEARS ago 😅 Agree with Nick's suggestion that communicating this as a maximum is ideal to communicate how it'll behave. @wiktoriaswiecicka it looks like we'd done work to add this to the Settings UI Figma file, but we had separate values for desktop and mobile. Seems like we'll only have one setting, and mobile will auto adjust. Does that sound right? Edited to add: in the new featured collection section, we have designed for "Number of columns on desktop" and "Number of columns on mobile" Wik we should align on approach with Yoann. |
👋 @katycobb, for some context we had decided to only add this for desktop as mobile would be too squished to have 3+ rows 🤔 |
|
@sofiamatulis Alright I suggest you remove the "magic" that has items occupy the full width altogether (i.e. this https://screenshot.click/27-38-1ztno-n5kai.png). This means this could happen if there are less items that the number entered in the setting (https://screenshot.click/25-16-788jk-7eezr.png) (i.e. only 3 items, but we allow 6 per row). We'll play with it and decide if this feels correct. It's hard to make decisions without actually interacting with what the merchant would experience. |
On the new featured collection section design, the mobile grid looks like this. I think the UXers need to align on approach. CC: @wiktoriaswiecicka and @YoannJailin |
@nicklepine I have updated it so you can play with the test store and see what that would feel like. Quick video: https://screenshot.click/27-23-143ql-5izvn.mp4 It feels a bit more intuitive to me since the merchant can update the row numbers per section and if there is more/less items they can update the number of rows. It ensures it's all consistent since all rows behave the same and it behaves exactly like what the setting is saying it's doing |
|
Thank you! @sofiamatulis for spinning this up! Recap:
|
There was a problem hiding this comment.
I'm curious about some of the behaviour specifically on tablet/mobile. We want to remove the magic effect but we no specific logic that is self explanatory for the amount of items per row on tablet/mobile.
You'd have to test with the different numbers of products per row to see what the behaviour is like on smaller screens.
One other thing we're going to need to edit, is the sizes and srcset attribute on medias in some place as now there can be one per row. And we did not account for this before.
There was a problem hiding this comment.
@ludoboludo found and mentioned the biggest issues/questions that I have right now.
I'm curious about some of the behaviour specifically on tablet/mobile. We want to remove the magic effect but we no specific logic that is self explanatory for the amount of items per row on tablet/mobile.
I personally think it's fine that the number of items per row on tablet is still arbitrarily set to whatever we think works best (product grids 3, multicolumn 2, product reccs 2). I think that's less magic and more predictable than something like if desktop > 4 then tablet = 3 , if desktop <= 4 then tablet = 2. And I think adding a tablet specific setting is bad idea.
Otherwise I just want to ensure we enforce the strict widths on tablet as we do on desktop now. I missed much of the conversation around removing/keeping this sort of magic, but I do agree with the ultimate decision. I think it makes sense and the code will also be easier to build on in the future.
|
Hi team, UX folks connected + agreed we should add mobile settings back, but with a smaller slider range of 1-2. @wiktoriaswiecicka can advise which sections should get this. It should be slotted under the I'd like to standardize all the labels to one common label for each viewport, rather than calling out products, blog posts, items, etc. differently for each section: I think these labels make sense given the magic removal - we don't need to specify "maximum" because it should be an absolute number, but open to the team's feedback! In addition to the proposed label updates, I have a suggestions for hierarchy changes: Featured collection Collection list Product recs Search results Multicolumn Blog posts If it should just be one setting to control the grid, I’d suggest: Update existing label Collection page Happy to chat through anything if it doesn't make sense or if you have questions/ideas! |
|
Update: This PR only accounts for the desktop settings. The mobile settings will be done in a follow up |
|
In multicolumn the first two columns are shifted higher to the grid on desktop:
and this is how it looks with 6 columns 🥴 |
@wiktoriaswiecicka This was a previous style :) should be fixed now |
@katycobb Since we already have |
@katycobb We have 2 settings here. One to show the total amount of blog posts (existing setting) and the new one to show the amount of columns per row. |
Co-authored-by: Ludo <ludo.segura@shopify.com>
There was a problem hiding this comment.
One thing that should be a quick fix.
Otherwise, I think I gave it a pretty good look and things seem like they're behaving as expected. I think there's some more cleanup to do with the classes on these sections, but there's not much we can/should do in that regard until we're also considering the mobile/tablet concerns.
Why are these changes introduced?
Fixes #988 .
What approach did you take?
I have added a new setting for all these sections:
https://screenshot.click/25-24-udz1y-6h1gp.png
We have also removed the magic making the elements fill the width of the row: https://screenshot.click/25-48-9vyjp-dfgfx.png (adaptive grid on smaller numbers)
Other considerations
We have allowed only the multicolumn to have a max of 6 (logos scenario). All of the other sections have a max of 5
Featured collection range for existing setting
products to showis now incrementing by 1 instead of 2Demo links
Ensure this works well with the newly added settings:
Checklist