Stylezen

Welcome to the Stylezen Theme documentation. Thank you for choosing the Stylezen theme to build your Woo website. This documentation will guide you through all the steps to set up the theme on your site. If you find any confusion or issues with the theme, then you can contact us from our support page.

Requirements & Installation

↑ Back to top

Requirements

↑ Back to top

Requirement	Version
WordPress	6.1 or later (required for full Site Editor support)
PHP	5.6 or later (7.4+ recommended)
WooCommerce	Latest version, for the store/shop features
Required plugin	Gutenify, provides the extra block patterns and one-click demo import used by this theme

Stylezen is a modern “block theme.” That means you build and customize your entire site, including colors, fonts, and page layouts, using WordPress’s built-in Site Editor. You don’t need a separate page builder plugin.

Recommended plugins

↑ Back to top

• WooCommerce: required to use the shop, product, cart, checkout, and order templates included with the theme.
• Gutenify: the companion starter templates/ patterns plugin.

Purchasing the theme

↑ Back to top

Stylezen is a premium theme sold on the WooCommerce Marketplace; it is not available on WordPress.org or as a free download. Purchase a subscription at WooCommerce Marketplace, your subscription includes theme updates, premium support, and a 30-day money-back guarantee.

Installing the theme

↑ Back to top

1. After purchase, download the theme .zip file from your WooCommerce.com → My Account → Downloads page.
2. In your WordPress admin, go to Appearance → Themes → Add New Theme → Upload Theme.
3. Choose the stylezen.zip file and click Install Now.
4. Click Activate once installation finishes.

Installing WooCommerce

↑ Back to top

1. Go to Plugins → Add New Plugin.
2. Search for WooCommerce, then click Install Now and Activate.
3. Follow the WooCommerce setup wizard to configure your store location, currency, and payment methods.

Installing the Gutenify plugin

↑ Back to top

1. Go to Plugins → Add New Plugin.
2. Search for Gutenify, then click Install Now and Activate.
3. Once active, Stylezen appears as an available template kit/theme inside the Gutenify demo importer (see next section).

Theme Customization (Site Editor & Global Styles)

↑ Back to top

Stylezen is a full block theme, so almost all customization happens in Appearance → Editor (the Site Editor) rather than the classic Customizer.

Opening the Site Editor

↑ Back to top

Go to Appearance → Editor, or click Edit Site from the WordPress admin bar while viewing your site.

From here you can edit:

• Templates: full page layouts (Home, Single Product, Archive, Cart, Checkout, 404, etc.)
• Template Parts: reusable sections shared across templates (Header, Footer, Sidebar, Product Sidebar, Product Filter Sidebar)
• Patterns: pre-built sections you can insert into any template or page
• Styles: global colors, typography, and layout

Editing tools

↑ Back to top

• Block inserter (+): add blocks or patterns anywhere in a template.
• List View: see and navigate the full block hierarchy of a template.
• Block toolbar & settings sidebar: per-block alignment, color, spacing, and typography controls.
• Styles panel: site-wide color palette, typography, and layout controls (the paint-brush icon in the Site Editor).

Global Styles

↑ Back to top

All of Stylezen’s colors, fonts, and spacing are built in and ready to use. To change any of them, go to the Site Editor and click the paintbrush icon to open the Styles panel. No code required.

Color palette

↑ Back to top

Slug	Name	Default
foreground	Foreground	#2B2322
background	Background	#ffffff
primary	Primary	#32535C
secondary	Secondary	#b5643f
section-background	Section Background	#f6f6f6
background-secondary	Secondary Background	#e2e2e2
button-background / -hover	Button Background / Hover	#211710 / #b5643f
button-text / -hover	Button Text / Hover	#ffffff
body-text	Body Text	#706d6c
heading	Heading	#000000
border-box	Border	#242424
tertiary	Tertiary	#c3d9e7
input-field	Input Field	#eeeeee

Plus a set of general-purpose accent colors (Boulder, Coffee, Cyan, Dark Blue, Sky Blue, Dark/Lite Green, Purple, Dark Purple, Orange, Lite Red, Hexadecimal, Pink) available for use in individual blocks/patterns.

Edit any of these from Styles → Colors → Palette, or override colors per-section using each block’s own color controls.

Typography

↑ Back to top

• Fonts: Stylezen uses two fonts, Lexend and Public Sans, built into the theme so pages load fast with no extra setup. Text automatically resizes to look right on both phones and desktop screens, so you don’t need to set separate mobile and desktop sizes. To change fonts or sizes, go to Styles > Typography in the Site Editor.
• Font sizes: a fluid scale from x-small (0.875rem) to extra-extra-huge (up to 9rem), most using clamp() so text scales smoothly between mobile and desktop.
• Heading styles: H1–H6 each have their own fluid size, line-height, and weight, set under styles.elements in theme.json.

