Sign up
Quick links
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Adding CSS Gradient Background from gradient generator.

Solved
‎05-24-2019 12:56 AM
Gerius
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
Reply
‎05-24-2019 02:05 AM
Jasoliya
Shopify Expert
4133 569 1000

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.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Reply
‎05-24-2019 02:08 AM
Gerius
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
Reply
‎05-24-2019 02:15 AM
Jasoliya
Shopify Expert
4133 569 1000

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 Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Reply
‎05-24-2019 02:26 AM
Gerius
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
Reply
‎05-24-2019 02:33 AM
Jasoliya
Shopify Expert
4133 569 1000

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 Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Reply
‎05-24-2019 02:44 AM
Gerius
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
Reply
‎05-24-2019 02:59 AM
Jasoliya
Shopify Expert
4133 569 1000

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 Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Reply
‎05-24-2019 03:32 AM
Gerius
Tourist
20 0 1

Added you. Did you get my message?

0 Likes
Reply
‎05-24-2019 03:34 AM
Jasoliya
Shopify Expert
4133 569 1000

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 Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Reply
Most Liked Authors
View all badges
Quick links
Facebook Twitter Youtube Instagram Linkedin Pinterest
Terms of Service Privacy Policy