BACK

how to implement gradient colors in shopify

How to create a gradient background on your shopify store | EASY NO CODE (mostly) hello welcome to t

MikeLearns

Updated on Mar 25,2023

How to create a gradient background on your shopify store | EASY NO CODE (mostly)

The above is a brief introduction to how to implement gradient colors in shopify

Let's move on to the first section of how to implement gradient colors in shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

How to create a gradient background on your shopify store | EASY NO CODE (mostly)

hello welcome to the video uh today i'm,going to tell you how to get this sort,of a gradient on your shopify store this,gradient background,um before i do that,don't copy this store it's a very bad,store,why i'm shooting this video is because,i'm literally taking the code off of my,website about how to do this gradient,but i will demonstrate it so you can see,here it starts with a light pink and,then as you go down the page it goes,from to a purple,and then to a blue and then to a green,a lighter green and then a yellow and,then a red and then a,pink again okay so that's the gradient,background i would highly suggest not,doing this maybe you want to do it very,subtly but i just find it just does way,too much there's too much going on in,the store so i'm taking it off my store,uh but in the meantime i'll tell you how,to do it if you want to do it uh subtly,or something if you want to do it crazy,sure here you go,um there's an article here shopify i,just looked up how to do,how to do uh what i look up,gradient background shopify and then,this page comes up,okay,here's the page,adding css gradient background from,creating generator sure there's a page,so they give you the code here,you can go in and copy this,and you can see these numbers these are,these will be your colors so you can,change these based on your gradient,generator so you can use any gradient,generator you want this is a good one,css css gradient.io you pick your colors,do whatever i want to pick this oh you,want to add a color i want to add a,color here but this color i want to be,more red and this color i want to be,let's just try to like kind of replicate,the one i had before on my side already,pink whatever whatever so you go through,and one of these was green so we'll make,it like that,and this was i guess should be lighter,and this was a lighter blue as well,so something like that you know,obviously i would make this a lot nicer,um but then what you can do is you can,color the copy these hex codes,and then you can replace them,to where these ones are,you know these colors replace them with,with the colors you get from your,gradient generator okay so then,as you're doing that you will copy and,you will paste it in your shopify code,um so let's go in here we're on themes,our online store themes and then we'll,click actions,edit code,wow five minutes goes by very fast i'm,sorry i'm trying to go very fast trying,to go as fast as i can,edit code and then you want to click on,it would come up,a little bit slow when i record my,screen and my camera and everything at,the same time,you click on lip liquid theme editor or,something like that,wow what's going on,just as i go deposit okay so then you go,to theme liquid,click on theme liquid and you go to the,bottom,of the code and you add in you paste in,what you just got from the shopify thing,there,so you copy this,command a nope not command a,you copy this,command c,you go to your shopify you start a new,line command v,and you change your colors with the ones,you just got okay so in my case,i'm actually going to delete this part,because i don't want that gradient so,we'll press delete,and press save,yeah if you want to change it you can,change the percentages on it because you,can see here,it gives you percentages,oh well mine gave,mine had percentages if you want to go,back in the video and look at the code,that i just deleted i mean has,percentages you can change the,percentages and change based on changes,the colors,where the colors come in based on the,percentages so you can play around with,the colors you can play around with,percentages um but yeah again i wouldn't,recommend doing this but if you really,want to here's a quick video on how to,do that thanks for watching i hope this,helps you,have a good day bye

Congratulation! You bave finally finished reading how to implement gradient colors in shopify and believe you bave enougb understending how to implement gradient colors in shopify

Come on and read the rest of the article!

Browse More Content