Edit fonts and sizes from Styles → Typography.

Spacing & layout

• Content width: 1140px · Wide width: 1440px.
• A fluid spacing scale (spacingSizes 10–60) is used throughout the patterns so padding/margins scale with viewport width.
• Custom spacing/gap tokens (small, medium, large, plus baseline/horizontal/vertical gaps) are available under settings.custom for use in patterns and blocks that reference var(--wp--custom--...).

Shadows

Four custom shadow presets are included (Natural Bottom, Naturala Circle, Naturala Circle Two, Naturala Circle Three) in addition to WordPress’s default shadow presets, available from any block’s Effects → Shadow control.

Setting your homepage

↑ Back to top

By default, the home.html template (assigned as the site’s Front Page) loads the Home One pattern. To change what displays on your homepage or blog page:

1. Go to Settings → Reading.
2. Choose A static page and select your desired homepage/posts page, or leave Your homepage displays: Your latest posts to use the default blog template.

Switching header and footer styles

↑ Back to top

The header.html and footer.html template parts each simply wrap a single pattern, which makes swapping styles a matter of changing one pattern reference:

• Header patterns: Header (default), Header Search, Header Transparent, Header Transparent Only Home (the theme’s default)
• Footer patterns: Footer (default), Dark Footer, Sticky Footer

To switch styles: open Appearance → Editor → Patterns, find the desired header/footer pattern under the Stylezen – Header or Stylezen – Footer categories, and either:

• Edit the Header/Footer template part directly and replace its contents with the pattern you want (select the existing pattern block, delete it, then insert the new one), or
• Insert the desired pattern directly into a specific template if you only want a different header/footer on one page.

Templates & Block Patterns Reference

↑ Back to top

Templates

Templates control full-page layouts and are editable from Appearance → Editor → Templates.

Template file	Used for
home.html	Site homepage (Home One layout by default)
index.html	Fallback template used when no more specific template matches
page.html	Default page template
page-no-title.html	Custom template: “Page (No Title / Feature Image)”; hides the title, useful for landing pages
blank.html	Custom template: “Blank”; post content only, no header/footer, for fully custom landing pages
blog-listing.html	Custom template: “Blog Listing”; assignable to any page to show the blog post list
single.html	Single blog post
archive.html	Default post archive (categories, tags, dates, author)
search.html	Default search results
404.html	Not-found page
archive-product.html	WooCommerce shop / product catalog page
single-product.html	WooCommerce single product page
taxonomy-product_cat.html	Products filtered by category
taxonomy-product_tag.html	Products filtered by tag
taxonomy-product_attribute.html	Products filtered by attribute (e.g. size, color)
product-search-results.html	WooCommerce product search results
page-cart.html	WooCommerce Cart page
page-checkout.html	WooCommerce Checkout page
order-confirmation.html	WooCommerce order confirmation / thank-you page

Template Parts

Reusable sections shared across templates, editable from Appearance → Editor → Patterns → Template Parts.

Template part	Default pattern loaded
header.html	stylezen/header/header-transparent-only-home
footer.html	stylezen/footer/footer-default
sidebar.html	stylezen/sidebar
product-sidebar.html	stylezen/product-sidebar
product-filter-sidebar.html	stylezen/product-filter-sidebar

Pattern reference by group

↑ Back to top

Header

Pattern	Slug
Header (default)	stylezen/header/header-default
Header Search	stylezen/header/header-search
Header Transparent	stylezen/header/header-transparent
Header Transparent Only Home	stylezen/header/header-transparent-only-home

Footer

Pattern	Slug
Footer (default)	stylezen/footer/footer-default
Dark Footer	stylezen/footer/dark-footer
Sticky Footer	stylezen/footer/sticky-footer

Sidebars

Pattern	Slug
Sidebar	stylezen/sidebar
Product Sidebar	stylezen/product-sidebar
Product Filter Sidebar	stylezen/product-filter-sidebar

Home One layout

The “Home One” demo homepage (stylezen/home-one/home) is assembled from:

Pattern	Slug
Hero Content	stylezen/hero-content
Hero Content Two	stylezen/hero-content-two
Video Cover Banner	stylezen/cover-video-banner
Promotional Banner	stylezen/promotional-banner
Latest Products	stylezen/latest-products
Single Hand Pick Product with Cover	stylezen/single-hand-pick-product-with-cover
Special Product Details	stylezen/special-product-details

