كيفية تخصيص أداة Coupon X باستخدام CSS

سنوضح لك في هذا الدليل كيفية تخصيص أداة Coupon X باستخدام خيار "CSS المخصص" المدمج. انقر هنا لمعرفة المزيد حول كيفية استخدام Coupon X مع Shopify أو Wix.

يمكنك إضافة تعليمات برمجية CSS مخصصة لتعديل مظهر عنصر واجهة المستخدم الخاص بك، على سبيل المثال، يمكنك إضافة حد إلى عنصر واجهة المستخدم المفتوح أو جعل عنصر واجهة المستخدم أكثر تقريبًا.

أولاً، افتح تطبيق Coupon X في لوحة تحكم Shopify أو Wix وانقر على خيار " تحرير " بجوار الأداة لفتح إعدادات الأداة.

الآن، اعتمادًا على الأهداف التي حددتها في علامة التبويب "تحديد هدف"، سترى عدد الخطوات.

إذا قمت بتحديد "نعم" للهدف "هل تريد تقديم قسيمة؟"، انتقل إلى خطوة "تصميم شاشة القسيمة" أو إذا قمت بتحديد "نعم" للهدف "هل تريد جمع البريد الإلكتروني؟" أو كلا الخيارين، انتقل إلى خطوة "تصميم شاشة البريد الإلكتروني".

بمجرد وصولك إلى الخطوة المناسبة بناءً على أهدافك المحددة، قم بالتمرير لأسفل وانقر فوق زر الإعدادات المتقدمة للعثور على حقل CSS المخصص حيث يمكنك وضع رمز CSS.

باتباع المثال المذكور أعلاه، لإضافة حدود منقطة إلى عنصر واجهة المستخدم الخاص بك، قم بتطبيق كود CSS المخصص هذا ولا تنس النقر فوق " نشر ".

#tab-box-front-0 .tab-box-content.tab-box-couponcode-content{
border-style: dotted;
}

هكذا يجب أن تبدو في النهاية:

لتغيير نصف قطر عنصر واجهة المستخدم وجعله أكثر تقريبًا وبحدود، يمكنك استخدام رمز CSS هذا:

#tab-box-front-0 .tab-box-content.tab-box-couponcode-content{
 border-radius: 25px;
  border: 2px solid #000000;
  padding: 20px;
}

وهذا هو الشكل الذي يجب أن يبدو عليه الأمر في النهاية:

هذا كل شيء، سهل مثل 1,2,3،XNUMX،XNUMX! ☺️ هناك إمكانيات لا حصر لها لتخصيص أداتك وتخصيصها بشكل أكبر لتتناسب مع أسلوبك الفريد.