Adding CSS Gradient Background from gradient generator.

Store Design

Topic summary

A user wants to apply CSS gradient backgrounds (generated from tools like mycolor.space/gradient3) to specific pages (home and product pages) and elements (Add to Cart button, search bar) in their Shopify store, with the ability to easily modify colors.

Solution Provided:

  • Add conditional CSS code in theme.liquid file using Liquid template tags to target specific pages:
    • Use {% if template contains 'index' or template contains 'product' %} wrapper
    • Apply background-image: linear-gradient() with desired color stops
  • For buttons and search elements, add gradient CSS to theme.scss.liquid file
  • Alternative gradient color resources suggested: uigradients.com

Implementation Details:

  • Code should be placed in theme.liquid before the </body> tag (not directly under <head>)
  • For site-wide gradients, add CSS to assets/theme.scss at the bottom
  • The conversation includes code snippets demonstrating the exact syntax needed

Additional Request:
Another user asked about adding a 1px bottom border to the navigation menu for better visibility when scrolling.

Status: The discussion remains open with ongoing troubleshooting, as the original poster needed clarification on exact code placement and offered to share store details for personalized assistance.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
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.

2 Likes
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

1 Like
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.

1 Like
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

1 Like
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!