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

send me store url will check

42

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

43

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

44

hi send me preview url will check and keep added code

Best regard

45

https://indian-gaming-league-official-merchandise.myshopify.com/?_ab=0&_fd=0&_sc=1

password: tewbli

46

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

47

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

48

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,

49

Hi @Jasoliya ,

I have tried above code but its not working for me.

I am trying it on copy of main theme, so nothing goes wrong. But its not working.

Would you be able to help me?

Thanks

50

Jasoliya, I’ve reviewed this thread and tried making suggested modifications; however, I cannot get the gradient to work. I’m using the Gain theme. I am modifying that, but it is not the live website. Does that matter?

This is the code I added to theme.liquid right before :

{% if template contains ‘index’ or template contains ‘product’ %}

body{background-image: linear-gradient(45deg, #85FFBD 12%, #FFFB7D 23%, #985af0 44%, #fffb7d 60%, #85ffbd 100%);}

{% endif %}

Any suggestions? Any help is appreciated!

51

Hi

give me your store link so i can check

Best regard

52

I fixed that issue, which had an overlay stopping the gradient from coming through…

But if you have a moment, I could use assistance with my header. I’m using a mega menu, and I love how it’s set up, but when you click on the menu items, the drop-down menu partially covers the bottom of our logo. The menu text items need to be flushed with the bottom of the logo, and then it wouldn’t be an issue. Sorry, I’m fairly new with all this stuff. Sharing the “not live” account, how do I do this? https://a51p0ie9xf0ea2a1-72138522931.shopifypreview.com If this isn’t something you want or can assist with, just let me know… I don’t want to trouble you.