FROM CACHE - en_header

Afterpay and Zippay widget on product pages

Solved
rockawaydigital
Shopify Expert
82 0 5

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!

Accepted Solutions (3)

Accepted Solutions
Jasoliya
Shopify Expert
4522 586 1138

This is an 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;}

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4522 586 1138

This is an 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;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4522 586 1138

This is an 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;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 26 (26)
KetanKumar
Shopify Partner
33523 3359 11075

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Jasoliya
Shopify Expert
4522 586 1138

This is an 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;}

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
rockawaydigital
Shopify Expert
82 0 5

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
Shopify Expert
4522 586 1138

This is an 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;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
rockawaydigital
Shopify Expert
82 0 5

@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
Shopify Expert
4522 586 1138

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 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
rockawaydigital
Shopify Expert
82 0 5

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
Shopify Expert
4522 586 1138

This is an 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;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
rockawaydigital
Shopify Expert
82 0 5

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

Zip
New Member
2 0 0

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
Excursionist
23 0 12

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
New Member
1 0 0

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
Shopify Expert
4522 586 1138

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

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Tanaya
Excursionist
18 0 5

Hi there,

 

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

 

Thank you

KetanKumar
Shopify Partner
33523 3359 11075

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tanaya
Excursionist
18 0 5

Hi!

Url is https://totslittlecloset.com/

 

Thank you so much.

KetanKumar
Shopify Partner
33523 3359 11075

@Tanaya 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tanaya
Excursionist
18 0 5

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
Shopify Partner
33523 3359 11075

@Tanaya 

do you have like this?

KetanKumar_0-1623585604166.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing