Solved

Adding CSS Gradient Background from gradient generator.

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 🙂

Accepted Solution (1)

Jasoliya
Shopify Expert
4808 621 1217

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 47 (47)

Jasoliya
Shopify Expert
4808 621 1217

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
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 🙂

Jasoliya
Shopify Expert
4808 621 1217

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Gerius
Tourist
20 0 1

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

Jasoliya
Shopify Expert
4808 621 1217

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
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?

Jasoliya
Shopify Expert
4808 621 1217

Sure, Skype (jasoliya.brijesh).

Also send me your store URL so i can check

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Gerius
Tourist
20 0 1

Added you. Did you get my message?

Jasoliya
Shopify Expert
4808 621 1217

No, send me your id

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Gerius
Tourist
20 0 1

GTory

Jasoliya
Shopify Expert
4808 621 1217

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 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
AlohaAmerica20
Visitor
3 0 0

Thank You, You are very helpful! Have A Wonderful Day & Happy Thanksgiving!

Jasoliya
Shopify Expert
4808 621 1217

Hi @AlohaAmerica20 

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  

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
hansen
Visitor
3 0 0

thank you so much for your help!

regine2
Tourist
3 1 1

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?

Jasoliya
Shopify Expert
4808 621 1217

HI @regine2 

you can follow this link if want to set image as background.

you have to set css for that section only

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
regine2
Tourist
3 1 1
hi,

thank you for helping me. but this is not what I want. In the theme
settings are diffrent color sections. and there you can choose a gradiant
for acent 1 types...later you can choose this type of color or gradiant for
a small text box section.

I want to have a picture backround in this small text box section. Is this
possible?
And another question, where to upload the picture and what is with the path?

Tank you and sorry I am not good in english language
best wishes
Regine
Jasoliya
Shopify Expert
4808 621 1217

send me store url will check

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
hansen
Visitor
3 0 0

I am trying to get this on all of my pages but only staying on home page? code works just on home page tho

Puffnstuff
Shopify Partner
12 0 1

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.

KYG
Visitor
3 0 0

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.


 

Jasoliya
Shopify Expert
4808 621 1217

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 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
KYG
Visitor
3 0 0
How can I add bottom-border 1 px to the navigation menu? My header and body
are white and when I scroll down I can't distinguish them?
Jasoliya
Shopify Expert
4808 621 1217

Send your store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
aribaril97
New Member
5 0 0

Hi! how do you do this on the product page? or the entire website.

Jasoliya
Shopify Expert
4808 621 1217

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 %}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
aribaril97
New Member
5 0 0
Hi!

I wanted my collection page like this but I cannot get it (linked below)

https://tyrell.shop/collections/all


Jasoliya
Shopify Expert
4808 621 1217

I can see its working fine. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
aribaril97
New Member
5 0 0
But it did not work for my shop.

That is another shop I wanted it to be like


My shop is www.riellibrand.com
Jasoliya
Shopify Expert
4808 621 1217

They have image in background not color. so you want image in background ?

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
aribaril97
New Member
5 0 0
Sure, how is it possible?
Jasoliya
Shopify Expert
4808 621 1217

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
aribaril97
New Member
5 0 0
Thanks so much! It worked 🙂
sbar
Explorer
53 0 18

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!

AlohaAmerica20
Visitor
3 0 0

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

www.alohaamerica.us

Jasoliya
Shopify Expert
4808 621 1217

Its looking good now what do  you want to do? 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
AlohaAmerica20
Visitor
3 0 0

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?

lifestylesweets
Visitor
1 0 0

Hi Jasoliya

how would I change the gradient on all my product pages after my home page? where would I place the coding?

Voltampz
New Member
5 0 0

Hi Jasoliya i  changed its work but gradient angle coming from right left i want top to bottom how it is possible ? 

mudanna
Tourist
13 0 1

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

korbill11
Visitor
1 0 0

Hi Jasoliya, I tried this code but it didn't work for me. Can you please help me

snk729
Shopify Partner
22 0 6

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

Jasoliya
Shopify Expert
4808 621 1217

hi send me preview url will check and keep added code 

Best regard 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
snk729
Shopify Partner
22 0 6
snk729
Shopify Partner
22 0 6

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

snk729
Shopify Partner
22 0 6

I havent heard back from you.. can you please help me with this?

 

Zeyrex
Visitor
1 0 0

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,