How to target a specific collection page on shopify

Store Design
1

Hello, so I’m having trouble with targeting a specific collection page on my shopify website. Here’s some context:

My clients website has 3 specific pages for selling their clothing: a men’s page, women’s page, and petite page.

As part of my work (web design), I’m adding a image to the collection pages - I’m doing this by changing the background image with css.

My problem - when I change the background image on the women’s page, the background image changes on the mens and petite pages also. This is because they’re all ‘one’ (collection pages). However, I need the mens and womens pages to be different photos - the womens page with a picture of a women and the mens page with the picture of a man, etc.

Please help out if anyone knows if this can be done - find the store URL here: https://www.hclothing.com/

2

Hi @SamFarwell ,
body element has that unique id for both men and women collections.
for men you can add #men-39-s-clothing before your css selector.

and for women add this #women-39-s-clothing

Ahsan_ANC_0-1716719834695.png
Ahsan_ANC_0-1716719834695.png798×355 24.3 KB

3

Hi @SamFarwell ,

I understand that you need three different collection pages. The simplest way to accomplish this is by creating three collection templates and assigning them as needed. Here’s how you can do it:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and click Customize.
  3. Use the Template drop-down menu to select a template, then click + Create template.
  4. Give your template a unique name.
  5. Using the Template drop-down menu, select the existing template you want to base your new template on.
  6. Click Create template.

For example, you can name the new template “Men’s Collection” and design it accordingly

Dawood_Mirza__0-1716726226584.png
Dawood_Mirza__0-1716726226584.png1919×917 289 KB

Repeat the process for the Petite collection. This will give you a total of three templates:

  • Default (Women)
  • Men
  • Petite

To assign the templates, follow these steps:

  1. Go to Products > Collections > Men’s Collection.
  2. In the bottom right corner, you will see a template option. Select the desired template for that collection.

Dawood_Mirza__1-1716726442855.png
Dawood_Mirza__1-1716726442855.png1103×771 56.3 KB

I hope this helps! If you found it helpful, don’t forget to like and mark it as a solution.

Best regards,

Dawood Mirza

4

Use liquid inside collection template:

Variant 1.

Case collection.handle

When ‘man’

//Your css styles

…

Endcase

Variant 2.

Find a collection page wrapper, inside collection template.

Add there a class with liquid:

If collection.handle == ‘man’ class-name-for-man elsif … Endif

In CSS add .class-name-for-man with you color for mans collection.

5

There’s no option for me to create a template!

6

Unfortunatley this does not work.

The css applies for all collection pages. For example, if i were to add:

'h2 {

font-size: 13px;

)’

to the mens collection page, this would also show up in the css box in the womens collection page.

7

What theme are you using??

8

Brooklyn

9

Brooklyn version 17.3.0

10

Read about CSS selectors.

You need to understand selectors: id, nested element.

On the screenshot above, @Ahsan_ANC underlined a parent’s id.

So, to select any element inside body tag with id specific to the collection (see underlined id) you need to write:

#women-39-s-closing h2 {

Color: red;

}

Repeat css with that principle for all collections you need to customize.