Changing product card colour on different pages of the website

Changing product card colour on different pages of the website

Nightwatch025
Visitor
1 0 0

Hi! 

 

I would like to have a different product card colour for different pages of the website - I am using different layouts on different pages and it looks weird for one of the layouts to have the product card that colour.

 

I am using the Studio theme.

 

Yes, there is an option to select the theme colour manually on each of these pages (Home page, Product page), but every time I change the theme colour manually, it automatically changes it across all pages! I would like a different product card colour on the products when they are displayed on the Home page vs when they are displayed on the Product page.

 

Please let me know if there is a way to do this or if I can alter the code for my Product page only (and where to find this).

 

Thanks so much for your help, really appreciate it! 

Replies 2 (2)

suyash1
Shopify Partner
9540 1192 1531

@Nightwatch025 - using custom css it can be done, it will need multiple css properties and those are needed to set separately for separate pages.

May need little liquid code editing too , may be to add required id/classes.

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

BSS-TekLabs
Shopify Expert
482 148 167

Please follow these steps:

BssTekLabs_0-1718423637246.png

- This will contain the code files for the pages. You can customize the CSS for each file inside this.

- For example, if you want to customize the colors in the collection, you can search for the keyword 'collection'. The files related to the collection will be displayed. You can go into the corresponding files to customize the CSS for each page.

BssTekLabs_1-1718423799394.png

- Similarly, for the product file, if you want to make changes only in the product file, it will be in the main-product.liquid file.

BssTekLabs_2-1718423979712.png

- Good luck! If you find this answer helpful, please press 'Like' and mark it as 'Solution'. Thank you.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency