Different Featured Collection Designs for Desktop and Mobile (ATEILER Theme)

Store Design

Topic summary

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.
1

Hello Shopify Community,

I want to display the Featured Collection section with different designs on desktop and mobile.
I was able to solve this for the hero section using a simple CSS code, but the same method doesn’t work for Featured Collections.

My goal:

  • One design on desktop

  • A different design on mobile

  • Show/hide them separately

Is it possible to solve this with a short CSS code, or do I need to modify it through the code editor?

Any advice would be greatly appreciated, thanks!

1 Like
2

Having the same section twice but displaying them each depending on the screen width…

Use 2 separate @media queries, one with min-width, one max-width,
Each having the correct selector (the section ID),
Both having the same property display: none

One is hidden on desktop
One is hidden on mobile

2 Likes
4

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.

1 Like
6

Hey The_ScriptFlow,

my store url is:

P.S.

The website you have logged into is currently live and has been created using the Dawn theme.

I am working on another theme in the background.
That is why I am also sending you a link that will be valid for a few days. And the question I asked applies to the website you see on this link.

8

Dear The_ScriptFlow,

I really appreciate but for security reasons, I’m not able to share collaborator access.

However, you can share the full CSS/HTML solution here along with clear instructions on:
– which file it should be added to
– and exactly where it should be placed.

I will apply the changes on my end.

Thank you for your understanding.

10

To display different ones, use the following CSS code:

// Normal CSS-Code for desktop user

@media screen and (max-width: 767px) {
// Mobile CSS code
}

Keep in mind that you are building on the HTML structure of the existing section.

Otherwise, you can also create two sections and display one on the desktop and one on mobile (display: none;).

11

I understand your point.

In that case, I will break the task into small parts and share them here step by step, instead of giving collaborator access.

Thank you for your understanding.

1 Like