how to give afterpay access to shopify

hi there my name is don bellatini with,afterpay merchant services and today i'm,going to show you how to add afterpay,messaging to your shopify store let's,dive right in,so as you can see i'm in my shopify,admin dashboard here and i've navigated,to the themes section over here on the,left,so the theme we're going to be working,in is this debut after pay messaging,theme so first thing i'm going to do is,i'm going to click actions and edit code,great so from here uh this takes us to,all of our theme files for the current,theme we're working on and the file that,we do want to focus on today is this,theme.liquid file,so this is where we want to be so we're,going to go ahead and scroll all the way,down to the bottom here and place our,cursor right here at the end of the file,next we need to go get the afterpay,messaging scripts,so we will go to our after pay online,developer docs i'm going to click on,documentation,from here we can see all the different,platforms that we support we're going to,focus on shopify for today and go to the,after pay messaging section,great so what we want to focus on right,here is uh all of this bread and butter,right here these are our after pay,messaging scripts strictly for shopify,this helps us place after pay messaging,on product and cart pages so what we'll,want to do is go ahead and copy the,clipboard,navigate back to the theme.liquid file,that we were working on and we're going,to go ahead and paste those,after pay messaging scripts,great so we've got a list of variables,here and a link to our main script file,don't need to worry about too much of,this right now what we're going to do,next is click save,great so the next thing we want to do is,preview this and see it in action so i'm,going to go ahead and right click,preview to open this in a new tab,so next we'll want to navigate to a,product page to see if our afterpay,messaging is indeed displaying so i'm,going to go to catalog and crew sucks,this is just a test store so i don't,have actual images or real products but,great as you can see we're on a product,page we've got the product price for,this crew socks product and we've got,after pay messaging displaying correctly,underneath it with the correct,installment amount we've got the learn,more modal pops up and works that's,great,awesome so our product page looks great,uh next thing we want to do is we want,to confirm that after pay messaging is,also displaying on our cart page so,we're going to go ahead and navigate,over to the cart which i already have a,couple products in there,awesome we've got after pay messaging on,both product and car pages displaying,the way we want,so this store is essentially up and,running with afterpay messaging,so one thing i do want to call out is,that your store may be a little bit more,custom or use different naming,conventions and,our afterpay messaging scripts may not,be so friendly out of the box so i do,want to show you how to update,uh where the afterpay messaging will,display on your afterpay product or,excuse me on your store's product pages,um just to kind of demonstrate so let's,say you want the app to pay messaging,underneath these add to cart buttons,great simple enough,so what i'm going to do is i'm going to,right click,and i'm going to click this inspect,button right here this opens up the,developer tools for google chrome,specifically could be different based on,the browser you're using,so i know this might be a little bit,scary to look at if you don't have any,html or coding experience,but basically we just want to move our,cursor around to see,which element we want to place after pay,messaging underneath so it looks like,this product form item right here,this looks like actually we're going to,go with the product form controls group,right up here so we want after messaging,to display directly underneath this so,we're going to go ahead,and copy this class,value right here,we're going to copy this we're going to,navigate back to the theme.liquid file,and the variable the line of code,specifically that we want to focus on is,this after pay product selector line,right here so what we're going to do is,we're going to delete,the two backslashes at the beginning of,that statement we're going to replace,the value,with the value that we just copied from,the developer tools,we don't need these extra bits right,here so we just want to focus on this,initial class name,and just a quick css crash course in,order to specify this as a class we're,going to put a period in front we're,going to click save,and then let's go see it in action let's,navigate back to our product page we can,close these out now and click refresh,great now we've got afterpay messaging,displaying underneath the cart add to,cart buttons in a different spot that we,specified and everything is functioning,properly,all right that about does it for uh,adding after to a shopify store thanks,for watching

Congratulation! You bave finally finished reading how to give afterpay access to shopify and believe you bave enougb understending how to give afterpay access to shopify

Come on and read the rest of the article!