How to Integrate the Katheeb App (إنستاكارت) with Your Salla Theme

Follow the steps below to integrate the Katheeb Instacart App with your Salla store theme.

1. Add a Salla Component

From your component settings page in Salla:

Component Name: صور إنستغرام [إنستاكارت]
Component Icon: Instagram Icon

Configure the Component Description Fields

In the component settings page, add the following two description fields.

Make sure to replace REPLACE-ME (in two places) with your affiliate link ID.

Description Field #1

<div ><h6 >معاينة العنصر الإضافي</h6><img class='w-full' src='https://ig.katheeb.net/assets/affiliate/themes/ig-block-hero.gif'></div>

Description Field #2

<p style="margin-bottom: 20px;">
  <strong style="font-size: 17px;">هذا العنصر الإضافي خاص بتطبيق إنستاكارت</strong>
</p>

<p style="margin-bottom: 20px; font-size: 15px;">
  يعرض تطبيق انستاكارت أحدث منشوراتك أو منشورات مختارة من حسابك في إنستغرام مباشرةً في متجرك، مع تحديثها تلقائياً بشكل دوري. عند نقر الزآئر على أي صورة أو فيديو يتم عرضها بشكل مُكبر مع منتجات ذات صلة أسفلها، مما يشجع الزائر على الشراء بعد مشاهدة منتجاتك في محتوى أكثر جاذبية.
</p>

<p style="margin-bottom: 20px; font-size: 15px;">
إضغط على الزر التالي للإشتراك في التطبيق أو لتسجيل الدخول لإدارة حسابك إذا كنت مُشتركاً سابقاً
</p>

<p style="margin-bottom: 20px;">
  بعد إعداد حسابك على تطبيق إنستاكارت قم بتحريك هذا العنصر في الموضع الذي تريد ظهور مربع إنستغرام فيه، في الصفحات الداخلية سيظهر مربع إنستغرام فوق منطقة ذيل الصفحة مباشرةً
</p>

<p style="margin-bottom: 20px; font-size: 13px;">
  <a href="https://katheeb.net/instacart-shoppable-instagram-feeds-app/?ref=REPLACE-ME" target="_blank">
    <img class="w-full" src="https://ig.katheeb.net/assets/affiliate/themes/aff-theme-button.png" />
  </a>
</p>

<hr style="margin-bottom: 20px;" />

<a href="https://katheeb.net/instacart-shoppable-instagram-feeds-app/?ref=REPLACE-ME" target="_blank">
  <div style="font-weight: 600;padding: 15px;border: 1px solid #ead685;border-radius: 5px;background: #fff9e3;color: #a28200;">
  تطبيق انستاكارت من إنتاج وتطوير شركة كثيب، إذا كان لديك أي إستسفار يمكنك مراسلتهم مباشرة.
  </div>
</a>

2. Update Your Twig File

Insert the following code in Twig file:

<div id="kthb-instacart-custom-block"></div>