SaudiSmart Development
SaudiSmartDev
SaudiSmart Development
HomeServicesPortfolioAboutContactBlog
Zid Themes

Theme Manual · v1.0

Bariq · بريق

Everything you need to install, configure and customize the Bariq theme on your Zid storefront.

Introduction

Bariq is a premium storefront theme handcrafted for the Zid platform. It targets four high-volume categories on Saudi e-commerce: Fashion & Jewelry, Electronics, Arts & Cultures, and Services — with a single configurable layout that adapts to each.

The theme ships in Arabic-first RTL with full English support, mobile-first responsive design, and a conversion-tuned product flow. Average First Contentful Paint stays under 1.2s on a 4G connection.

Version
1.0.0
Compatibility
Zid Storefront v3+
Languages
Arabic (RTL) + English (LTR)
Currencies
SAR · AED · USD
Categories
Fashion · Electronics · Arts · Services
Price
49 SAR (one-time, lifetime updates)

Installation

  1. Sign in to your Zid merchant dashboard at web.zid.sa.
  2. Navigate to Themes Market from the left sidebar.
  3. Search for "Bariq" or browse by SaudiSmart in the partner list.
  4. Click Install and confirm the 49 SAR one-time payment.
  5. Once installed, click Apply Theme to make Bariq the active theme on your storefront.
  6. (Optional) Use Preview to test the theme on your real catalog before going live.
Your existing products, collections, and storefront content remain untouched — Bariq only changes the look and feel.

Theme Settings

Open Themes → Customize in your Zid dashboard to configure Bariq. The settings panel is organised into the following groups:

General
Logo, favicon, currency, language defaults
Colors
Brand gold, primary ink, surface tones, accent
Typography
Arabic & Latin font pairs, weights, scale
Header
Layout variant, sticky behavior, search visibility
Homepage
Hero, categories, featured grid, promo banners
Footer
Columns, social links, payment badges, newsletter
Product
Gallery layout, related products, reviews position
Checkout
Express checkout, payment methods, trust badges

Categories & Navigation

Bariq is optimized for stores with up to 8 top-level categories. Categories defined in your Zid catalog appear automatically in the desktop nav bar and the mobile bottom drawer.

  • Mega menu: Categories with sub-collections render as a 3-column mega menu on hover.
  • Active state: Current category is highlighted with the brand gold underline.
  • Featured strip: A persistent promo line on the right of the nav surfaces seasonal offers.

Homepage Sections

The homepage is composed of stackable sections you can rearrange or hide:

Hero Banner
Headline, subhead, two CTAs, animated brand mark, three KPI stats
Featured Categories
Up to 4 cards with category art, item counts, and hover CTA
Featured Products
Filterable grid with quick-view, wishlist, and add-to-cart
Promo Strip
Two side-by-side promotional banners with action buttons
Trust Strip
Shipping, returns, secure payment, support badges
Newsletter
Centered signup with discount lure

Product Page

Bariq's product page is conversion-tuned with a fixed call-to-action on mobile, gallery zoom on desktop, and inline cross-sell.

  • Sticky "Add to Cart" bar on mobile after scrolling past the gallery.
  • Variant selector with stock indicators and price updates.
  • Tabs for Description, Specifications, Shipping, Reviews — collapsible on mobile.
  • "Frequently bought together" module powered by the Zid recommendation API.
  • Star ratings with verified-buyer badge and review filtering.

Cart & Checkout

Bariq uses Zid's native checkout flow, themed to match the storefront. The cart drawer slides in from the start side (right in RTL, left in LTR) without a full page reload.

  • Free-shipping progress bar towards the configured threshold.
  • Inline coupon entry and applied-discount summary.
  • Express buttons for Apple Pay and Tamara when enabled by the merchant.
  • Trust badges (mada, Visa, Apple Pay, Tamara) auto-render based on merchant settings.

Colors & Typography

Defaults are tuned for premium feel — but every token is editable from the customizer:

Brand Gold
#C9A227 — primary CTA, accents, logo
Gold Light
#E5C76B — hover states, highlights
Gold Dark
#8E6F0F — emphasis, badges
Ink
#0A0A0A — body text, dark surfaces
Cream
#FAF7EC — page background, soft surface
Heading Font
IBM Plex Sans Arabic / Inter (configurable)
Body Font
IBM Plex Sans Arabic / Inter (configurable)
Type Scale
Mobile 14-32 / Desktop 14-60

RTL & Multi-language

Bariq is RTL-native — Arabic is the primary direction, with English as a fully-supported LTR fallback. Switching the storefront language flips the entire layout (icons, navigation, cart drawer, animations) without breaking spacing.

  • Arabic numerals (٠١٢٣) toggleable via theme setting.
  • Currency symbol position auto-adapts to locale (ر.س after / SAR before).
  • All copy strings are externalized for easy translation in the Zid translations panel.

Performance

Lighthouse Performance
≥ 92 on mobile
First Contentful Paint
< 1.2s on 4G
Largest Contentful Paint
< 2.0s on 4G
Cumulative Layout Shift
< 0.05
JS Bundle (gzipped)
≈ 38 KB above-the-fold
Image Strategy
Lazy-load + responsive srcset (Zid CDN)

Support

Bariq is supported directly by SaudiSmart. We respond within one business day, and ship compatibility patches whenever Zid releases storefront updates.

WhatsApp
+966 591 257 714
Website
development.saudismart.co
Hours
Sun–Thu · 9:00 AM – 6:00 PM (KSA)
SLA
First response within 24 business hours
Updates
Free for the lifetime of the theme license

Changelog

v1.0.0— Initial release
  • Initial release with all four target categories.
  • Arabic-first RTL with English fallback.
  • Conversion-tuned product page with sticky mobile CTA.
  • Native Zid checkout integration with themed cart drawer.