02 — Customizing Your Store
Almost every visual and behavioral setting in Raftaar Commerce lives in one place: the Customizer.
To get there: go to Appearance → Customize (or click Customize in the top admin bar while viewing your site). Everything updates live in the preview on the right as you change settings — nothing is saved until you click Publish.
There are over 200 individual settings, organized into 8 main panels. You don't need to touch most of them — the defaults are designed to look good out of the box. Below is a plain-language map of what's in each panel, so you can find the one setting you actually need without hunting.
Design
Your store's colors, fonts, and overall shape.
- Brand Colors — Pick one of 5 ready-made color palettes (see below), or fine-tune individual colors like your primary brand color, accent color, text color, and borders.
- Typography — Font choices for your site.
- Layout — A global "roundness" setting (choose from Sharp, Subtle, Small, Default, Rounded, or Pill) that controls how rounded corners are across buttons, cards, and images site-wide, plus overall page width.
About the color palettes
There are 5 built-in palettes to choose from: Slate (the default), Sage, Dusk, Bloom, and Midnight (a true dark theme). Picking one instantly updates every individual color picker to match — and you can still fine-tune any individual color afterward without losing the rest of the palette. Switching palettes later won't undo colors you've deliberately customized yourself.
Header & Navigation
- Header layout — choose between a Minimal look or a fuller Commerce style header.
- Desktop menu style — choose between a simple dropdown (Flyout) or a full Mega Menu with category images.
- Category filtering — choose which product categories should (or shouldn't) appear in your navigation menu automatically.
See Menus & Navigation for the full walkthrough.
Shop & Products
The largest panel — everything about how your product grid, filters, and product cards look and behave:
- Product Grid — how many products per row/page.
- Filter Sidebar — the shop page's filter controls.
- Product Cards — what appears on each product thumbnail (price, rating, Quick View button, Wishlist button, Buy Now button, Compare button, color swatches), each with its own separate toggle for whether it also shows on mobile. This section also includes a set of hover animation styles you can pick between — a magnetic 3D tilt, a holographic sheen (in a few color styles), a quick glitch flash, a "Venetian blind" image wipe, and a subtle depth/parallax float — all optional, purely visual flourishes.
- Single Product — settings for the individual product page, including how many related products to show and the optional live "people viewing this" counter (see Marketing & Conversion Tools).
- Trust Badges — small icons/text like "Secure checkout" or "Easy returns" shown near the Add to Cart button.
- Delivery Info — estimated delivery time messaging.
- Variation Swatches — the color/size swatch buttons on variable products (see Product Pages & Variations for the full picture).
- Recommendations — additional related/upsell product display settings.
Cart & Checkout
- Cart settings — the slide-out cart drawer's behavior.
- Checkout settings — your checkout flow.
- Add to Cart Animations — the little visual flourish when a product is added.
Marketing
- Social Proof — the pop-up customer activity messages (e.g. "Sarah in London just purchased this"). See Marketing & Conversion Tools for how these work. (Note: the separate live "people viewing this" counter is a different setting, found under Shop & Products → Single Product, not here.)
- Exit Intent — a popup shown when a visitor is about to leave the page.
- Blog & Content — blog-related display settings.
- WhatsApp Button — the floating "chat on WhatsApp" button. Needs a phone number entered here to actually appear — see Marketing & Conversion Tools.
Footer
- Newsletter — the footer email signup form.
- Brand & Social — your logo and social media links in the footer.
- Footer Colors and Footer Layout — visual settings for the footer area.
Performance
- AJAX Navigation — turns on/off instant, no-full-reload page transitions as visitors browse your site.
- Performance — a few technical speed-related toggles. The defaults are recommended; only change these if you know what you're adjusting.
Advanced
- Custom CSS & JS — a place to paste your own custom styling or scripts, if you (or a developer) want to make deeper visual tweaks without editing theme files directly. Leave this blank unless you're intentionally adding custom code here — anything pasted in runs exactly as written, with no theme adjustments applied to it.
Tips
- Changes are only saved when you click Publish at the top of the Customizer — closing the browser tab without publishing discards them.
- You can preview your site at desktop, tablet, and mobile sizes using the device icons at the bottom of the Customizer panel, without needing to resize your actual browser window.
- If a panel you expect to see is missing entirely, check that your license is active — see License, Activation & Updates.