أقسام الصفحة الرئيسية

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

افتح المحرر من Online Store > Themes > Customize، واختر Home page من قائمة اختيار الصفحة، ثم اضغط Add section لإضافة قسم. اسحب الأقسام لإعادة ترتيبها، واستخدم أيقونة العين لإخفاء قسم دون حذفه.

الإعدادات المشتركة بين كل الأقسام

تقريبًا كل قسم فيه هذه الإعدادات:

1. Color scheme: مجموعة الألوان التي يستخدمها القسم من بين مجموعاتك الخمس. راجع إعدادات الثيم.
2. Eyebrow: سطر نص صغير فوق العنوان.
3. Heading وHeading size: Small أو Medium أو Large.
4. Text وText alignment: Start أو Center.
5. Top padding وBottom padding، تحت Section padding: المسافة فوق القسم وتحته. قلّل الاثنين لتقريب قسمين من بعضهما.
6. Columns on desktop وColumns on mobile حيث يعرض القسم شبكة.

مفيد أن تعرفه عن كل قسم

• كلمة Start تعني الجهة اليسرى في الإنجليزية والجهة اليمنى في العربية أو العبرية. الثيم ينعكس تلقائيًا، فلا تحتاج أبدًا إلى إعادة ترتيب التخطيط للغات التي تُكتب من اليمين إلى اليسار.
• اترك حقل النص فارغًا لإخفائه.
• استخدم صورًا حقيقية وحادة. تكفي صورة واحدة كبيرة لا يقل أطول ضلع فيها عن 2000 px لبانر بعرض الصفحة كاملًا.
• على الموبايل يصعب قراءة قسم فيه نص كثير. عدّل الصفحة بعرض شاشة الموبايل قبل النشر.

الصورة الرئيسية والبانرات

عرض الشرائح (Slideshow)

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

1. أضف قسم Slideshow، ثم أضف بلوك Slide لكل شريحة. ويمكنك أيضًا إضافة بلوك Video slide.
2. لكل شريحة اضبط Image وEyebrow وHeading وText، وحتى زرين (First button label وFirst button link، وSecond button label وSecond button link).
3. يمكنك اختياريًا ضبط Mobile image. الصورة الطولية هي الأنسب على الموبايل.
4. يمكنك اختياريًا ضبط Image for right-to-left languages. تظهر في العربية والعبرية وغيرهما من اللغات التي تُكتب من اليمين إلى اليسار، فيتبادل النص والصورة الجانبين. راجع اللغات والكتابة من اليمين إلى اليسار.
5. استخدم Content position (تسعة مواضع) وText alignment وOverlay opacity ليبقى النص مقروءًا فوق الصورة. ولكل شريحة أيضًا Color scheme خاصة بها.

إعدادات القسم: Full page width وSlide height (Adapt to first image وSmall وMedium وLarge وFull screen) وShow arrows وShow dots وAutoplay وChange slides every (من 3 إلى 12 ثانية).

شريحة Video slide تشغّل Video بدون صوت وبتكرار مستمر. اجعله قصيرًا ومضغوطًا.

بانر الصورة (Image banner)

استخدمه لرسالة كبيرة واحدة، مثل حملة موسمية. فيه نفس إعدادات المحتوى الخاصة بشريحة واحدة: Image وMobile image وHeading وText وزرّان وContent position وOverlay opacity وShow content in a box. وفيه إضافات: Second image التي تظهر بجانب الصورة الأولى على التابلت والكمبيوتر (وتختفي على الموبايل)، وBanner height (Adapt to image وSmall وMedium وLarge وFull screen).

نمط Film. اضبط Style على Film (full screen video) للحصول على افتتاحية تملأ الشاشة الأولى بفيلم متكرر:

1. اختر Video مستضافًا على Shopify، واختياريًا Phone video بالوضع الطولي. تحمّل كل شاشة الفيلم الخاص بها فقط، ويعمل بدون صوت وهو ظاهر على الشاشة فقط، مع زر إيقاف مؤقت.
2. أبقِ Image (وMobile image) كغلاف: تظهر حتى يبدأ الفيلم، وتبقى ظاهرة إذا كان المتسوق يفضل تقليل الحركة.
3. اضبط Heading size على Giant للحصول على عنوان يملأ العرض ويصعد إلى مكانه حرفًا بعد حرف. أنسب العناوين هي القصيرة، من كلمة إلى ثلاث كلمات.
4. يوجد الرابطان في الصف السفلي بجانب زر الإيقاف المؤقت. يضيف Show scroll cue خطًا رفيعًا متحركًا في الأسفل على الشاشات الكبيرة.

