Adding CSS Gradient Background from gradient generator.

Solved
Tourist
20 0 1

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 :)

0 Likes

Success.

Shopify Expert
2458 414 518

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.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Tourist
20 0 1

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 :)

0 Likes
Shopify Expert
2458 414 518

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 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
20 0 1

I'm not exactly sure where to add the code. Should it be added directly under the<head> tag?

0 Likes
Shopify Expert
2458 414 518

You can add before </head> tag on file.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
20 0 1

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?

0 Likes
Shopify Expert
2458 414 518

Sure, Skype (jasoliya.brijesh).

Also send me your store URL so i can check

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
20 0 1

Added you. Did you get my message?

0 Likes
Shopify Expert
2458 414 518

No, send me your id

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes