I would like to add a CSS gradient background generated from a website like this -> https://mycolor.space/gradient3 to specific pages such as the home & product pages on the website and be able to change and edit them to different colors at will. I would also like to change the colors of certain elements, such as Add to Cart button & the search bar background to the same gradient background if at all possible.
Does anyone know how to do either of these things?
Thanks in advance :)
Solved! Go to the solution
This is an accepted solution.
Hi,
You can change background color of home and product page by following:
Add this in theme.liquid
{% if template contains 'index' or template contains 'product' %} <style> body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);} </style> {% endif %}
You can change change color like this for search and add to cart button by adding css in theme.scss
Let me know if you need help.
Where exactly in theme.liquid do I add that code?
Edit: I'm also using the Venture theme, which has both "theme.liquid" files as well as "theme.scss.liquid" files. Should this code be added into the theme.liquid file that you first mentioned or the theme.scss file.
Thanks for your reply by the way :)
Add this code in theme.liquid
{% if template contains 'index' or template contains 'product' %} <style> body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);} </style> {% endif %}
This code is for background color changes.
Send me store url so i can check if any problem
Sure, Skype (jasoliya.brijesh).
Also send me your store URL so i can check
User | Count |
---|---|
498 | |
208 | |
130 | |
82 | |
43 |