§ 03 / Docs
Product form
The product form is where you create or edit a listing end to end: media, bilingual copy, pricing, inventory, variants, category, and publish state. The layout uses a main column for content and a sidebar for commerce controls.
Page layout
Overview and images sit in the wide column. Pricing, stock, category, and publish live in the sticky sidebar on large screens. On mobile, sections stack vertically in a logical order.
+--------------------------------+---------------+ | Images grid | Pricing | | Overview (title, description) | Stock | | Variants (optional) | Category | | | Publish toggle| +--------------------------------+---------------+ | [Save product] footer action | +------------------------------------------------+
Images
Upload one or more square images. Drag to reorder — the first image is typically the cover shown in lists. Delete unwanted files before save. Supported formats depend on server limits; keep file sizes reasonable for fast storefront loading.
Steps
- Click the upload tile or drop files onto the grid.
- Use move up/down controls to set the primary image first.
- Remove blurry or duplicate shots to keep the gallery clean.
Overview and pricing
Title and description fields support English and Arabic. Base price and compare-at price (optional) set default amounts for simple products without variants. Stock quantity applies to the default SKU unless variants override per row.
Steps
- Fill required titles — validation highlights missing locales.
- Enter base price in your shop currency.
- Set stock for simple products, or manage stock per variant below.
Variants
Enable variants when a product comes in multiple combinations. Select predefined options, then edit each generated row’s price, SKU, and stock. Collapse the section when done to reduce clutter.
Steps
- Toggle variants on.
- Choose option groups (e.g. Size + Color).
- Review generated rows — adjust price/stock individually.
- Remove impossible combinations if your UI allows deselecting values.
Variants enabled
----------------
Options: [Size v] [Color v]
|
v
Rows: S/Red $10 stock 4
M/Blue $12 stock 9Publish and drafts
The publish section controls whether shoppers can buy the item. Unpublished products remain in your dashboard but may be hidden on the storefront. Browser draft storage keeps in-progress work if you leave before submitting — restore when prompted after refresh.
Steps
- Fix all validation errors shown in the summary or inline.
- Choose published or draft status.
- Submit Save — wait for success confirmation before leaving.