Problem

Store Design
, ,

Topic summary

A user is trying to hide specific collection items using CSS :has() selectors in their Shopify store’s base.css file. The code works correctly for the English version but fails when the store switches to Croatian.

Root Cause:
The collection URLs change when the language switches to Croatian. The original CSS targets English paths like /collections/dresses, but Croatian versions use translated handles (e.g., /hr/collections/haljine).

Recommended Solutions:

  1. Inspect the actual Croatian URLs by right-clicking collection links in the Croatian version and checking the href values in the browser inspector.

  2. Update CSS with correct Croatian paths:

.collection-list .collection-list__item:has(a[href="/hr/collections/haljine"]) { display: none; }
  1. Use a flexible selector to handle both languages:
.collection-list .collection-list__item:has(a[href^="/collections/dresses"]),
.collection-list .collection-list__item:has(a[href^="/hr/collections/haljine"]) { display: none; }

The discussion remains open pending confirmation from the original poster whether the suggested solutions work.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi, so my problem is that i did this code in base.css - i added it. .collection-list .collection-list__item:has(a[href=“/collections/dresses”])
{display:none}
.collection-list .collection-list__item:has(a[href=“/collections/jackets”])
{display:none}
.collection-list .collection-list__item:has(a[href=“/collections/trousers”])
{display:none}
.collection-list .collection-list__item:has(a[href=“/collections/skirts”])
{display:none}
.collection-list .collection-list__item:has(a[href=“/collections/shirts”])
{display:none}
.collection-list .collection-list__item:has(a[href=“/collections/shoes”])
{display:none}
.collection-list .collection-list__item:has(a[href=“/collections/t-shirts”])
{display:none} - for every collection i made for my store. And it works but just for English, when the store is on Croatian its not working. I tried this: .collection-list .collection-list__item:has(a[href="/collections/hr/pages/dresses its still not working.

2

Hi @snjezana
Please add the store URL.
I think the issue is that the collection & page handle is also being translated to Croatian language; that’s why the CSS is not working.

Try using the same CSS but with a translated handle.
Something like the example below for dresses :backhand_index_pointing_down:

.collection-list .collection-list__item:has(a[href="/hr/collections/haljine"])
{display:none}
1 Like
3

Hi @snjezana

I am from Mageplaza - Shopify solution expert.

To fix this issue, please follow these steps:

1. Inspect the URL Structure

If the URL in Croatian is different, update your CSS accordingly. It should look like:

.collection-list .collection-list__item:has(a[href="/hr/collections/haljine"]) { display: none; }
.collection-list .collection-list__item:has(a[href="/hr/collections/jakne"]) { display: none; }
.collection-list .collection-list__item:has(a[href="/hr/collections/hlace"]) { display: none; }
.collection-list .collection-list__item:has(a[href="/hr/collections/suknje"]) { display: none; }
.collection-list .collection-list__item:has(a[href="/hr/collections/košulje"]) { display: none; }
.collection-list .collection-list__item:has(a[href="/hr/collections/cipele"]) { display: none; }
.collection-list .collection-list__item:has(a[href="/hr/collections/majice"]) { display: none; }

3. Use a More Flexible Selector (Alternative Solution)
If your store uses multiple languages, and you want a dynamic solution, you can use the ^= attribute selector:

.collection-list .collection-list__item:has(a[href^="/collections/dresses"]),
.collection-list .collection-list__item:has(a[href^="/hr/collections/haljine"]) {
    display: none;
}

This ensures it works for both English (/collections/dresses) and Croatian (/hr/collections/haljine).

Please let me know if it works as expected!

Best regards
1 Like
4

Hi @snjezana
If the solution presented meets your needs and effectively addresses your query, I encourage you to accept it as the chosen answer. This will acknowledge your support and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.