Solved

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

ScinteraShopy
Shopify Partner
40 3 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

Accepted Solution (1)

GemPages
Shopify Partner
5588 1261 1203

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.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 8 (8)

dmwwebartisan
Shopify Partner
12280 2546 3694

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ScinteraShopy
Shopify Partner
40 3 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

suyash1
Shopify Partner
9078 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
ScinteraShopy
Shopify Partner
40 3 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

 

suyash1
Shopify Partner
9078 1129 1479

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

Put afterpay code after price code in product template.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
dmwwebartisan
Shopify Partner
12280 2546 3694

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

GemPages
Shopify Partner
5588 1261 1203

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.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ScinteraShopy
Shopify Partner
40 3 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!