how to convert save to sale icon on shopify supply theme

what's up guys today i've got a very,quick and easy tutorial but it's,something that i think a lot of people,want to do and that's adding the payment,icons under the add to cart button these,are the same icons that you would,usually see in your shopify store in the,footer,but it's extremely easy to just copy,these and paste them into a custom,liquid section and move that anywhere,you want inside this product info,section under the buttons or,maybe,lower down,anywhere you want right,so i'm just going to show you how to do,that really quickly and easily and i'm,going to show you two methods the first,method is going to be for any theme,but it isn't as clean as the second,method the second method is mainly for,dawn theme but you might be able to work,out how to do it for your own theme as,well okay so let's begin i've removed,those icons for now so that we can start,at the same point the first method that,i want to show you is kind of the most,simple but not the cleanest method and,that is simply to open up your product,page in a new tab,scroll down to the footer,right click,somewhere between these icons or on an,icon doesn't really matter and click,inspect,and then when the chrome,inspector opens up you want to find,the ul the ul that is containing,all of these payment icons so here's the,ul it's ul class list list payment and,then inside we have list item list item,list item ul stands for unordered list,and it's just a container of a list,right what you can do is highlight this,in chrome inspector and just hit control,c or command c to copy that and this,will copy this and everything that's,inside of it including the svg icons so,these aren't images they're actually,svgs which means that it's like an image,but it's in code so we can just copy the,code of these images right,and we're just going to go back to our,theme editor click add block custom,liquid go into that and hit paste,and you should immediately see all your,payment icons showing up we're going to,drag them under the buy buttons and,the last thing you might want to do is,to align them somehow differently,currently they're right aligned you may,want them centered or you may want them,to the left so to change that,what we're going to do is,add a style attribute inside of this,open ul and then we're going to add,style,and,to quotation marks like this and we're,going to write justify,content,flex start,and then this semicolon and that's going,to left align them or if you want them,centered then instead of flex start,you're going to write center,now this was the kind of quick and dirty,way to do this in reality i wouldn't do,this because basically when you add a,payment method if you add a payment,method to your store through shopify,settings,it's not going to show up here because,we've just copied and pasted the code,that's from the footer so the best thing,to do would not be to copy the code that,is output here in the chrome inspector,the best thing to do would be to copy,the original code that is part of your,theme so to do that you're going to need,to find this footer code right so let's,click on these three dots and go into,edit code open that up in a new tab and,now i'll tell you where it is in dawn,theme in dawn it's simply a file called,footer.liquid and in any of the free,shopify 2.0 themes they're all based on,dawn so click on footer.liquid and now,you can command or control f,to search for the word payment,and,you're going to find,your payment icons so here it is here is,that,ul that unordered list and here's each,list item only here as you can see,there's just one because they're being,output as a loop so it's it's saying,that for every payment type,in your enabled payment types output a,list item with,an icon so now it's a lot cleaner all we,need to do is copy this ul,and once again because this is a custom,liquid block and it processes a liquid,we can just paste in this liquid and now,it's a lot shorter and a lot cleaner and,it's also dynamic so when you enable a,new payment type,through your shopify settings that new,payment type is going to appear here and,once again just if you want to align it,differently you're just going to add a,style tag and you're going to say,justify,content,center,for example or justify content flex,start or if you're on a different theme,and it's not right aligned then you want,to right align it then it's going to be,flex end,so that's it guys that's all for today's,tutorial i told you it was going to be,quick one last thing i want to show you,i'm going to do some shameless self,self-promotion i hope you don't mind but,i think that you'll like this i actually,built this section called complete the,look and it lets you basically add,products that are either in the same set,in the same color any kind of related,products right and allows you to add,buttons so that people can immediately,add that to cart and make that impulse,purchase okay so if you're interested in,that then simply go to,edcodes.gumroad.com,and check out this related products,section complete the look shopify add-on,it's got some examples here and when you,buy it it comes with a pdf guide and an,instructions video on how you can add,this to your store so that's all for,today guys i hope you found value from,the tutorial and i hope you'll check,this out and maybe find this useful as,well let me know if you have any,questions and see you next time

Congratulation! You bave finally finished reading how to convert save to sale icon on shopify supply theme and believe you bave enougb understending how to convert save to sale icon on shopify supply theme

Come on and read the rest of the article!