This guide helps you show the MISpay widget on your product pages in Shopify.

Step 1: Add MISpay Script

1. Go to your Shopify Admin → Home → Manage Theme

   

   
   

2. Click the three dots (•••) → Edit code

   

   
   

3. From Left menu: Open: Layout → theme.liquid

   

   
   

4. Find this line:

   HTML

   </head>

   
   

5. Paste the below line just before it:

   HTML

   <script defer src="https://widget.mispay.co/v1/sdk.js?authorize=YOUR_WIDGET_KEY"></script>

   👉 Replace YOUR_WIDGET_KEY with the key provided by MISpay

6. Click Save

Step 2: Create Widget File

1. In the same Edit code page >> Click Snippets → Add a new snippet

   

   
   

2. Name it: mispaywidget.liquid

3. Paste the below code inside:

   Liquid

   {%- assign current_variant = product.selected_or_first_available_variant -%}
   
   {% if current_variant and current_variant.price %}
     <mispay-widget
       amount="{{ current_variant.price | divided_by: 100.0 }}"
       lang="{{ shop.locale | default: 'en' }}">
     </mispay-widget>
   {% endif %}

   

   
   

4. Click Save

Step 3: Show Widget on Product Page

1. Go back to Shopify Admin

2. Click Online Store → Themes → Edit Theme

3. Open Any Product Page → In the left panel → Template → Product Information → Add Block - Custom Liquid

   

   
   

4. Insert the following code in the box on the right:

   HTML

   {%render'mispaywidget'%}

   

✅ Done!

Now go to any product page on your website — you should see the MISpay widget showing payment options 🎉

🚧

Important Tips

• If nothing appears:
  • Make sure you added the script correctly
  • Make sure you replaced the authorization key
• Prices will automatically show correctly — no need to adjust anything

💡 That’s It

No coding experience needed — just copy & paste in the right places.