Shopify themes, liquid, logos, and UX
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.
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
I'm not exactly sure where to add the code. Should it be added directly under the<head> tag?
You can add before </head> tag on file.
Added the code, saved it, and refreshed my theme but the changes are not showing and the background is still the same. I added you on Skype. Are you available to do a screen share over Skype so that I can show you what I'm doing?
Sure, Skype (jasoliya.brijesh).
Also send me your store URL so i can check
Added you. Did you get my message?
No, send me your id
GTory
yes you can chaneg css here that only work for home page:
{% 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 get color from this site
Thank You, You are very helpful! Have A Wonderful Day & Happy Thanksgiving!
Add this css to asset->theme.scss file at bottom
body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
Note: you have to change gradient color
thank you so much for your help!
Hi Jasoliya,
may you could help me. I saw this answer of you and I have a problem in a similar topic.
I would like a picture as backround instead of a color. Not in total just in some areas of my landing page, where I use normaly the accent 1 color.
Is this possible?
HI @regine2
you can follow this link if want to set image as background.
you have to set css for that section only
send me store url will check
I am trying to get this on all of my pages but only staying on home page? code works just on home page tho
No. Never add anything that isn't absolutely vital right at the top under the <head> tag.
Only the most important code goes right under the <head> tag, for example, the order in which you want your page to load and if you're instructing it to defer scripts or maybe connect with Google Analytics etc. All other information that is not detrimental to how efficiently and in which order you are having elements run in will just slow your site down and earn you less credit from Google when it crawls your site. Just because your adding it at the bottom does not mean it will be forgotten, simply just not essential for preloading or deferring & essential running scripts.
Hello there what if I want to make a gradient color for background of the main menu? Could you please help me with the code?
@Jasoliya wrote: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.
Hi @KYG
You can add gradient color in background by this css:
#your_menu_id{ background-image: linear-gradient(red, yellow, green);}
You have to change id base on your menu code. you can also change color
Send your store url
Hi! how do you do this on the product page? or the entire website.
If you want on whole site add this: add in Asset->theme.scss or theme.css file at bottom
body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
if only want on product page , do that:
add in layout->theme.liquid before </body>
{% if 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 %}
I can see its working fine.
They have image in background not color. so you want image in background ?
add in layout->theme.liquid before </body>
<style>
body{ background-image: url(https://cdn.shopify.com/s/files/1/2095/1021/t/14/assets/sunset.png);
background-repeat: no-repeat;
background-size: cover;
}
</style>
Change image url to your image, it will work on all pages
Any idea of how to change buttons to a gradient background? (ex: add to cart) Have been reading these threads but not finding anything too helpful. Thx!
I followed the directions and I went from a dull grey background to a beautiful Gradient!!! Thank you so much Jasoliya! You are very much appreciated!
Let me know what you think of it!
LINK BELOW
Its looking good now what do you want to do?
I would like to test some different color gradients I think!
Would I make those changes via the HTML theme.liquid code? or in the css.liquid file?
Hi Jasoliya
how would I change the gradient on all my product pages after my home page? where would I place the coding?
Hi Jasoliya i changed its work but gradient angle coming from right left i want top to bottom how it is possible ?
Hello Jasoliya, am trying to add a gradient to the background of my shopify website. hvae followed your instructions in the thread exactly but it is not working. any suggestions? also, how do i send my website (not yet publicly available to you) to check? thank you
Hi Jasoliya, I tried this code but it didn't work for me. Can you please help me
Hi this isnt working for me. I am using the Ride Theme. Added it to the theme.liquid page still not reflecting when i preview store
hi send me preview url will check and keep added code
Best regard
need to change overall background to gradient colour and remove space between sections. Never used Ride theme before so don't know where to edit
I havent heard back from you.. can you please help me with this?
Hello, can you help me please as well?
My theme is Ride, and I would like to make the background of the whole website a gradient color like the image in the following link: https://imgur.com/a/lm0vPoj
Thanks in advance,
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024