Home Two layout

The “Home Two” alternate homepage is assembled from:

Pattern	Slug
Hero Content	stylezen/hero-content
Main Banner	stylezen/main-banner
Feature Banner	stylezen/feature-banner
Feature Banner Two	stylezen/feature-banner-two
New Arrivals	stylezen/new-arrivals
New Season	stylezen/new-season
Best Selling Products	stylezen/best-selling-products
Shop The Look	stylezen/shop-the-look
Our Brands	stylezen/our-brands
Testimonials	stylezen/testimonials
Latest News	stylezen/latest-news

To switch your homepage from Home One to Home Two, open the Home template in the Site Editor, select and remove the stylezen/home-one/home pattern block, then insert stylezen/home-two/home in its place, or mix and match individual sections from either layout.

Single product

Pattern	Slug
Single Product Details	stylezen/single-product-details
Single Product Gallery	stylezen/single-product-gallery
Related Products	stylezen/related-products
Single Product Best Seller	stylezen/single-product-best-seller

Shop / merchandising

Pattern	Slug
Shop By Category	stylezen/shop-by-category

Pages (top level)

Pattern	Slug	Use
About Page	stylezen/about-page	Full “About” page layout
Contact Page	stylezen/contact	Contact page with form section
FAQ Page	stylezen/faq-page	FAQ/accordion page layout
Our Services	stylezen/services	Services listing section
Post Title	stylezen/cover-with-post-title	Cover header used by single.html / search.html
Archive Title	stylezen/cover-with-archive-title	Cover header used by archive.html
404 Error Page	stylezen/hidden-404	Content shown on 404.html

Inserting a pattern

↑ Back to top

1. In the Site Editor or post/page editor, click the block inserter (+).
2. Switch to the Patterns tab.
3. Select a Stylezen category (e.g. Stylezen – Product) or search by name.
4. Click a pattern to insert it, then edit its text, images, and colors like any other block content.

WooCommerce Store Setup

↑ Back to top

Stylezen is built and tested against WooCommerce’s block templates, so once WooCommerce is active, all shop-related pages (Shop, Single Product, Cart, Checkout, product taxonomies, Order Confirmation) are styled automatically. No extra setup is required beyond installing WooCommerce and adding products.

Adding products

↑ Back to top

Stylezen supports all standard WooCommerce product types:

• Simple product: a single, standalone product.
• Grouped product: a collection of related simple products that can be purchased together.
• External/Affiliate product: a product you link out to sell elsewhere.
• Variable product: a product with variations (e.g. size/color), each with its own price, SKU, and stock.

To add a product, go to Products → Add New Product in the WordPress admin and follow the WooCommerce product editor. See the official WooCommerce documentation for detailed steps: https://woocommerce.com/document/managing-products/

Product image sizing

↑ Back to top

Stylezen adjusts the WooCommerce thumbnail image size to 480×600px, cropped, to match the portrait product-card layout used throughout the theme’s patterns. For best results, upload product images close to or larger than a 4:5 portrait aspect ratio.

Shop page & catalog templates

• The Product Catalog template (archive-product.html) is used for the main shop page and includes a breadcrumb bar, filter sidebar (product-filter-sidebar part), and the product grid.
• Products by Category / Tag / Attribute templates apply the same layout when browsing a specific taxonomy term.
• The Product Search Results template applies when a shop search is performed.

You can further customize any of these by opening them in Appearance → Editor → Templates and rearranging the WooCommerce blocks (Product Collection, Filters, etc.) or swapping in a different sidebar pattern.

Single product page

↑ Back to top

The Single Product template combines the stylezen/single-product-details and stylezen/single-product-gallery patterns for the main product view, with stylezen/related-products and stylezen/single-product-best-seller available as optional upsell sections you can add underneath.

Cart, Checkout & Order Confirmation

↑ Back to top

The page-cart.html, page-checkout.html, and order-confirmation.html templates use WooCommerce’s native block-based Cart, Checkout, and Order Confirmation blocks, styled to match the theme. These pages should already be assigned correctly if WooCommerce’s setup wizard was run; if not, verify the Cart and Checkout pages under WooCommerce → Settings → Advanced → Page setup.

Merchandising patterns

↑ Back to top

Use the patterns listed under Stylezen – Product, Stylezen – Promo Category, and Stylezen – Promotional Banner (see 5. Templates & Block Patterns Reference) to build out landing pages that highlight collections, best sellers, new arrivals, or hand-picked products. Most are pre-wired to WooCommerce’s Product Collection block, so they populate from your real catalog once inserted.

FAQs

↑ Back to top

Help customers by answering commonly asked questions.