نصيحة: عندما يكون الهيدر مضبوطًا ليطفو فوق الصفحة الرئيسية (Header > Transparent header on home page)، يمتد الفيلم إلى أعلى تحت الهيدر.

بانر العد التنازلي (Countdown banner)

استخدمه لتخفيض محدد بوقت. اضبط End date (بصيغة YYYY-MM-DD، حسب المنطقة الزمنية لمتجرك) وEnd time وText after the timer ends. اختر Layout (Centered أو Split) وأضف Background image مع Overlay opacity.

النص المتحرك (Scrolling text)

شريط متحرك من الرسائل القصيرة، ويُعرف أيضًا باسم marquee. أضف بلوكات Item، لكل منها Text وLink اختياري وIcon. تحكم في Scroll speed وScroll direction وPause on hover. الزوار الذين يفضلون تقليل الحركة يرون نصًا ثابتًا.

نمط Two rows. اضبط Style على Two rows (huge type) للحصول على شريطين من كلمات كبيرة جدًا، الثاني بدرجة لون أخف ويتحرك في الاتجاه المعاكس. أعطِ كل Item قيمة Row (First أو Second). يتسارع الشريطان قليلًا أثناء تمرير المتسوق ثم يهدآن من جديد عندما يتوقف.

المجموعات والمنتجات

المجموعة المميزة (Featured collection)

استخدمه لعرض منتجات من مجموعة واحدة، أو من عدة مجموعات في تبويبات.

1. اختر Collection، أو أضف بلوكات Collection tab، لكل منها Collection وTab title. عند إضافة تبويبات يتم تجاهل إعداد المجموعة الواحدة.
2. اضبط Number of products (من 2 إلى 24) وLayout (Grid أو Slider) وColumns on desktop وColumns on mobile.
3. فعّل Show "View all" button واضبط الرابط باستخدام Link label إذا أردت أن يفتح المتسوقون المجموعة كاملة.
4. يعرض Layout: Rail ترويسة فيها العنوان ورابط View all وعدّاد (مثل 01 / 08) وأسهم، فوق صف من البطاقات يمتد إلى حواف الشاشة. وعلى الموبايل يُسحب الصف بالإصبع.

قائمة المجموعات (Collection list)

استخدمه لاختصارات الفئات. أضف بلوك Collection لكل مجموعة. يمكن أن يكون لكل بلوك Image وTitle خاصان به، والحقول الفارغة تستخدم بيانات المجموعة نفسها. التخطيطات: Grid وSlider وCircles (صور دائرية، مناسبة لفئات مثل الفساتين والحقائب والأحذية). اضبط Image ratio وهل تريد Show product count. يمكنك إضافة حتى 15 مجموعة.

تخطيط Index. اضبط Layout على Index للحصول على قائمة بأسماء المجموعات بخط كبير. على الكمبيوتر، عند تمرير المؤشر على اسم تظهر صورة تلك المجموعة في إطار كبير بجانب القائمة، وفوقها Image caption. وعلى الموبايل يعرض كل صف صورة صغيرة بدلًا من ذلك. اجعل عناوين المجموعات قصيرة (كلمة أو كلمتان)، أو اضبط Title أقصر في البلوك.

المنتج المميز (Featured product)

استخدمه للترويج لمنتج واحد مع صوره وزر الشراء مباشرة على الصفحة. اختر Product وMedia position وMedia width on desktop وMedia shape، وحدد هل تريد Show description (مع Description length (words)) وShow dynamic checkout buttons. يعرض العنوان والسعر والمخزون والخيارات وأزرار الشراء بجانب صور المنتج. وللحصول على تخطيط منتج مبني بالكامل من البلوكات، استخدم صفحة المنتج نفسها (راجع صفحة المنتج).

التوصيات والمنتجات التي شوهدت مؤخرًا (Product recommendations and Recently viewed)

هذان القسمان مخصصان أساسًا لصفحة المنتج. يعرض Product recommendations منتجات ذات صلة مع Layout بقيمة Grid أو Slider وNumber of products. ويعرض Recently viewed المنتجات التي شاهدها المتسوق، من متصفحه هو. ويعمل كلاهما على صفحات أخرى إذا أضفتهما إليها.

شبكة العروض (Promo grid)

استخدمها لعرض حتى أربعة مربعات حملات جنبًا إلى جنب. كل بلوك Promo tile فيه Image وEyebrow وHeading وText وزر وColor scheme خاصة به. ويمكن أن يكون Size بقيمة Standard أو Large (أطول) أو Wide (يمتد على الصف كاملًا).

الصورة القابلة للتسوق (Shoppable image)

