Hello @wiw
To change the button colors on a specific collection page and have those styles flow through to the product pages and the cart, you'll need to carefully target the buttons in both the collection page and on product pages using CSS. Here's how you can do this step by step.
1. Target Buttons Specifically on the Collection Page
You’ll want to use CSS selectors that specifically target buttons on the collection page but not elsewhere (like the product page or cart).
1.1 Add a Custom Class to Your Collection Page
Since your collection page was created with no header or footer, it might be using a unique template. Let’s assume your collection page uses a custom template or a specific class to identify it.
If your page has a unique class (e.g., .collection-page or similar), you can target buttons on that page specifically.
You can add a class to the <body> of the collection page like this in theme.liquid:
<body class="{{ template.name }}">
Now your collection page might have a class like collection-page (depending on the template).
1.2 Use the Class to Style Buttons on the Collection Page
Add the following CSS in your base.css or theme.css file under Assets.
/* Style buttons on the collection page */
.template-collection .button {
background-color: #1a1a1a; /* Your custom button color */
color: white;
border-radius: 6px;
padding: 10px 20px;
font-size: 14px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.template-collection .button:hover {
background-color: #333333; /* Your custom hover color */
transform: translateY(-1px);
}
This will change the button color only on the collection page.
2. Ensure the Button Styles Flow to Product Pages and Cart
To ensure the button styles flow from the collection page to the product pages and cart, we will make sure that the button styling is global, not just specific to the collection page.
2.1 Global Button Styling
Use this CSS to ensure your buttons have consistent colors across the site (including product pages and the cart):
/* Global button styling */
.button {
background-color: #1a1a1a; /* Same as collection page */
color: white;
border-radius: 6px;
padding: 10px 20px;
font-size: 14px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.button:hover {
background-color: #333333; /* Same hover color */
transform: translateY(-1px);
}
2.2 Cart and Product Page Specific Adjustments
If you want to ensure that the product page and cart pages have buttons styled a little differently or want to be more specific, you can target them using page-specific selectors.
For Product Pages, use:
.template-product .button {
/* Additional styles for product page button */
background-color: #1a1a1a;
}
.template-product .button:hover {
background-color: #333333;
}
For Cart Pages, use:
.template-cart .button {
/* Additional styles for cart page button */
background-color: #1a1a1a;
}
.template-cart .button:hover {
background-color: #333333;
}
3. What if the Buttons Still Don't Match?
If the buttons still don’t appear as expected, you might want to check:
. Button Markup: Ensure the buttons are using the correct <button> or .button class.
. JavaScript interference: Ensure that no JavaScript dynamically changes button colors or overrides the CSS you've added.
Final Notes:
. Ensure that global button styling is set up for consistency across the store.
. You can also adjust the colors per button class (e.g., .button--primary or .button--secondary) if your theme uses multiple button styles.
. Use page-specific classes (e.g., .template-product, .template-cart) for more targeted adjustments.
Thank you 😊
Was I helpful?
❤
APPS BY US :
Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections
Here
