Landing Page Development

Zid System: Landing Page Development Guide for Developers

Developing a custom landing page in the Zid system is similar to theme development, enabling developers to design and upload tailored landing pages for products. Below is a comprehensive guide to help you get started:

---

What Are Landing Pages?

Landing pages are a powerful marketing tool that allow merchants to:

• Showcase a single product per page with dedicated focus.
• Add engaging content to highlight the product’s features and benefits.
• Provide a seamless path for customers to purchase the product.

---

Steps to Create a Landing Page

1️⃣ From the Merchant Dashboard:

• Navigate to Marketing > Landing Pages > Click Create Landing Page.

2️⃣ Follow the Setup Process:

• Page Information: Add the name, URL, and SEO content.
• Select the product you want to promote.
• Choose a template for the page.

3️⃣ Customize the Page:
Use Zid's user-friendly customization interface to edit and personalize the landing page content.

---

For Developers: Building Custom Landing Pages

Zid allows developers to create and upload custom landing page templates. Here’s how:

Steps to Develop a Custom Landing Page Template

1️⃣ Download the Starter Repository
Get the sample project from Custom Landing Page Sample Repository. Use this as your starting point.

2️⃣ Follow the Sample Folder Structure
Ensure your project adheres to the following structure:

• assets: Include all template assets (e.g., JavaScript, CSS, images, icons).
• locals:
  • ar: Arabic localization.
  • en: English localization.
• modules: Each module represents a section or component on the page (e.g., slider, banner, product info, product features).
• templates:
  • landing_page.twig (required): The main template file.

3️⃣ Data Injection
Zid will inject the following data into your template, which you can style to fit your design:

• Product: [Documentation Link]
• Store: [Documentation Link]
• Session: [Documentation Link]
• asset_url: [Documentation Link]
• Header Meta Tags: [Documentation Link]

---

Customizing Merchant Inputs

Using the schema settings, you can define input fields that merchants can customize through the dashboard. Zid will save these inputs and display the merchant’s changes for each module based on the settings you configure.

---

Building and Uploading Your Custom Template

1️⃣ Prepare the Template Zip File

• From the starter project, install the necessary Node modules:

  npm install  
  

• Compress the template into a ZIP file by running:

  npm run compress  
  

• This command will generate a landing-page.zip file.

2️⃣ Upload the Template

• Navigate to Marketing > Landing Pages > Add Custom Template in the merchant dashboard.
• Upload your landing-page.zip file.

3️⃣ Test the Template

• Go to the landing page associated with your custom template and verify your changes.

---

Key Notes

• The landing_page.twig file is mandatory for your template.
• Ensure all fields and modules are properly localized for both Arabic and English users.
• Use the schema settings effectively to enhance customization options for merchants.

With these steps, you’ll be able to create compelling, customized landing pages that merchants can use to drive conversions and enhance their marketing efforts.