Palo Alto Theme - Adding CSS to Product Card Unordered Lists Only

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Palo Alto theme encountered an issue where CSS applied to remove bullets and margins from product size variants was unintentionally affecting the mobile navigation and sort list.

Original Problem:

  • CSS targeting all <ul> elements removed styling from product cards but also broke mobile nav and sort functionality

Solution Provided:
A community member suggested adding parent class selectors to isolate the CSS scope, such as:

  • .collection__products ul for product-specific styling
  • ul.collection__filter-tags or .collection__sort-bar .collection__sort__option-wrapper ul for other elements
  • Option to target specific collection templates using div#Collection--template--[ID]

Outcome:
The issue was resolved by adding the parent class .collection__products before the ul selector, successfully limiting the CSS changes to product cards only without affecting other site elements.

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

Hi everyone!

I’ve been playing around with the CSS as I have a size variant that was showing up bulleted and with a margin. Below is the code I have put in.

This works great and has solved the issue on the Product Cards, however it is affecting my Mobile Nav and Sort list.

Is there a way to isolate the ul to just be for the products? I don’t want anything else in the site to be affected. I’ve tried putting the CSS only on the section but the Sort list still gets affected.

You can see what’s happening here https://eastend-wardrobe.myshopify.com/collections/all

Thank you!

Screenshot 2024-01-11 at 7.03.26 am.png
Screenshot 2024-01-11 at 7.03.26 am.png676×442 19.4 KB

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  column-gap: 10px;
}
1 Like
2

Hi @angelicahidalgo

Add some parent names on the or wrapper ul. Example:

ul.collection__filter-tags.collection__filter-tags--default {}
.collection__sort-bar .collection__sort__option-wrapper ul {}

If you like to show only in the that specific section of the collection then you add the collection template name with number.

div#Collection--template--17257420947676__main {}

I add flex-direction to your code.

Made4uoRibe_1-1704918580474.png
Made4uoRibe_1-1704918580474.png218×147 3.17 KB

Made4uoRibe_2-1704918587261.png
Made4uoRibe_2-1704918587261.png256×345 31.7 KB

But if you like in horizontal you need to adjust the width.

Your code is right but there is a lot of ul tag in the website. So you need to be specific which ul you like to call.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Woo hoo! That worked thanks so much! :blush:

I ended up adding the parent as you said and it worked perfectly.

.collection__products ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  column-gap: 10px;
}
1 Like