القائمة
ابدأ الآن مجاناً

Custom codes HTML\CSS\JS

Headers:

 1- background with text using dashboard

<header class=”header-hero”>

    <h1>#StoreTitle</h1>

    <h3>#StoreDescription</h3>

    <a href=”/s/#StoreName/Products” class=”btn hvr-glow hvr-icon-push”>

        <i class=”hvr-icon” data-feather=”shopping-bag”></i>

     تسوق الآن

   </a>

</header>

fePVX2JS4mB02Lz6JVRWXokJsMeoYd0MLlUWFvLqUM5h2UvNwKBz6kDbRpoNeEb3GnuMy9QdlzBhOtjHqyKE5ReH3HHJJ 3EB 4T5hj5Q9r8nUzMl eIp4p8B8pvqA

Note :  url change when stored using custom domain when not using fatome deleting (#StoreName)

2- background image with text

<header class=”header-bg-hero”

style=”background: linear-gradient(257deg, rgba(90, 201, 157, 0.8), rgba(65, 151, 154, 0.8)),

url(‘https://fatora.io/wp-content/themes/fatora/assets/images/cta/newcta.jpeg’);  background-position: center center; background-size: cover;”>

    <h1>

        #StoreTitle

    </h1>

    <h3>

        #StoreDescription

    </h3>

    <a href=”/s/#StoreName/Products” class=”btn hvr-glow hvr-icon-push”>

        <i class=”hvr-icon” data-feather=”shopping-bag”></i>

        تصفح المنتجات

    </a>

</header>

Note :  url change when stored using custom domain when not using fatome deleting (#StoreName)

Note:  image pass by style inline in header tag

  Background with image circle and text:

<header class=”header-product-hero”>

    <div class=”container”>

        <div class=”row flex-column-reverse flex-md-row”>

            <div class=”col-md-7 col-12″>

                <h1>

                    #StoreTitle

                </h1>

                <p>

                    #StoreDescription

                </p>

        <a href=”/s/#StoreName/Products” class=”btn hvr-glow hvr-icon-push”>

               <i class=”hvr-icon” data-feather=”shopping-bag”></i>

                    تسوق الآن

          </a>

       </div>

            <div class=”col-md-5 col-12″>

                <div class=”header-div-class”>

  <img class=”header-img”     src=”https://fatora.io/blog/wp-content/uploads/2020/12/%D9%83%D9%8A%D9%81-%D8%A3%D8%B3%D9%88%D9%82-%D9%85%D8%B4%D8%B1%D9%88%D8%B9%D9%8A-1.jpg” alt=”Alternate Text” />

                </div>

            </div>

        </div>

    </div>

</header>

Au9jpLweKtjoGAQ2puwoHcjspHbgz6H 7h0dU2zZ8Nh5 FwJf633oW0X4Dt6OoO

3- Background with image rectangle and text

<header class=”header-product-hero”>

    <div class=”container”>

        <div class=”row”>

            <div class=”col-md-7 col-12″>

                <h1>

                    #StoreTitle

                </h1>

                <p>

                    #StoreDescription

                </p>

                <a href=”/s/#StoreName/Products” class=”btn hvr-glow hvr-icon-push”>

                    <i class=”hvr-icon” data-feather=”shopping-bag”></i>

                    تسوق الآن

                </a>

            </div>

            <div class=”col-md-5 col-12″>

                <div class=”header-div-class-rec”>

                    <img class=”header-img-rec”                     src=”https://fatora.io/blog/wp-content/uploads/2020/12/%D9%83%D9%8A%D9%81-%D8%A3%D8%B3%D9%88%D9%82-%D9%85%D8%B4%D8%B1%D9%88%D8%B9%D9%8A-1.jpg” alt=”Alternate Text” />

                </div>  </div>        </div>

    </div>

</header>

njoqMajN10Ys7gzcu7LxG57GG7QUuRvMym075y1aq nMtwMoMVntHknrX7kGvSvfnTcplOmVtL3Xnv

 4- circles add after close tag header

<div class=”container”>

    <div class=”row-circle”>

        <a href=”#”>

 <img src=”https://fatora.io/wp-content/uploads/2020/03/2-5.png” alt=”Alternate Text” />

            <h6>

                كعك

            </h6>

        </a>

        <a href=”#”>

    <img src=”https://fatora.io/wp-content/uploads/2020/02/3.png” alt=”Alternate Text” />

            <h6>

                شموع عطرية

            </h6>

        </a>

        <a href=”#”>

    <img src=”https://fatora.io/wp-content/uploads/2020/02/4.png” alt=”Alternate Text” />

            <h6> أوعية للزهور    </h6>

        </a>

        <a href=”#”>

 <img src=”https://fatora.io/wp-content/uploads/2020/05/cashier1-1.png” alt=”Alternate Text” />

            <h6>

                كروت معايدة

            </h6>

        </a>

    </div>

</div>

AgD7EWLEf3lvNFF7tB5jfhNDuh 0YVNQ5WsfUlHRS0KAYUassl BY IG0WJT7j B3ZSuoLGKbomlHaU3NAqQUd66zZ8wu9Gz3qk6QLCwKaHsLqhQPdHR0VTdOP9E C6WuizSM3c

 5- circles background solid with text inside add after close tag header

<div class=”container”>

    <div class=”row-circle”>

        <a href=”#”>

            <div class=”div-circle”>

                <div class=”div-circle-div”>

                    <h6>

                        كعك

                    </h6>

                </div>

            </div>

        </a>

        <a href=”#”>

            <div class=”div-circle”>

                <div class=”div-circle-div”>

                    <h6>

                        شموع عطرية

                    </h6>

                </div>

            </div>

        </a>

        <a href=”#”>

            <div class=”div-circle”>

                <div class=”div-circle-div”>

                    <h6>

                        أوعية للزهور

                    </h6>

                </div>

            </div>

        </a>

        <a href=”#”>

            <div class=”div-circle”>

                <div class=”div-circle-div”>

                    <h6>

                        كروت معايدة

                    </h6>

                </div>

            </div>

        </a>

    </div>

</div>

vlRNugJIAQfC3GzhCBJ7fbwRKpOdPsOS4Gx2uPCWH0XjmI8hUVeksj7uZ YHmU4HNutrPoxvOhLQu0nOhTh0XRxBOsFi1GZPmeW 3CJXINBnJbl1E9ah99r3yct Fw

 6- rectangle background solid with text inside add after close tag header

<div class=”container”>

    <div class=”row-rectangle”>

        <a href=”#”>

            <div class=”div-rectangle”>

                <h6>

                    كعك

                </h6>

            </div>

        </a>

        <a href=”#”>

            <div class=”div-rectangle”>

                <h6>

                    شموع عطرية

                </h6>

            </div>

        </a>

        <a href=”#”>

            <div class=”div-rectangle”>

                <h6>

                    أوعية للزهور

                </h6>

            </div>

        </a>

        <a href=”#”>

            <div class=”div-rectangle”>

                <h6>

                    كروت معايدة

                </h6>

            </div>

        </a>

    </div>

</div>

Jkp AoGIDRAXIM59 guXOz5HUfFJQTSMBAPzlKLaUne5FBvNuQV5HPqCZ9ebRcUQvtpFNjwga5IwJzufwS2DsyWQtkdb ul2PtqPVXQhQFe6hMS2vymU65wYspmrDg

Footer :

1- about section

<section class=”about-section HomeCustomFooter”>

    <div class=”container”>

        <div class=”row”>

            <div class=”col-12″>

                <div class=”card about-card”>

                    <div class=”row no-gutters”>

                        <div class=”col-12 col-md-6 col-lg-7″>

                            <div class=”card-body”>

                       <h5 class=”card-title”>لسنا مجرد متجر … نحن نحب الزهور!</h5>

       <p class=”card-text”>

              هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد

      هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص

                    الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.

       </p>

       <p class=”card-text”>

           هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد

         هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص

         الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.

        </p>

              <a href=”#” class=”btn btn-gradient”>اعرف قصتنا الكاملة</a>

       </div>  </div>

          <div class=”col-12 col-md-6 col-lg-5″>

                <img src=”/images/[email protected]” alt=”” class=”card-img”>

          </div>

                    </div>

                </div>   </div>   </div>

    </div>

</section>

hrS59hs3jl81R6fDGm6MeoECIaO03WT Falza4FO4LqLfMirgoWGytQ4JR0oeaHd2P9iE1RHVownhYW9Y4kG8wlIgHuMnNAa 1qGYdqcj6pMPhsKsF11DMfhwCMPSIZ0rtlVpi0

2- social section

<section class=”social-section HomeCustomFooter”>

    <div class=”container”>

        <div class=”row align-items-center”>

            <div class=”col-12 col-md-6″>

                <h6 class=”sub-title”>تابعنا في كل مكان</h6>

     <h4 class=”main-title”>عروض حصرية على متاجرنا في الشبكات الاجتماعية</h4>

<a href=”#” class=”btn btn-block btn-social btn-instagram”>تابعنا على إنستغرام</a>

   <a href=”#” class=”btn btn-block btn-social btn-facebook”>تابعنا على فيسبوك</a>

      <a href=”#” class=”btn btn-block btn-social btn-twitter”>تابعنا على تويتر</a>

            </div>

            <div class=”col-12 col-md-6″>

                <img src=”/images/[email protected]” class=”img-fluid” alt=””>

            </div>

        </div>

    </div>

</section>

3- social section without image center

<section class=”social-section HomeCustomFooter”>

    <div class=”container”>

        <div class=”text-center”>

            <h6 class=”sub-title”>تابعنا في كل مكان</h6>

            <h4 class=”main-title”>عروض حصرية على متاجرنا في الشبكات الاجتماعية</h4>

            <a href=”#” class=”btn btn-block btn-social btn-instagram”>تابعنا على إنستغرام</a>

            <a href=”#” class=”btn btn-block btn-social btn-facebook”>تابعنا على فيسبوك</a>

            <a href=”#” class=”btn btn-block btn-social btn-twitter”>تابعنا على تويتر</a>

            <a href=”#” class=”btn btn-block btn-social” style=”background-color: #25D366;”>

                <i class=”fa fa-whatsapp fa-lg” aria-hidden=”true”></i>

                تواصل معنا عبر الواتساب</a>

        </div>

    </div>

</section>

JwdpQsr1bdB1 5swlNGuXdRITjV4A3DEZmB9uwX3CyYAyuHzEYugA7dzOPwykzvdlf97UiTeokplyx MrnhG0 js4T37BipM891m

4- product section

<div class=”container”>

    <h2 class=”Home-Newlabel”>Title section </h2>

    <div class=”row”>

        <div class=”col-lg-4 col-md-6 col-12 item-search hvr-float discount-div”>

            <div class=”div-gradient-background  animated zoomIn”>

                <div class=”card card-body flex-fill mx-auto product  d-flex”>

                    <a href=”http://gew.azurewebsites.net/s/ward1235/i25442-test”>

                        <span class=”start-span discount”>

                            <img src=”/images/discount.svg”>

                            تخفيضات%

                        </span>

                        <img class=”image-product img-fluid”                         src=”http://testfatora.azurewebsites.net/Admin/Asset/stockNoAvatar.png” alt=”Test”>

                        <div class=”name-card d-inline-block w-100″>

                            <p class=”div-name mb-0″ dir=”ltr”>

                                Name

                            </p>

                            <div class=”price-card”>

                                <span class=”bold-font”>

                                    20 QAR

                                </span>

                            </div>

                        </div>

                    </a>

        <div class=”row”>

              <div class=”col-12 text-center btn-order-now-div”>

            <a href=”http://gew.azurewebsites.net/s/ward1235/i25442-test” class=”btn-gradient btn order-now rounded-pill  text-white pt-xs-1 pl-xl-5 pr-xl-5  pl-5 pr-5 hvr-glow hvr-icon-push”>

                                <i data-feather=”shopping-bag”></i>

                                الشراء الآن

                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

tow options for status :

Z28BYFrBThe3URoyz7QkJIHC16 1JmEfmD9aCOVVxb Wad87DxfrNFBx zt 52m4ASRH7 RV38S9b4Vn

discounted :

<span class=”start-span discount”>

      <img src=”/images/discount.svg”>

           تخفيضات%

 </span>

ze2V4ECH2gXj5TIPHBYjkxPn8mAsTELTZDt4t8XOF1lNR6g4DEI Cz1 72D2gcBJ0x2RZ

new :

<span class=”start-span  new”>

    <img src=”/images/new.svg”>

    جديد

</span>

Nots:

to control spacing sections use class on sections mt-1 to mt-5

When add class ar-only on any tag show only when page language Arabic

When add class en-only on any tag show only when page language English

When add class HomeCustomFooter on custom footer show only in Home

When add class ProductCustomFooter on custom footer show only in Product

<section class=”about-section HomeCustomFooter mt-2″>

.

.

.

.

.

</section>

 Script.js Options:

1- FooterStyle : tow value (dark , light)

Dark is default  (brand color)

 ex in file :  “FooterStyle”: “dark”,

XTtODX54W6m4hU XTQaWiPBiqck2s1wTcD9DUrb

3R i4hd5HqpV3LBQD1Z9mZz4iR8b k PjnrMm0wWPuBABijFxnzUNZCFbfTON3ETt SGF16bwEDq8KWMiWUySEa mgZ5bhy5VelBBpKND9shmTnQnh 0uUyJ4c122uyyukmPDp8

2- MaxItemperhome :

Number items in home page max is 12 with feature

items

 ex in file : “MaxItemperhome”: 10 ,

iSMjCEerxszW4FmsKRsCrlCeeQl 4WgehIJ b zv6ozDnf98yAYHW0usdTeW9AHvxvGUaS5CtLU9x78SycpVqZB5clUYuUt0QDEEg9f5OAUFC Wmo 465CCwWl5sBAwh2YkIm88

 3- HomeProductTitle:  if have value show in home above items

 ex in file :  “HomeProductTitle”: “جديدنا”,

jtnu8 dZw 5BKqjop JBc2uWcn zTo dHiDqf3h6gtyI1t CYVQjqQz5QUA498M2qEU5BMannS7W

if found in file without value didn’t show

     ex in file : “HomeProductTitle”: “”,

72lyydj2R7V9BthjooeM2MVlXqWR0XYuqU6MwwwRjKrIqFem td8CgsdNpSmf31lFWMXYeHaprG2NzXLJ0g3wJKud1hD0VleAc3DXEfc lEbt L1S Kt Pe3PEvqSwBDVXX 1PY

If didn’t found in file take the default:

mjCceZeuG7YAem4aP0sjBD3r9 eQ78WoZptnerm1NZTByLCZNWXKUpkOibHvVvzAs4gQlbtmeHcfBmij4ae2rwV2 LwE39VJxozOfCzmJNecHKG35ZvBLVnn Yw5OZPcGmTtjYI

4- Announcement:

If have value show above page:

 ex in file :  “announcement”: `<div class=”banner-div”>

                        <img src=”/images/icon-discount-colored.svg” alt=”icon discount” />

                        <h5>تخفيضات نهاية الموسم – خصومات تصل إلى 70٪</h5>

                        <a class=”btn btn-gradient hvr-glow” href=”/s/ward1235/Products”>

                          تسوق الآن!  </a>

                     </div>`,

uhMntZRj b5zuDcImD1oqVw23ykFO0wakBbCZqqagUBHUacLxG78OkG0soAVFx4eNueTgnY YDIrvOzHzYs18grWLWuCAvm5NwjAFLnKOYwo54PeiF2C6EK3RDLj9Q6Fs1yuLDA

 5- BrandColor :

Vale color ex: “#4A148C”

          ex in file :  “BrandColor”: “#4A148C”

XhSyoLSkXWxxQGEeGuHRnY U

Examples from file values:

{

    “FooterStyle”: “dark”,

    “MaxItemperhome”: 10,

    “HomeProductTitle”: “جديدنا”,

    “announcement”: `<div class=”banner-div”>

        <img src=”/images/icon-discount-colored.svg” alt=”icon discount” />

        <h5>تخفيضات نهاية الموسم – خصومات تصل إلى 70٪</h5>

        <a class=”btn btn-gradient hvr-glow” href=”/s/ward1235/Products”>

            تسوق الآن! </a>

    </div>`,

    “BrandColor”: “#4A148C”

}

 custom.css:

example of change background

#main {

    background: #000!important;

 }

getStringByLang is function take two arguments first arabic text and second english text and return text same store language

ex : getStringByLang(“مرحبا” , “hi”)

delivery example in database  :

{

    “PickUp”: {

        “arDescription”: “هذا عبارة عن النص الذي سيظهر للمستخدم في حال حدد خيار التقاط من المتجر مباشرة يمكن ان يحتوي على اي  نص توضيحي لكيفية الاستلام مع عناوين المتجار المتاحة التي يمكن للعميل استلام الطلبية منها”,

        “enDescription”: ” this is default text for pickup from store”,

    },

    “Delivery”: {

        “arDescription”: “هذا عبارة عن النص الذي سيظهر للمستخدم في حال حدد خيار التقاط من المتجر مباشرة يمكن ان يحتوي على اي  نص توضيحي لكيفية الاستلام مع عناوين المتجار المتاحة التي يمكن للعميل استلام الطلبية منها”,

        “enDescription”: ” this is default text for Delivery to address”,

        “price”: 50

    }

}

🛠️ مركز الدعم

  • الرجاء إخبارنا بمشكلتك وسيقوم فريقنا بالاتصال بك قريبًا

    أبلغ عن مشكلة

العديد من الأدوات التي تساعدك على بيع منتجاتك وخدماتك أونلاين, في مكان واحد