Adding & Managing Products
Comprehensive guide to product creation, media management, pricing strategies, and SEO
The Product Creation Form
In Teyweb, product data is managed through an optimized editor (`ProductCreationPage.tsx` and `ProductInfoPage.tsx`).
To add a new product, navigate to Products > Add New Product from your merchant dashboard sidebar. The form is structured into intuitive operational cards: Basic Details, Media, Pricing & Inventory, Organization, and SEO.
Titles, Descriptions & Rich Text
Your product title should be specific and descriptive (e.g. "Men's Italian Suede Chelsea Boots - Dark Tan" rather than just "Boots"). This dramatically boosts search discoverability on both Google and your internal store search bar.
The rich text description editor allows you to format key product highlights:
Key Takeaways
- Bulleted product specifications (Fabric composition, dimensions, weight, care guidelines)
- Highlighted benefits (e.g. "Breathable memory foam insole", "Handcrafted in Lagos")
- Embedded sizing advice (e.g. "Fits true to size. If between sizes, order one size up")
- Warranty & authenticity guarantees
Media Gallery & Image Optimization
High-quality visual presentation directly drives customer purchase decisions. Teyweb supports up to 10 photos per product:
- Upload formats: JPG, PNG, WebP.
- Recommended resolution: 1200 x 1200px (1:1 square ratio) for consistent catalog alignment.
- Drag-and-drop to reorder images: The very first image in your gallery automatically serves as the primary catalog thumbnail and OpenGraph social share image.
- Automatic CDN Compression: Images are stored on Cloudflare R2 and delivered via edge caching with automatic WebP conversion, ensuring rapid page loads on mobile phones.
Pricing, Compare-At & Cost of Goods (COGS)
Teyweb provides comprehensive pricing control to maximize both conversion and profit monitoring:
| Field | Customer Visibility | Purpose & Impact |
|---|---|---|
| Price (NGN) | Publicly visible | The actual amount the customer is charged at checkout. |
| Compare-At Price (NGN) | Publicly visible | The original higher price. When set higher than Price, the storefront displays a strikethrough badge (e.g., Was ₦25,000, Now ₦18,000) and calculates the percentage discount badge. |
| Cost Price / COGS (NGN) | Strictly private (Merchant Only) | What you paid to manufacture or source the item. Teyweb calculates your Gross Profit Margin % in your analytics without revealing this to customers. |
| SKU (Stock Keeping Unit) | Public/Receipt | Your internal tracking alphanumeric code (e.g., BOOT-SUE-01). |
| Barcode / EAN / UPC | Internal / Scanning | Standard barcode numbers for integration with retail barcode scanners. |
Product Statuses: Active, Draft, Archived
Manage your catalog life cycle with 3 standard statuses:
1. Active (Published): The product is live, visible in your storefront catalog, indexed in search, and ready for purchase.
2. Draft: The product is hidden from customers. Ideal for preparing seasonal collections or staging items before professional photo shoots are ready.
3. Archived: Temporarily hides retired products without permanently deleting their historical sales data or order relationships.
Was this guide helpful?
Help us improve our merchant documentation by sharing your feedback.