StoreCraft Pro Documentation
This guide covers the full theme setup — from installation and plugins to Theme Design, Customizer, WooCommerce, drawers/popups, and every common feature shared across all homepage styles.
Table of Contents
1. Requirements
Server / WordPress
- WordPress 6.0+ recommended
- PHP 7.4+ (PHP 8.0+ preferred)
- MySQL 5.7+ / MariaDB 10.3+
- HTTPS recommended for checkout
Commerce Stack
- WooCommerce (required for shop features)
- Memory limit 256M+ recommended
- Pretty permalinks enabled
- Optional: Contact Form 7, One Click Demo Import
2. Installation
Method A — WordPress Admin
- Go to Appearance → Themes → Add New → Upload Theme.
- Upload the theme ZIP (
storecraft-pro.zipor package name provided). - Click Install Now, then Activate.
- Install recommended plugins when prompted (see next section).
Method B — FTP / File Manager
- Extract the theme folder.
- Upload it to
wp-content/themes/. - Ensure the theme path looks like
wp-content/themes/storecraft-pro/. - Activate from Appearance → Themes.
3. Required & Recommended Plugins
Open Appearance → Install Plugins (TGMPA). Plugins are marked recommended in the installer, but WooCommerce is required for a working storefront.
| Plugin | Purpose | Priority |
|---|---|---|
| WooCommerce | Products, cart, checkout, shop pages, drawers, live search products | Required |
| One Click Demo Import | Import demo content / widgets / customizer (when demo files are shipped) | Recommended |
| Contact Form 7 | Contact page form shortcode | Recommended |
| StoreCraft Ecom (companion) | Currency switcher, multi-buy discount, bought together, sales countdown, recently purchased popup | Strongly recommended |
4. First-Time Setup Checklist
-
Activate theme + plugins
Activate StoreCraft Pro, WooCommerce, and StoreCraft Ecom (if included). -
Run WooCommerce setup
Complete currency, shipping, payments, and create default shop pages. -
Choose Theme Design
Go to Appearance → Theme Design and select Homepage 1–7. Header, footer, and overlays switch automatically. -
Set Front Page
Settings → Reading → A static page → choose your Home page (and optionally a Blog posts page). -
Assign Menus
Create menus and assign toPrimaryandFooterlocations. -
Customize sections
Open Appearance → Customize and configure Homepage Sections + StoreCraft Options. -
Add products & categories
Populate WooCommerce catalog so homepage product sections, search, and drawers have content.
5. Demo Import
One Click Demo Import
After installing the OCDI plugin, open Appearance → Import Demo Data (or the StoreCraft demo notice link).
- Expected package files (when shipped):
content.xml,widgets.wie,customizer.dat - After import, menus and Home/Blog pages may be assigned automatically
Homepage 6 Demo Defaults
On Theme Design, Homepage 6 includes an Apply Homepage 6 Demo action that seeds Customizer defaults for the grocery layout (without requiring XML content).
assets/demo/, use Theme Design + Customizer + your own
products to configure the store. The theme still works fully without demo content.
6. Theme Design Switcher
Path: Appearance → Theme Design
StoreCraft Pro includes 7 complete storefront designs. Selecting one homepage also activates the matching chrome (header/footer) and overlay skins.
| Design | Style | Auto-linked chrome |
|---|---|---|
| Homepage 1 | Beauty / classic StoreCraft | Header 1 · Footer 1 · overlays 1 |
| Homepage 2 | Electronics / departments | Header 2 · Footer 2 · overlays 2 |
| Homepage 3 | Furniture / full-bleed hero | Header 3 · Footer 3 · overlays 3 |
| Homepage 4 | Cosmetics | Header 4 · Footer 4 · overlays 4 |
| Homepage 5 | Jewelry | Header 5 · Footer 5 · overlays 5 |
| Homepage 6 | Grocery marketplace | Header 6 · Footer 6 · overlays 6 |
| Homepage 7 | Pet marketplace | Header 7 · Footer 7 · overlays 7 |
7. Customizer Overview
Open Appearance → Customize. Controls are grouped into two main areas.
Panel: Homepage Sections
- Active homepage information
- Header settings (for the active header design)
- Footer settings (for the active footer design)
- Section settings for the currently selected homepage only
Panel: StoreCraft Options
- Typography
- Mega Menu
- Page Layout
- Blog Layout
- Single Blog Page
- Shop Page
- Single Product
- Sticky Cart Drawer
- Sticky Wishlist Drawer
- Coupon Notice Popup
- Exit Popup
- Quick View
- Mobile Bottom Navigation
- Back to Top / Smooth Scroll
- Contact Page / 404 / Coming Soon / Maintenance
9. Pages & Page Templates
| Template | Use for |
|---|---|
| Default | Standard pages with theme layout |
| Full Width | Landing / marketing pages |
| Left / Right Sidebar | Content pages with widgets |
| Landing | Focused conversion page layout |
| Contact | Contact page (CF7 shortcode from Customizer) |
| Blog Full / Left / Right | Blog listing layouts |
WooCommerce pages (Shop, Cart, Checkout, My Account) are created by WooCommerce. Style and behavior are controlled by theme templates + Customizer shop/product settings.
10. Homepages — Common Feature Catalog
Every homepage is built from reusable section types. Exact sections differ by design, but the systems are the same: enable section → edit titles/content → choose product sources → style colors.
Common section types
Hero / Banner
Slider or static hero with CTAs. Often powered by Hero Banner posts.
Categories
Shop-by-category grids/carousels from WooCommerce product categories.
Product Grids
Featured, new, best sellers, on-sale, custom sources.
Deals / Countdown
Flash sales, deal of the day/week, limited-time blocks.
Promo Banners
Image/text promotional cards with links.
Brands
Logo strips / brand showcases.
Testimonials
Customer stories from Testimonials CPT.
Blog / Tips
Latest posts modules for content marketing.
Trust / Services
Shipping, support, and store benefit strips.
What each homepage emphasizes
| Homepage | Typical modules |
|---|---|
| 1 — Beauty | Hero, categories, featured/new/bestsellers, flash sale, deal of day, testimonials, blog |
| 2 — Electronics | Hero, brands, product showcases, deal of week, coupons, trending, featured |
| 3 — Furniture | Hero, categories, featured, promo grid, collections, flash deal, before/after, gallery, news |
| 4 — Cosmetics | Hero, categories, new arrivals, lookbook, beauty showcase, trending, gifts, brands, reviews, blog |
| 5 — Jewelry | Hero, categories, featured, promos, new arrivals, campaign countdown, weekly sales, brands, news |
| 6 — Grocery | Coupon strip, hero, categories, bestsellers, dual/triple promos, deals, hot product, brands, news |
| 7 — Pets | Hero, trust strip, categories, collection, bestsellers, deals, stories, care tips, services, brands club |
12. Drawers, Popups & Quick View
Each homepage has a matching visual skin and open animation for these overlays. Core behavior (AJAX, WooCommerce fragments, cookies) is shared across all designs.
Cart Drawer
- Opens from header / mobile nav cart icon
- Also opens after AJAX add-to-cart
- Qty update / remove item
- Optional free-shipping progress bar
- Optional upsell products
- Checkout + view cart actions
Wishlist Drawer
- Cookie-based wishlist (no account required)
- Open from wishlist icon
- Add/remove from product cards & drawers
- Move items toward cart / bag actions
- Count badge in header & mobile nav
Coupon Popup
- Delayed auto-open on first visit (session based)
- Offer headline / code / email capture UI
- Custom colors and media per design
- Dismiss / don’t show again behavior
Exit Popup
- Exit-intent (mouse leave) after minimum time
- Offer / email capture / dismiss controls
- Cookie to avoid repeated showing
- Design-matched animation (fade, bounce, bloom…)
Quick View
Product cards include a Quick View action. It loads product details via AJAX into a modal: gallery, price, short description, quantity, add to cart — without leaving the page.
Open animations by design family (examples)
- Right slide / bottom sheet / scale + fade / clip wipe
- Soft float (design 6)
- Petal slide, paw bloom, ticket bloom, studio reveal (design 7)
13. WooCommerce Features
Shop Archive
- Custom shop layout width (full / container)
- Product grid density defaults
- Sorting and breadcrumbs
- Filter sidebar options (categories, attributes, price, rating, and design-specific filters)
- Sale / stock labels
Single Product
- Gallery zoom / lightbox / slider support
- Highlights, sold count, viewing notice (when enabled)
- Trust badges
- Tabs: description, additional information, reviews, shipping (configurable)
- Related products + recently viewed
- Share / compare / size guide support
- Newsletter block on product page (optional)
Cart & Checkout
- Styled cart and checkout templates
- Progress steps (Cart → Checkout → Complete)
- Cross-sells placement on cart
- Header cart count/fragments stay in sync after AJAX updates
My Account
WooCommerce My Account uses a theme-styled template for a consistent storefront experience.
14. Live Search, Wishlist & Currency
Live Search
- Type in header search to fetch product suggestions via AJAX
- Shows product image, name, and price
- Supports category-aware search on designs that include a category selector
- Click outside / Escape closes suggestions
Wishlist
- Works with heart/toggle buttons on product cards
- Stored in browser cookie (
bsp_wishlist) - Drawer UI matches active homepage design
Currency Switcher
Provided by the StoreCraft Ecom companion plugin via shortcode
[storecraft_currency_switcher], placed in supported headers/footers.
16. Custom Content Types
| Content type | Used for |
|---|---|
| Hero Banners | Homepage hero slides / banners |
| Testimonials | Review / story sections on homepages |
| Size Guides | Product size guide content |
Create and manage these from the WordPress admin menu after the theme is active.
17. Coming Soon, Maintenance & 404
Coming Soon
Launch mode with countdown and message. Admins can still browse the site.
Maintenance
Takes priority over Coming Soon when enabled. Useful during updates.
404 Page
Customizable not-found experience from StoreCraft Options.
18. StoreCraft Ecom Companion Plugin
Install and activate StoreCraft Ecom for advanced storefront modules:
| Module | Shortcode / notes |
|---|---|
| Currency Switcher | [storecraft_currency_switcher] |
| Multi-Buy Discount | [storecraft_multi_buy_discount] |
| Bought Together | [storecraft_bought_together] |
| Sales Countdown | [storecraft_sales_countdown] |
| Recently Purchased Popup | [storecraft_recently_purchased] |
Configure these modules in Customizer / plugin settings after activation.
19. Translation & Child Theme
Translation
- Text domain:
huda-pro - Theme loads translations from the theme
languagesdirectory when present - Use Loco Translate / Poedit / translate.wordpress.org workflow with this text domain
Child Theme
For safe custom PHP/CSS overrides, create a child theme that declares StoreCraft Pro as the parent. Prefer Customizer and Theme Design for design changes whenever possible.
/* Theme Name: StoreCraft Child Template: storecraft-pro */
20. FAQ & Tips
Homepage sections are empty
Add WooCommerce products/categories, or fill Customizer media/text fields for that section. Some modules also need Hero Banner / Testimonial posts.
Cart drawer / quick view not opening
Confirm WooCommerce is active, caches are cleared, and no JS console errors from optimization plugins. Exclude theme scripts from “defer all JS” if needed.
Currency switcher missing
Install/activate StoreCraft Ecom and ensure the design places the currency shortcode in header/footer.
Changed homepage but colors look old
Hard refresh (Ctrl/Cmd + F5). Asset versions may be cached by browser or cache plugins.
Which design should I pick?
Pick by niche: beauty (1), electronics (2), furniture (3), cosmetics (4), jewelry (5), grocery (6), pets (7). You can switch later without reinstalling.
21. Version Notes
StoreCraft Pro 1.0.6
- Multi-homepage framework (designs 1–7)
- Matching header/footer/overlay skins per design
- WooCommerce templates for shop, product, cart, checkout, account
- Live search, wishlist drawer, coupon/exit popups, quick view
- Customizer-driven setup for all major sections