Shopify - Amwal Promo
This guide explains how to embed the Amwal Promo Widget on your Product and Cart pages in your Shopify store.
π§© What is the Promo Widget?
The Amwal Promo Widget gives your customers a quick preview of installment options before checkout, helping increase conversions.
β
Prerequisites
- Your store is integrated with Amwal.
- You are comfortable editing Shopify theme files (or use a developer).
π Where Can I Show the Widget?
- Product Page β Below the price or add-to-cart button.
- Cart Page β Near the checkout button or cart total.
π Steps to Add Amwal Promo to Shopify
To embed the Amwal promo on the Product and Cart pages of your Shopify store, follow these steps carefully.
-
From your Shopify admin, go to:
Online Store > Themes > You current theme > Click on the ... icon > Choose Edit code -
In the left menu > SPOTLIGHT > Snippet > Create a file amwal-installment-promo.liquid with the following code
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/checkout/checkout.esm.js"></script> <amwal-widget id="amwal-widget"></amwal-widget> {%- assign currency = cart.currency.iso_code -%} <script> document.addEventListener('DOMContentLoaded', function() { const widgetConfig = { installmentsCount: 6, price: {{ installment_amount}}, currency: "{{ currency }}", }; const widget = document.getElementById('amwal-widget'); if (widget) { widget.config = widgetConfig; widget.showSocialProof = true; widget.showPopularBadge = true; widget.showMonthlyPayment = true; widget.showGreenBorder = true; widget.locale= "{% if request.locale.iso_code == 'ar' or request.locale.primary == 'ar' %}ar{% else %}en{% endif %}" widget.socialProofText = "β Trusted by 50,000+ happy customers"; } else { console.warn('Amwal widget element not found'); } }); </script>
Manual Snippet Installation
To display the promotion on the product and cart pages, you'll need to embed it manually. Navigate to the left menu, then go to SPOTLIGHT > Sections, and open the following files.
IMPORTANTKindly be careful when inserting the following code into the core theme files..
For the Product Page, open the main-product.liquid file and search for when 'popup'.
Then, insert the following code just before that line (or wherever you'd like the Amwal promo to appear on the product page).
{% if product.variants.size > 1 %}
{% assign price_cents = product.selected_or_first_available_variant.price %}
{% else %}
{% assign price_cents = product.price %}
{% endif %}
{% assign installment_amount = price_cents | money_without_currency | replace: ',', '' %}
{% render 'amwal-installment-promo', installment_amount: installment_amount %}
For Cart Page, open main-cart-footer.liquid file, and search for id="cart-errors".
Then, insert the following code just before that line (or wherever you'd like the Amwal promo to appear on the cart page).
<!-- Start adding Amwal Installment Promotion -->
{% assign installment_amount = cart.total_price | money_without_currency | replace: ',', '' %}
{% render 'amwal-installment-promo', installment_amount: installment_amount %}
<!-- End adding Amwal Installment Promotion -->
Test Your Integration
- Visit a product page and cart page on your storefront.
- Confirm that the widget appears and shows correct installment information.
- Test on mobile to ensure responsiveness.
Updated 16 days ago