Afterpay and Zippay widget on product pages

Solved
Highlighted

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!

1 Like
Highlighted
Shopify Partner
887 120 156

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted

Success.

Shopify Expert
2943 504 678

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted

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!

0 Likes
Highlighted

Success.

Shopify Expert
2943 504 678

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted

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

0 Likes
Highlighted
Shopify Expert
2943 504 678

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

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!

0 Likes
Highlighted

Success.

Shopify Expert
2943 504 678

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted

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

0 Likes