AfterPay code added but need to change the position on Products page?

Solved
ScinteraShopy
Tourist
5 0 2

Hello kind and friendly people on Shopify. We have just added AfterPay to our shop: https://scintera.com.au however when viewing the Product pages the AfterPay output appears hard left on the page. Pages are created with GemPages. 

All I want to do is display the AfterPay output just below the Price field on the Product page? Can someone please guide me or assist me?

Kind regards,

Edward

Desired change: 

Change requiredChange required

Odd location:

 

Odd locationOdd location

Desired location on Product page:

Desired locationDesired location

0 Likes
dmwwebartisan
Shopify Partner
5731 1308 1682

@ScinteraShopy 

Please share your product Template code I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ScinteraShopy
Tourist
5 0 2

Hi ,

Thank you. However I'm still a little new at this Shopify gig  

Can you specify what file(s) by name you want OR I am quite ok granting you access to the Shop Admin (your choice). Gotta trust the community.

product.liquid ?

theme.liquid ?

OR maybe this theme_export .zip file at 4.1MB might be what you need?

https://www.dropbox.com/s/ynqdy1x1eobh0j5/theme_export__scintera-com-au-cosmetic02-update-april-12-2...

Sorry, just trying to help.

Edward

0 Likes
suyash1
Shopify Partner
2698 283 446

@ScinteraShopy - did you add any afterpay code manually to template file? or in page builder?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
ScinteraShopy
Tourist
5 0 2

Hi ,

The only place that code has been added is in theme.liquid (at the end of the file) as advised by AfterPay: https://developers.afterpay.com/afterpay-online/docs/shopify-site-messaging

 

<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.0.10) -->
<script type="text/javascript">
// Overrides:
// var afterpay_min = 0.04;            // As per your Afterpay contract.
// var afterpay_max = 2000.00;         // As per your Afterpay contract.
// var afterpay_cbt_enabled = false;   // As per your Afterpay contract; change to true to display Cross-Border Trade artwork (for AU/NZ).
// var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var afterpay_product_selector = '#product-price-selector';
// var afterpay_cart_integration_enabled = true;
// var afterpay_cart_static_selector = '#cart-subtotal-selector';

// Non-editable fields:
var afterpay_shop_currency = {{ shop.currency | json }};
var afterpay_cart_currency = {{ cart.currency.iso_code | json }};
var afterpay_shop_money_format = {{ shop.money_format | json }};
var afterpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
var afterpay_theme_name = {{ theme.name | json }};
var afterpay_product = {{ product | json }};
var afterpay_current_variant = {{ product.selected_or_first_available_variant | json }};
var afterpay_cart_total_price = {{ cart.total_price | json }};
var afterpay_js_snippet_version = '1.0.10';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
<!-- End Shopify-Afterpay JavaScript Snippet (v1.0.10) -->

 

 

I did try to place that JavaScript code in a Liquid block on my GemPages Product template to no avail.

AfterPay have acknowledged that it is displaying in the wrong location. As it should only appear directly under the Price field.

Any ideas?

Thank you ,

Edward

 

dmwwebartisan
Shopify Partner
5731 1308 1682

@ScinteraShopy 

Please find code Sections/vela-template-product.liquid file and after put after pay code .

       <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
                        <div class="proPrice flexRow flexAlignCenter">
                            <span id="ProductPrice" class="priceProduct" itemprop="price">
                                {{ current_variant.price | money }}
                            </span>
                            {%- if product.compare_at_price > product.price -%}
                                <span id="ComparePrice" class="priceProduct priceCompare">
                                    {{ current_variant.compare_at_price | money }}
                                </span>
                            {%- endif -%}
                        </div>

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
suyash1
Shopify Partner
2698 283 446

@ScinteraShopy - one option is by moving the code location, can not guarantee but might work. 

Put afterpay code after price code in product template.

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly

This is an accepted solution.

Hi @ScinteraShopy,

Yes, we can do it easily with GemPages. We already have an article that helps our merchants can integrate Afterpay with GemPages and place it into the right position in the Product module. Please follow these steps on this article: https://help.gempages.net/articles/how-to-adjust-the-position-of-afterpay-widget-on-my-product-page

It will help us solve this question.

Also, if you need any further assistance or concerns, please don't hesitate to let us know via email ( support@gempages.help ) or live chat. Our support team will be happy to help.

If you find my reply helpful, please hit Like and Mark as Solution
Build high-converting stores with GemPages Page Builder
Get connected: Website | Youtube | Community | Partners | Help Center
ScinteraShopy
Tourist
5 0 2

Hi GemPages_Agents, I thought you guys were on a break and that's why I didn't bug you. Thanks for the link. I will investigate immediately!