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.
21

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

22

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

23

thank you so much for your help!

24

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

25

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 

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

Hi!

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

https://tyrell.shop/collections/all

27

I can see its working fine.

28

But it did not work for my shop.

That is another shop I wanted it to be like

My shop is www.riellibrand.com

29

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

30

Sure, how is it possible?

31

add in layout->theme.liquid before

Change image url to your image, it will work on all pages

32

Thanks so much! It worked :slightly_smiling_face:

33

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!

34

No. Never add anything that isn’t absolutely vital right at the top under the tag.

Only the most important code goes right under the 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.

35

Hi Jasoliya

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

36

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?

37

HI @regine2

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

you have to set css for that section only

38

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

39

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

40

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