Adding CSS Gradient Background from gradient generator.

Store Design
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 :slight_smile:

2

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.

3

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

4

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

5

I’m not exactly sure where to add the code. Should it be added directly under the tag?

6

You can add before tag on file.

7

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?

8

Sure, Skype (jasoliya.brijesh).

Also send me your store URL so i can check

9

Added you. Did you get my message?

10

No, send me your id

11

GTory

12

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?

13

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

14

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?

15

Send your store url

16

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

17

Its looking good now what do you want to do?

18

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?

19

yes you can chaneg css here that only work for home page:

{% if template contains 'index' or template contains 'product' %}

{% endif %}

You can get color from this site

20

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