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

  1. Your store is integrated with Amwal.
  2. You are comfortable editing Shopify theme files (or use a developer).

πŸ“ Where Can I Show the Widget?

  1. Product Page – Below the price or add-to-cart button.
  2. 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.

  1. From your Shopify admin, go to:
    Online Store > Themes > You current theme > Click on the ... icon > Choose Edit code

  2. 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.

❗️

IMPORTANT

Kindly 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

  1. Visit a product page and cart page on your storefront.
  2. Confirm that the widget appears and shows correct installment information.
  3. Test on mobile to ensure responsiveness.

What’s Next