Shopify themes, liquid, logos, and UX
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:
Odd location:
Desired location on Product page:
Solved! Go to the solution
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.
Please share your product Template code I will check and provide a solution here.
Thanks!
Hi dmwwebartisan,
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?
Sorry, just trying to help.
Edward
@ScinteraShopy - did you add any afterpay code manually to template file? or in page builder?
Hi suyash1,
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
@ScinteraShopy - one option is by moving the code location, can not guarantee but might work.
Put afterpay code after price code in product template.
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!
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.
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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024