Aljouf Agricultural Company – Custom Page Builder, Mobile App Integration & Discount Management
For Aljouf Agricultural Company, we contributed to the development and customization of a modern digital commerce ecosystem designed to support the company's growing online presence and its transition toward a more flexible, mobile-oriented shopping experience.
The project involved more than traditional eCommerce customization. A major part of the development focused on building a custom page builder inside the administration dashboard, allowing the content and marketing team to visually configure the mobile application's home page without requiring developers to modify the application code for every content update.
The platform was also extended with a structured JSON-based integration layer capable of delivering configurable home-page sections and their associated content to the mobile application.
In addition, dedicated discount and promotional modules were developed to provide more flexibility for managing offers, product promotions and campaign-driven merchandising.
About the Client
Aljouf Agricultural Company operates across agricultural production and food products, with its digital store offering products including organic olive oil and different varieties of olives.
The company's online store currently showcases multiple formats of its organic extra-virgin olive oil, including different bottle sizes and larger commercial packages, alongside olive products and other offerings.
The Aljouf store describes its organic olive oil as extra virgin, cold-pressed and produced with an acidity level not exceeding 0.8%. The website also presents products in multiple package configurations ranging from small consumer bottles to larger containers.
The breadth of products and packaging options made flexibility particularly important for both the web commerce experience and the mobile application.
The Challenge
A conventional mobile application architecture can make content management difficult. When a home page is hard-coded into the application, every major change to the page structure may require a new development cycle, application testing and potentially a new app release.
For an eCommerce business running frequent promotions and changing product campaigns, this approach can quickly become inefficient.
The project therefore required a more flexible architecture in which the administration team could control the structure and content of the mobile application's home page directly from the web dashboard.
The main requirements included:
- Creating a configurable mobile application home page.
- Allowing administrators to add, remove and reorder sections.
- Supporting different content types inside each section.
- Connecting dashboard content to the mobile application through JSON.
- Keeping the mobile application independent from hard-coded home-page content.
- Supporting Arabic and English content.
- Allowing sections to be enabled or disabled without modifying application code.
- Supporting product and category-driven commerce sections.
- Providing more flexible discount and promotional functionality.
Custom Mobile Home Page Builder
One of the central components developed for the project was a custom page builder within the administration dashboard.
Instead of defining the mobile application's home page entirely inside the mobile application's source code, the page structure could be managed from the backend.
This created a separation between content management and mobile application development.
Administrators could construct the home page using configurable sections, with each section representing a particular type of content or interaction.
Configurable Section Architecture
The builder was designed around a modular section-based architecture. Sections could represent different types of content depending on the purpose of the component.
- Text sections – Display configurable titles, descriptions and promotional copy.
- Image sections – Display promotional or editorial imagery.
- Background sections – Provide visually rich promotional areas.
- Video sections – Support video-driven promotional content.
- Button sections – Create configurable calls to action.
- Category sections – Connect the mobile experience directly to product categories.
- Product sections – Display selected or dynamically associated products.
- Clickable sections – Allow content blocks to navigate to specific destinations.
Each section could be independently managed, making it possible to construct different home-page experiences without changing the mobile application's underlying UI logic.
Enable / Disable Content Controls
Marketing campaigns frequently require content to be temporarily displayed and then removed without deleting the underlying configuration.
The custom builder therefore incorporated Enable / Disable controls for configurable sections.
This allows administrators to prepare promotional content in advance, activate it when needed and deactivate it after the campaign ends while retaining the configuration for future use.
This approach is particularly useful for seasonal campaigns, product launches, promotional banners and time-sensitive merchandising.
Dynamic Section Ordering
The visual order of content on an eCommerce application's home page has a direct impact on how products and campaigns are presented.
The page builder therefore treats the home page as a collection of ordered sections rather than a fixed template.
Administrators can control the sequence in which sections are returned to the mobile application, allowing the same application interface to support different merchandising strategies over time.
For example, a promotional campaign can be placed above product categories, followed by selected products and additional promotional content without requiring a new mobile application build.
JSON-Based Mobile Application Integration
The page builder was connected to the mobile application through a structured JSON integration layer.
Rather than requiring the mobile application to know the exact content of the home page in advance, the application consumes the configured structure from the backend and renders the appropriate components.
This creates a data-driven relationship between the administration dashboard and the mobile application.
Data-Driven Architecture
The general flow of the system can be represented as:
Admin Dashboard
↓
Custom Page Builder
↓
Page / Section Configuration
↓
JSON API
↓
Mobile Application
↓
Dynamic Home Page
The result is an architecture in which the mobile application acts as the presentation layer while the backend controls the content and structure delivered to it.
Structured API Response
The integration was designed around structured JSON data so that the mobile application could determine how each section should be rendered based on the information returned by the backend.
A simplified representation of the architecture can be illustrated as follows:
{
"sections": [
{
"type": "banner",
"enabled": true,
"title": "Featured Collection",
"image": "...",
"button": {
"text": "Shop Now",
"target": "category"
}
},
{
"type": "products",
"enabled": true,
"title": "Featured Products",
"items": []
},
{
"type": "categories",
"enabled": true,
"items": []
}
]
}The actual implementation can contain considerably more information depending on the configured component, but the underlying principle remains the same: the backend describes the content and the mobile application renders it.
Arabic & English Content Support
Because Aljouf serves a Saudi Arabian market, multilingual content was an important consideration in the integration architecture.
The API integration supports localized content so that the same mobile application architecture can serve different language versions without requiring separate home-page implementations.
This approach allows localized titles, descriptions, buttons, categories and other content to be delivered according to the requested application language.
It also keeps translation management within the content-management workflow instead of embedding language-specific strings directly into the mobile application.
Mobile-First Commerce Experience
The architecture was developed with the mobile shopping experience in mind. Instead of simply exposing desktop website content through an API, the system provides the mobile application with a dedicated, structured representation of the home page.
This distinction is important because mobile commerce interfaces typically require different content hierarchy, component sizes, navigation patterns and promotional priorities compared with a traditional desktop storefront.
The page builder therefore acts as a bridge between backend commerce data and the mobile application's presentation layer.
Custom Discount & Promotion Modules
Another major component of the project was the development and customization of discount management functionality.
eCommerce promotions can become difficult to manage when discount logic is limited to basic price adjustments. A modern retail platform may need to support promotional campaigns across products, categories and different customer-facing experiences.
Custom discount modules were therefore developed to provide a more flexible foundation for promotional management.
Promotion-Oriented Commerce
The discount functionality was designed around the idea that promotions should work as part of the broader commerce ecosystem rather than as isolated price changes.
This allows promotional content to work together with the product catalog, category navigation and mobile home-page presentation.
For example, a promotion can be reflected through the product catalog while corresponding promotional content can be surfaced through the mobile application's configurable home page.
Connecting Promotions With Content
One of the advantages of combining the custom page builder with discount functionality is the ability to create a more coordinated merchandising workflow.
Instead of treating a discount and a promotional banner as two completely separate systems, the platform can use the page builder to expose promotional products and campaigns directly within the mobile shopping journey.
A typical campaign workflow can therefore follow this pattern:
- Create or configure the promotional offer.
- Select the products or categories associated with the campaign.
- Create promotional content through the page builder.
- Configure the relevant mobile home-page section.
- Enable the section when the campaign begins.
- Deliver the configuration through the JSON API.
- Display the campaign inside the mobile application.
- Disable the campaign content when the promotion ends.
Product & Category Integration
The system was also designed to connect page-builder content with the underlying commerce catalog.
This is particularly useful for a product-focused store such as Aljouf, where the mobile home page may need to surface products based on categories, promotions or merchandising decisions.
The current Aljouf store includes multiple product families, including organic olive oil products in different sizes and packaging configurations as well as various olive products. :contentReference[oaicite:1]{index=1}
The page-builder architecture provides a flexible foundation for presenting these catalog entities through dedicated mobile components rather than treating all content as static banners.
Technical Architecture
The solution can be viewed as several interconnected layers:
1. Administration Layer
The administration dashboard provides the interface for managing pages, sections, products, categories, promotional content and other configurable data.
2. Page Builder Layer
The custom page builder converts administrator-defined configurations into structured page data.
3. Commerce Data Layer
Product, category, pricing and promotional information remains connected to the underlying commerce system.
4. API Layer
The JSON API exposes the required data in a format that can be consumed by the mobile application.
5. Mobile Presentation Layer
The mobile application interprets the API response and renders the appropriate components dynamically.
┌───────────────────────────┐
│ Admin Dashboard │
│ │
│ Products / Categories │
│ Promotions / Sections │
│ Page Builder │
└─────────────┬─────────────┘
│
▼
┌───────────────────────────┐
│ Configuration Layer │
│ │
│ Page Structure │
│ Section Types │
│ Ordering │
│ Enable / Disable │
│ Localization │
└─────────────┬─────────────┘
│
▼
┌───────────────────────────┐
│ JSON API │
│ │
│ Structured Mobile Data │
└─────────────┬─────────────┘
│
▼
┌───────────────────────────┐
│ Mobile Application │
│ │
│ Dynamic Home Page │
│ Products │
│ Categories │
│ Promotions │
│ Interactive Content │
└───────────────────────────┘
Scalable Content Architecture
A major advantage of the implementation is that new content combinations can be introduced without redesigning the entire mobile application's home page.
The mobile application can support a growing collection of backend-defined sections while the dashboard remains the primary control point for content management.
This makes the architecture suitable for future campaigns, additional product categories, new promotional strategies and additional content formats.
Business & Operational Benefits
- Reduced dependency on mobile app releases: Home-page content can be changed from the backend.
- Faster campaign management: Promotional content can be configured and activated through the dashboard.
- Greater content flexibility: Multiple section types can be combined into a single mobile home page.
- Better merchandising control: Products and categories can be strategically surfaced within the mobile experience.
- Reusable architecture: The same section-based model can support future home-page configurations.
- Multilingual support: Localized content can be delivered through the API.
- Centralized administration: Content and promotional configuration can be managed from the existing backend.
Our Development Contribution
The project involved several areas of backend and integration development, with a particular focus on creating a bridge between the eCommerce administration system and the mobile application.
- Designed and developed a custom dashboard page-builder architecture.
- Developed configurable home-page sections for mobile commerce.
- Implemented enable/disable controls for page sections.
- Implemented configurable section ordering.
- Integrated products and categories into configurable sections.
- Developed JSON-based mobile application integration.
- Structured backend data specifically for mobile consumption.
- Supported localized Arabic and English content delivery.
- Developed custom discount and promotion modules.
- Connected promotional functionality with the broader product and content ecosystem.
- Built the foundation for a flexible, data-driven mobile home page.
Result
The resulting architecture transformed the mobile application's home page from a predominantly code-defined interface into a backend-controlled, data-driven commerce experience.
Through the custom page builder, administrators gain greater control over how products, categories, promotional campaigns and visual content are presented to mobile users.
The JSON integration provides the technical bridge between these backend configurations and the mobile application, while the custom discount modules provide additional flexibility for managing promotional commerce scenarios.
Together, these components establish a more flexible foundation for Aljouf's digital commerce ecosystem, allowing the platform to evolve its mobile shopping experience without making every content change dependent on application-level development.
Project Highlights
Building a More Flexible Digital Commerce Experience
The Aljouf project demonstrates how a traditional eCommerce backend can be extended into a flexible content and mobile-commerce platform.
By introducing a custom page builder, structured JSON integration and dedicated promotional functionality, the platform gains a stronger connection between administration, merchandising and the customer-facing mobile experience.
The architecture provides Aljouf with a foundation where content can evolve quickly, promotions can be managed more efficiently and the mobile application's home page can be controlled through backend configuration rather than being permanently tied to a fixed application layout.
Project Services
- Custom eCommerce Development
- Backend Development
- Custom Admin Dashboard Development
- Page Builder Development
- Mobile Application API Integration
- REST / JSON API Development
- Product & Category Integration
- Discount & Promotion Module Development
- Multilingual Content Architecture
- Mobile Commerce Integration