وتُسمى أيضًا shop the look. ارفع صورة واحدة في Image، ثم أضف حتى 8 بلوكات Hotspot. اختر Product لكل منها وحرّك النقطة بواسطة Horizontal position وVertical position. يضغط المتسوقون على نقطة ليروا اسم المنتج وسعره، مع رابط إلى المنتج، وزر المعاينة السريعة إذا كانت المعاينة السريعة مفعّلة.

تخطيط Split. اضبط Layout على Split (photo and product list) لعرض الصورة بجانب قائمة مرقمة بالمنتجات. تطابق الأرقام على الصورة أرقام القائمة: تمرير المؤشر على نقطة يبرز منتجها، والضغط على نقطة على الموبايل يُظهر ذلك المنتج في مجال الرؤية. استخدم صورة طولية، فهي تُعرض دون قص لتبقى النقاط في أماكنها.

الفيديو القابل للتسوق (Shoppable video)

فيديو مع منتجات. أضف Video مستضافًا على Shopify أو Video URL من YouTube أو Vimeo، وPoster image، وبلوكات Product. اختر Layout: Products beside the video أو Products below the video. ويعمل Autoplay muted and loop مع الفيديوهات المستضافة على Shopify فقط.

سرد القصة

الفيديو (Video)

فيلم تعريفي بعلامتك، بعرض الصفحة كاملًا أو داخل الصفحة. اختر Shopify hosted video أو YouTube or Vimeo link، مع Cover image وVideo ratio. فعّل Autoplay muted and loop ليعمل فيديو Shopify بدون صوت أثناء ظهوره على الشاشة، مع زر إيقاف مؤقت في الزاوية. أما المتسوقون الذين يفضلون تقليل الحركة فيرون صورة الغلاف ويضغطون على التشغيل بأنفسهم. أضف Video for phones (فيلمًا طوليًا) وCover image for phones إذا كان الفيلم الرئيسي عريضًا، وعندها يعرضهما الموبايل في إطار أطول. ويضع Show text over the video العنوان والنص فوق الفيديو، فارفع Overlay opacity إذا كان النص صعب القراءة.

نمط Expand on scroll. اضبط Style على Expand on scroll للحصول على فيلم يبدأ في إطار صغير ويكبر حتى يملأ الشاشة أثناء تمرير المتسوق. أضف First word وSecond word: تظهران بجانب الإطار (وفوقه وتحته على الموبايل) وتُدفعان إلى الخارج وتتلاشيان مع اتساعه. يضبط الثيم حجمهما حسب المساحة المتاحة، فالكلمات الأطول تظهر أصغر ولا تقع أبدًا تحت الفيلم. أضف Caption، واختياريًا Video for phones وCover image for phones، واستخدم Scroll length لجعل الفتح أبطأ أو أسرع.

صورة مع نص (Image with text)

استخدمه لقصتك أو لميزة أو لعرض. اختر Image (أو Video يحل محلها) وImage position (Start أو End) وImage width وImage ratio. جانب النص مكوّن من بلوكات يمكنك إعادة ترتيبها: Eyebrow وHeading وText وButton وIcon with text وSmall image (لتوقيع أو شعار صغير).

تخطيط Editorial. اضبط Layout على Editorial للحصول على صورة كبيرة تتداخل معها صورة أصغر (Second image) عند زاويتها السفلية، بجانب النص. فعّل Move images as you scroll لتتحرك الصورتان بسرعتين مختلفتين قليلًا.

نص منسق (Rich text)

كتلة نص في المنتصف لعبارة قصيرة. البلوكات: Eyebrow وHeading وText وButtons وSpacer. يُبقي Use a narrow width الأسطر قصيرة وسهلة القراءة. اضبط Style على Statement للحصول على فقرة واحدة كبيرة تضيء كلماتها أثناء مرور المتسوق عليها بالتمرير.

أعمدة متعددة (Multicolumn)

استخدمه لعرض ثلاثة إلى خمسة أسباب للتسوق من متجرك، أو لعرض المميزات. كل بلوك Column فيه Image أو Icon (تظهر الأيقونة عندما لا توجد صورة) وHeading وText ورابط. اختر Style (Plain أو Card) وSwipeable slider on phones. حتى 8 أعمدة.

شريط الأيقونات (Icon bar)

صف من الوعود القصيرة مثل التوصيل المجاني والاسترجاع السهل والدفع الآمن. أضف حتى 6 بلوكات Item، لكل منها Icon وTitle وText. وفي On phones اختر Scroll automatically أو Wrap onto rows.

الإحصائيات (Stats)

