Goal: apply different designs to the Featured Collection on desktop vs. mobile, with the ability to show/hide each version separately. OP asks if this can be done with a short CSS snippet or requires code edits.
Suggested approach:
Duplicate the section and control visibility with CSS media queries targeting section IDs (e.g., use display:none within min-width/max-width queries).
Example pattern: desktop styles by default; add @media screen and (max-width: 767px) for mobile overrides.
Build on the existing HTML structure of the section.
Caveats raised:
Duplicating a “Collection grid” can render products twice server-side, potentially increasing TTFB (Time To First Byte) and impacting performance. Pagination differences across duplicated sections may also cause issues.
Access and process:
A helper requested the store URL/access to craft a tailored solution. OP shared public URLs but declined collaborator access, requesting full CSS/HTML and precise file/placement instructions instead.
Status and next steps:
No final code delivered in-thread yet. OP will break the work into smaller tasks and post step-by-step requests. Discussion remains open with a viable CSS media-query approach noted, alongside performance warnings.
Summarized with AI on December 11.
AI used: gpt-5.
Here is a small followup to what @Howie10 suggested with CSS codes:
This is fine for “Collection banner/header”, “collection description” or other similar section.
However, I would be very careful if doing this with “Collection grid” section, especially when you have many product cards per page. Rendering items twice will delay your page rendering server-side and this is TTFB speed metic which is the base of several others.
Also, if different size pagination in 2 sections – can be interesting.