Afterpay and Zippay widget on product pages

[rockawaydigital]

Hi there!

I was wondering how to get afterpay and zippay displayed the same way as on this website: https://www.brasnthings.com/liquid-stn-short-pj-set-navy-15.html

I currently have it like this, but would like to show both options and have it more visually appealing like the example above.

https://www.fyeyewear.com/products/tortoise-shell-sunglasses

Hope someone can point me in the right direction, thanks!

[KetanKumar]

Hello, @rockawaydigital 

Thanks for post

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like.

[Jasoliya · Accepted solution]

Hi @rockawaydigital 

Follow this:

1. Open section->product-template.liquid file and find your after pay <p> or find 'afterpay-paragraph'

now add below code just next to </p>.

    <div class="z_pay">
        <img src="https://media.brasnthings.com/wysiwyg/website_elements/pdp/zip.png" alt="ZipPay">
        <p>Own it now, pay later</p>
    </div>

Note: upload this zip image to your severer and change url.

Now add this css in Asset->theme.scss file at bottom:

.afterpay-paragraph{width: 50%;display: inline-block;}
.z_pay{width: 50%;float: right;}

[rockawaydigital]

hi @Jasoliya  thanks so much for your reply!  I don't think I have any code for afterpay in the product template, as I have followed this guide to get it on the product page; https://afterpay-online.readme.io/docs/shopify-aunz-afterpay-product-page-display. But it seemed to have worked anyway! Is there a way to get it a bit lower and maybe even add those grey lines as on the example as well?

thanks so much, really appreciate it!

[Jasoliya · Accepted solution]

Yes, after pay is loding from js file so we have not its html code. but you can do by this css: add in theme.scss file 

.template-product .product__price{border-bottom: 1px solid #e9e9e9;margin-bottom: 32px;}
.template-product .product-form{border-top: 1px solid #e9e9e9;}

[rockawaydigital]

@Jasoliya thank you so much! The lines look great, do you think it's possible to have some space between the price and the first line?  And also for the widget to appear smaller?

[Jasoliya]

Add this css for space next to price:

.template-product .product__price{    padding-bottom: 15px;}

Also which widget want to make small send let me know exact 

[rockawaydigital]

hi @Jasoliya that worked perfectly, thanks so much!

I think everything closer to the size of the ones one here would be really nice: https://www.brasnthings.com/liquid-stn-short-pj-set-navy-15.html

is it possible at all to have the afterpay one displayed the same as on there as well? Just the logo at the top and the instalments below look a lot neater I reckon!

thanks so much for your time, really appreciate it!

[Jasoliya · Accepted solution]

No we cant set after pay logo in top as logo generating next to text and we have not code of this part, but you can add this css and make it look nicer then now.

.template-product .afterpay-paragraph,.template-product .z_pay p{font-size:13px;}
.template-product .afterpay-paragraph .afterpay-logo{    display: block;}

[rockawaydigital]

That's looking great now, thank you so much!!

[Zip]

Hey there! 

Thanks for your interest in getting the Zip widgets integrated onto your Shopify theme. 

You can find our guides for integrating the Zip widgets below. If you have any questions please don't hesitate to reach out to our engineers at integrations@zip.co and we can assist. 

Australia - https://zip-shopify.api-docs.io/v1/integration-steps

New Zealand -https://zip.co/nz/shopify-integration/

UK - https://zip.co/uk/shopify-integration/

[storefront]

Hi there,

I hope business is going well for you! I came across your Afterpay entry as I am doing conducting research on Buy Now Pay Later options. By the way: I notice the store you offered as example (brasnthings) appears to have stopped offering pay later options. I wonder why they ceased that program? In any case, I wonder if you would mind assessing the adoption of these buy now pay later options; have they worked for your bottom line? Any observations or pointers will be much appreciated.

D

[CRENEW]

Hello, do you know to add the Afterpay Messaging to the Cart page also? I've already added it to the product pages and it's working I just can't work out how to add to the Cart page. I have tried via cart.liquid with no luck. 

[Jasoliya]

Check their code for cart page, may be its separate code for cart page so add in Section->cart.liquid file.

[Tanaya]

Hi there,

am i able to hire you to do this for me?

Thank you

[KetanKumar]

@Tanaya 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Tanaya]

Hi!

Url is https://totslittlecloset.com/

Thank you so much.

[KetanKumar]

@Tanaya 

great thanks for quick url can you please share more details what do you want exctaly

[Tanaya]

I am looking for a more uniform and neat display for my payment options on the product page. I would love something like this https://gooandco.com/products/star-wars-onesie?gclid=CjwKCAjw2ZaGBhBoEiwA8pfP_gGYUCB7hRI2xM0xWRGrOtg...

Is this something you can help me with? 

Thank you

[KetanKumar]

@Tanaya 

do you have like this?