أرقام كبيرة تعد تصاعديًا عندما تظهر أثناء التمرير. لكل بلوك Number حقول Prefix وNumber (أرقام فقط، مثل 12000 أو 98.5) وSuffix وLabel. حتى 6 بلوكات.

الخط الزمني (Timeline)

قصتك على شكل تواريخ. أضف بلوكات Milestone، لكل منها Year or label وHeading وText وImage. التخطيطات: Vertical أو Horizontal slider.

شريط قبل وبعد (Before and after slider)

قارن بين صورتين بمقبض يمكن سحبه، مثل إصلاح أو مكياج أو تجديد. اضبط Before image وAfter image وتسمياتهما وStarting position وOrientation وHandle style. تحتفظ الشرائح المربعة والطولية بعرض مريح على الشاشات الكبيرة، فتظهر المقارنة كاملة دون تمرير.

جدول المقارنة (Comparison table)

قارن حتى أربعة خيارات في أعمدة. سمِّ الأعمدة، وأضف بلوكات Row واملأ القيم. كتابة yes أو no (أو true أو false) تعرض علامة صح أو شرطة، وأي نص آخر يظهر كما كُتب. استخدم Highlight column لإبراز عمود.

معرض الصور (Image gallery)

معرض صور بأسلوب lookbook يضم حتى 12 صورة. اختر Layout: Grid أو Mosaic أو Slider. وفي تخطيط الفسيفساء يكون لكل بلوك Image إعداد Tile size (Normal أو Wide أو Tall أو Large). أضف Caption، واختر Caption style (Below image أو Over image).

تخطيط Lookbook. اضبط Layout على Lookbook للحصول على صف أفقي من الصور الطولية. أعطِ كل بلوك Image إعداد Label قصيرًا (مثل الاستوديو) وProduct: يصبح اسمه الرابط تحت الصورة. أضف End tile text وEnd tile link لمربع ختامي، مثل تصفّح الـ lookbook. يسحب المتسوقون الصف بالإصبع على الموبايل ويستخدمون الأسهم على الكمبيوتر، ويوضح عدّاد وخط تقدم رفيع مكانهم.

القصة (Story)

قصة بفصول بملء الشاشة وبخلفية داكنة: الصور في جانب والفصول في الجانب الآخر، ولكل فصل رقم كبير وHeading وText وLink label مع Link. أضف بلوك Chapter لكل جزء من القصة (ثلاثة أجزاء تعمل جيدًا) وأعطِ كل فصل Chapter photo. أثناء تمرير المتسوق تتغير كل صورة مع كلمات فصلها. وعلى الموبايل تظهر الكلمات فوق الصورة. فعّل Photo on the end side لتبديل الجانبين على الكمبيوتر.

الإثبات الاجتماعي

آراء العملاء (Testimonials)

أضف بلوكات Testimonial (حتى 12) مع Quote وName وRole or location وRating وPhoto ورابط Product اختياري. التخطيطات: Cards أو Large single quote. اضبط Rating على 0 لإخفاء النجوم. يعرض تخطيط Single quote (fades) اقتباسًا واحدًا في كل مرة ويتبدل كل بضع ثوانٍ عندما يكون Autoplay مفعّلًا (Change slides every)، ويتوقف أثناء تمرير المتسوق المؤشر عليه أو استخدامه لوحة المفاتيح.

قائمة الشعارات (Logo list)

اعرض شعارات وسائل الإعلام أو العلامات التجارية. أضف حتى 16 بلوك Logo مع Logo image وBrand name (يقرؤه قارئ الشاشة) ورابط اختياري. ليس لديك ملف الشعار بعد؟ اترك Logo image فارغًا ويظهر Brand name كنص بخط العناوين لديك. ويعطي Show logos in grayscale مظهرًا هادئًا.

المحتوى والمجتمع

مقالات المدونة (Blog posts)

اعرض أحدث مقالاتك من Blog. اضبط Number of posts وLayout (Grid أو Slider) والتفاصيل التي تريد إظهارها (Show date وShow author وShow excerpt).

النشرة البريدية (Newsletter)

نموذج اشتراك بالبريد الإلكتروني. اختر Layout (Centered أو Split أو Wordmark) وBackground image. يُضاف المشتركون إلى قائمة عملائك مع قبول التسويق عبر البريد الإلكتروني.

يضع تخطيط Wordmark النموذج بجانب Portrait image وينهي الصفحة باسم علامتك بحروف ضخمة (Wordmark text، أو اسم المتجر إذا كان فارغًا). يُضبط حجمه ليناسب عرض الصفحة مهما كان طوله. استخدم مجموعة ألوان داكنة لينساب إلى الفوتر، وأوقف بلوك الاشتراك الخاص بالفوتر حتى لا يُطلب من المتسوقين الاشتراك مرتين.

