Saabaai

A refined WooCommerce theme for perfume houses, fragrance boutiques and beauty brands. Thank you for your purchase — this guide takes you from upload to a finished store.

Requirements

What's in the package

Installation

1. In WordPress go to Appearance → Themes → Add New → Upload Theme, choose saabaai.zip, click Install Now and then Activate.
2. You are taken to Appearance → Saabaai setup. Click Install / Activate for WooCommerce and Saabaai Core.
3. Import the demo (next section) or start building with the Customizer.

Demo import

Go to Saabaai → Demo import and click Import demo content. The importer runs in small steps (so it works on modest hosting) and adds:

• 13 fragrances (simple and variable products with sizes), categories with images, attributes, SKUs and reviews
• Fragrance notes, longevity and sillage for every product
• Home, Our House, Contact, FAQ, Shipping & returns, Terms, Journal and Wishlist pages
• Four journal posts, four testimonials
• Menus, shop filter widgets and every homepage setting

It also sets the cart and checkout pages to the classic WooCommerce layout so every detail follows the theme design, turns off WooCommerce's “coming soon” mode and enables “Cash on delivery” so you can test checkout.

The demo store is set up for Nepal: prices in Nepalese rupees (shown as Rs., no decimals), store address in Kathmandu and selling to Nepal. Change any of this in WooCommerce → Settings → General (store address, selling locations, currency). To prefer the ₨ sign over Rs., add add_filter( 'saabaai_core_npr_symbol', '__return_false' ); to your child theme.

Changed your mind? Remove demo content deletes everything the importer created.

Customizer options

Open Appearance → Customize. All options preview live.

Homepage sections

The homepage appears when Settings → Reading uses “A static page” as the homepage. Sections, in order:

Developers can reorder sections with the saabaai_home_sections filter.

Menus & mega menu

Menu locations: Primary, Secondary (right of the logo), Mobile (falls back to Primary), Footer column 1–3 and Footer bottom links. The footer column headings use the menu names.

Creating a mega menu

1. In Appearance → Menus open Screen Options and tick CSS Classes.
2. Add the class mega-menu to a top-level item.
3. Its second-level items become column headings and third-level items the links in each column.

Shop & filters

Add filters to the Shop filters widget area (Appearance → Widgets): Filter Products by Price, Filter Products by Attribute, Product Categories and Active Product Filters work best. Choose whether they appear in a slide-out drawer or a left sidebar in Customize → Theme options → Shop & product.

The shop header uses the Shop page excerpt as its description (enable “Excerpt” in the editor's options), category headers use the category description and image.

The free-shipping progress bar in the bag and on the cart page uses the threshold from the Customizer. Set the same amount in your WooCommerce “Free shipping” method.

Products & fragrance notes

Edit a product and open the Fragrance tab in the Product data box (requires Saabaai Core):

• Top / Heart / Base notes — comma separated, e.g. Bergamot, Pink pepper. The first note of each tier is shown on product cards.
• Longevity and Saabaai — 1 to 5 meters.
• Concentration, Best worn and Seasons — shown as tags.

Use a product attribute such as Size for variations; the theme shows the options as buttons. Use 4:5 portrait images (e.g. 1200 × 1500 px) for the best result, and add a second gallery image for the hover effect.

Wishlist & quick view

Both are part of Saabaai Core and can be switched off in Saabaai → Settings. The wishlist is stored in the visitor's browser and, for logged-in customers, saved to their account. The wishlist page is created automatically and contains the [saabaai_wishlist] shortcode.

Testimonials

Saabaai → Testimonials → Add testimonial: the title is the customer name, the content is the quote; set the rating and a caption (e.g. the fragrance) in the sidebar. Drag order with the Order field.

Newsletter

In Customize → Homepage → Newsletter paste your provider's form action URL and the email field name (Mailchimp: EMAIL). Without an action URL the form shows a demo thank-you message.

Block patterns & styles

In the block editor open the inserter → Patterns → Saabaai: About, Contact, FAQ accordion and Promo. Block styles: Eyebrow (paragraph), Arch (image) and Display italic (heading). Page templates: Full width and Canvas (no title).

Translation & RTL

Translation templates are in saabaai/languages/saabaai.pot and saabaai-core/languages/saabaai-core.pot. Translate with Loco Translate or Poedit and save the files as saabaai-{locale}.mo in wp-content/languages/themes/. RTL stylesheets load automatically for right-to-left languages.

Child theme

Install and activate saabaai-child.zip if you plan to change code. Add CSS to its style.css and PHP to its functions.php; updates to Saabaai never overwrite them. Customizer settings are stored per theme, so set up the child theme before customising, or use a plugin such as “Customizer Export/Import”.

Developer hooks

// Example: hide the journal section and show 12 products per tab.
add_filter( 'saabaai_home_sections', function ( $sections ) {
	return array_values( array_diff( $sections, array( 'journal' ) ) );
} );

WooCommerce is adapted entirely through hooks — the theme contains no WooCommerce template overrides, so WooCommerce updates never leave outdated templates behind.

Troubleshooting

The homepage shows my latest posts

Set Settings → Reading → Your homepage displays to “A static page” and choose your Home page.

Cart and checkout look different from the demo

New WooCommerce stores use the block-based cart and checkout. To match the demo, edit the Cart page and replace its content with a Shortcode block containing [woocommerce_cart], and the Checkout page with [woocommerce_checkout]. The demo importer does this for you.

Product images are blurry or cropped oddly

Regenerate thumbnails with the “Regenerate Thumbnails” plugin after activating the theme, and use 4:5 portrait images.

The demo import stops

Raise PHP max_execution_time to 120 and memory_limit to 256M, reload the page and click Import again — finished steps are skipped.

Credits & licenses

• Theme and plugin code: GNU GPL v2 or later.
• Cormorant Garamond (The Cormorant Project Authors) and Jost (The Jost Project Authors): SIL Open Font License 1.1.
• Icons, demo product photography and illustrations: original artwork created for Saabaai, GPL v2 or later. You may use them on your own store.

Changelog