Shopify - Amwal Promo Widget Integration

Quick Preview

The Amwal Promo Widget gives your customers a quick preview of installment options before checkout, helping increase conversions.

Easy Integration

Simple code snippets that integrate seamlessly with your existing Shopify theme.

Mobile Ready

Fully responsive design that works perfectly on all devices.

📋 Prerequisites

Before you begin, ensure you have:

Amwal Integration: Your store is already integrated with Amwal
Technical Access: You are comfortable editing Shopify theme files (or have a developer available)
Theme Backup: Always backup your theme before making changes

📍 Widget Placement Options

Product Page

Below the price display
Near the add-to-cart button
In the product details section

Cart Page

Near the checkout button
Next to the cart total
In the cart summary area

🛠 Implementation Guide

Create the Amwal Snippet File

From your Shopify admin, navigate to: Online Store > Themes > Current Theme > ... > Edit code
In the left menu, go to Snippets and create a new file named: amwal-installment-promo.liquid
Add the following code to the snippet file:

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

🧪 Testing & Validation

Product Page Testing

Visit any product page on your storefront
Verify the widget appears in the expected location
Check that installment amounts are calculated correctly
Test with different product variants if applicable

Cart Page Testing

Add items to your cart and visit the cart page
Confirm the widget shows the correct total installment amount
Test cart updates to ensure the widget recalculates
Verify mobile responsiveness on various screen sizes