محتوى قابل للطي (Collapsible content)

الأسئلة الشائعة. أضف بلوكات Row مع Question وAnswer، أو املأ صفًا من صفحة باستخدام Page content. اختر Layout: Rows only أو Heading beside rows أو Side image. الإعدادات: Open the first row وClose other rows when one opens وAdd FAQ structured data الذي يساعد محركات البحث على عرض أسئلتك في النتائج.

نموذج التواصل (Contact form)

نموذج فيه حقل هاتف اختياري وعمود لبيانات التواصل. راجع المدونة والصفحات.

فروع المتجر (Store locations)

بطاقة لكل فرع، فيها العنوان وساعات العمل وزر الاتجاهات. راجع المدونة والصفحات.

الأدوات

التطبيقات (Apps)

يعرض بلوكات من التطبيقات التي توفر بلوكات تطبيقات. اضبط Anchor ID إذا أردت رابطًا ينتقل مباشرة إلى هذا القسم.

كود Liquid مخصص (Custom Liquid)

للمستخدمين المتقدمين: الصق Liquid code أو مقتطف كود من تطبيق.

المسافة الفارغة (Spacer)

يضيف مسافة فارغة بين قسمين. اضبط Height on desktop وHeight on mobile، واختياريًا Show a divider line.

قسم Freeform وبلوكات الثيم

عندما لا يناسبك أي قسم جاهز، ابنِ قسمك بنفسك بقسم Freeform. هو لوحة فارغة ترصّ عليها theme blocks بأي ترتيب.

إعدادات القسم:

1. Content width: Narrow أو Page width أو Full page width.
2. Layout: Column (تترتب البلوكات فوق بعضها) أو Row (تجلس البلوكات جنبًا إلى جنب).
3. Gap between blocks: من 0 إلى 80 px.
4. Content alignment: Start أو Center أو End.

البلوكات التي يمكنك إضافتها:

1. Heading: نص Heading وSize (Display، ثم Heading 1 إلى Heading 5) وHTML tag وAlignment. يحدد الـ HTML tag طريقة فهم محركات البحث وقارئات الشاشة للصفحة، ويحدد الحجم مدى كبر العنوان في الشكل. استخدم H1 واحدًا فقط في كل صفحة.
2. Text: Text وSize وAlignment وMuted color.
3. Button: Button label وLink وStyle (Primary أو Secondary أو Link) وSize.
4. Image: Image وImage ratio وWidth وAlignment وRounded corners وLink.
5. Icon: Icon وSize الخاص بها وLabel.
6. Spacer: Height on desktop وHeight on mobile.
7. Group: حاوية لبلوكات أخرى. اضبط Layout (Row أو Column) وGap between blocks وHorizontal alignment وVertical alignment وWrap blocks to a new line، وتحت Background اضبط Show background color مع Color scheme وInner padding. ويمكن أن يضم الـ Group بلوكات Group أخرى.

يمكنك أيضًا إضافة بلوكات التطبيقات.

بناء عرض ترويجي بسيط

1. أضف قسم Freeform.
2. أضف بلوك Heading واكتب عرضك.
3. أضف بلوك Text بجملة واحدة.
4. أضف بلوك Button يربط بمجموعتك.
5. اضبط Content alignment على Center واختر Color scheme للقسم.

بناء بطاقة بخلفية

1. أضف بلوك Group داخل قسم Freeform.
2. فعّل Show background color واختر Color scheme. أضف بعض Inner padding.
3. اسحب Heading وText وButton إلى داخل الـ Group.

مفيد أن تعرف

• الصفحة الرئيسية الجيدة فيها شاشة أولى واضحة، وسبب للثقة بك، وأفضل منتجاتك، وخطوة تالية واحدة واضحة. خمسة إلى تسعة أقسام تكفي تمامًا.
• الأقسام المخفية لا تُحمَّل للمتسوقين، فالإخفاء طريقة آمنة للاحتفاظ بقسم لوقت لاحق.
• اضبط نفس Top padding وBottom padding في الأقسام المتشابهة ليكون إيقاع الصفحة متوازنًا.
• بدّل مجموعات الألوان بين الأقسام المتجاورة (فاتحة، ثم بدرجة لون، ثم فاتحة) لتفصل المحتوى دون خطوط.
• افحص الصفحة دائمًا باللغة العربية (أو أي لغة أخرى تُكتب من اليمين إلى اليسار) إذا كان متجرك يقدمها.