Editing Collection Settings for a Services Company

Shopify Discussion
,

Topic summary

A services-based Shopify store seeks help customizing a collection page to reflect program enrollment states rather than product inventory. Reference images and a site link were provided to show desired UI changes.

A solution was offered via a CSS snippet to add in main.css. It:

  • Inserts “Enrollment Open” before the first filter item label and “Sold Out” before the last filter item label using the :before pseudo-element.
  • Hides existing label text by setting the targeted span’s font-size to 0.

Key selectors target .drawer__content list items and label.filter__label… within the filter drawer, implying theme-specific applicability. The code includes “first-chil d” which likely needs to be “first-child” to function correctly.

Outcome: The requester acknowledged and appreciated the solution. No further issues or testing feedback were reported.

Status: Appears resolved, pending implementation verification. Images were central to the request, and a CSS code snippet was the primary fix.

Summarized with AI on December 30. AI used: gpt-5.
1

Hello!

I really could use some help editing my collection page settings as I’m a service business that runs programs instead of selling hard goods.

Please reference the snapshots below to see the adjustments I’m seeking to make:

Group 34.jpg
Group 34.jpg790×749 64.7 KB

My website: www.shayrdair.com

Thank you in advance for considering it! :grinning_face:

-Tim

2

Add This Css in your Edit code > main.css File

.drawer__content li:last-child label.filter__label.flex.items-start.w-full.m-0 span.flex-auto:before {
    content: "Sold Out";
    font-size: 16px;
}

.drawer__content li:first-child label.filter__label.flex.items-start.w-full.m-0 span.flex-auto:before {
    content: "Enrollment Open";
    font-size: 16px;
}
.drawer__content li label.filter__label.flex.items-start.w-full.m-0 span.flex-auto{
    font-size: 0px;
}
1 Like
3

Thank you! Greatly appreciate your help!! :blush: