Custom collection display

Topic summary

A user wants to replicate a specific featured collection layout from a reference store on their own Shopify site. They provided a screenshot showing the desired design.

Solution Provided:
Another user (AnneLuo) shared custom CSS code to achieve the layout, with instructions to:

  • Navigate to Online Store → Theme → Edit Code
  • Locate the theme.liquid file
  • Insert the provided code before the closing tag

AnneLuo included a result screenshot demonstrating the implementation.

Current Issue:
The original poster reported that the solution doesn’t display correctly on mobile devices and shared a screenshot showing the problem. The discussion remains open, awaiting a fix for the mobile responsiveness issue.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.

I would like to have the same type of featured collection layout as this store:
https://nl.soera-shop.com/en?shpxid=dc1c41d2-ca4f-4dc7-8b12-146823cc0b9b

My store URL: https://sophia-shop.com/?_cd=45e3b7d699f64b6a1744341c5fb1add97d7cecdd5d89fd0b16586e9a7fb75c25&_uid=126394859865

Thank you

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag


Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

On mobile it looks very off, can you fix it? Image attached: