Applies to Cmsmart Stores 0.4.5 (block theme) and Cmsmart Product Designer 2.17.2 · Updated October 2026. This guide shows how to customize a live Cmsmart Store's colors, fonts, header layout and plugin set using WordPress's own Site Editor, captured on a fresh install on 2026-10-11.

In short

  • Outcome: a Cmsmart Store that looks like your brand instead of the shared demo layout, without hiring a developer or writing CSS.
  • How it works: WordPress's Site Editor and Styles panel change colors, typography, header layout and homepage sections site-wide; the theme's recommended-plugins installer adds only the WooCommerce extras you actually choose.
  • What it takes: an active Cmsmart Store child theme, about 20-30 minutes, and your brand colors and fonts.

Customize WooCommerce block theme settings — colors, typography, header layout and homepage content — right inside WordPress's built-in Site Editor on a Cmsmart Store, instead of writing CSS or opening a developer ticket for every small tweak; the theme also ships its own recommended-plugins installer so you add only the WooCommerce extras your store needs instead of a generic bundle.

This picks up right after installing and activating your Cmsmart Store child theme: once a child theme such as Print Shop or T-Shirt is active, the next job is making the default layout look like your business instead of the shared starter layout every new install begins with.

What's the cost of leaving a new Cmsmart Store on its default look?

A newly activated Cmsmart Store ships with the same placeholder marketing copy and starter layout every install starts from, so Cmsmart gives you WordPress's own Site Editor and a recommended-plugins installer to replace that placeholder content and bare WooCommerce setup with your own brand, without writing a line of code.

The pains we see right after activation, before a store looks ready to share:

  • Stock demo copy. The home template's built-in patterns open with placeholder marketing lines like LATEST PRINTS and a generic percentage-off offer — placeholder text from the theme's starter pattern, not your products or pricing.
  • No Customizer to fall back on. Cmsmart Stores is a WordPress block theme, so the old Appearance > Customize screen isn't there; every color and font change happens in the Site Editor's Styles panel instead.
  • Plugin guesswork. WooCommerce alone doesn't give you cart recovery, search, variation swatches or an SEO plugin — but installing a random pile of "recommended" plugins just in case adds more to update and maintain than most small stores need.
  • Developer cost for small tweaks. Paying an agency by the hour to change a header layout or a color palette is expensive for the kind of change most owners can make themselves once they know where the Site Editor keeps it.
  • Confusing notices. Opening the Site Editor for the first time can surface a message that a block "doesn't include support" for something like a slider — harmless, but unsettling if you don't already know it's safe to leave as-is.

What could your store's homepage look like without touching code?

Cmsmart Stores' Site Editor lets a non-technical owner pick a header layout, set brand colors and fonts in the Styles panel, and swap in ready-made content patterns, so the homepage matches the business the same day the theme goes live, without opening a code editor.

Example scenario. A print shop owner opens Appearance > Editor the morning after activating their child theme. In the Styles panel they swap the default palette for their own two brand colors and pick a heading font that matches their logo. They choose the logo left header variant instead of the centered default, then replace the home template's placeholder LATEST PRINTS sections with starter patterns built around their own best-selling products. Twenty minutes later the storefront reads like their business, not a demo.

None of that requires touching a theme file. It also doesn't require demo content: Cmsmart Stores 0.4.5 has no bundled sample catalogue, so every section you see in the Site Editor is either the theme's starter pattern or something you put there yourself. If you'd rather have a store pre-filled to match a finished preview instead of building it block by block, that's a done-for-you option, not a theme feature: see Cmsmart Store preset installation & demo import. We don't promise a ship date for a demo pack inside the free theme package, because there isn't one yet.

How does Cmsmart let you customize WooCommerce block theme settings without code?

Cmsmart Stores gives every merchant three built-in, no-code tools: WordPress's Site Editor for templates and header layout, the Styles panel for colors and typography, and a recommended-plugins installer that adds only the WooCommerce extras you choose — so day-to-day customization never depends on editing theme files.

Four building blocks make up Cmsmart Stores' no-code customization:

  • Site Editor (Appearance > Editor). Edit the home template and other templates directly, with Patterns, Navigation and Templates sections in the left-hand Design menu.
  • Four header variants. Per the theme's documentation, Cmsmart Stores ships four header layouts to choose from: logo left, centered, menu below, and left navigation.
  • Starter patterns. Ready-made block sections — like the home template's current placeholder sections — that drop into a page instead of being built block by block.
  • Styles panel. Typography, Colors, Background, Shadows and Layout settings that apply across the whole site at once, not page by page, as WordPress's own Styles documentation describes.
  • Recommended plugins installer. A bundled installer (Appearance > Recommended plugins) listing free WooCommerce add-ons — cart recovery, SEO, search, a lighter checkout, swatches and more, 15 of them in a fresh install — so you install only the ones relevant to your store instead of searching the plugin directory one at a time.

Cmsmart insight: install only the recommended plugins you'll actually configure. Every store we've helped untangle later had the same pattern: a handful of "recommended" plugins activated on day one, never set up, quietly adding to the page weight and the update list a year on.

Customizing a WooCommerce store: hand-coded theme vs. Cmsmart Stores block theme
Classic WooCommerce theme + custom CSSCmsmart Stores (block theme)
Changing colors and fontsEdit CSS, or pay a developer for each changeStyles panel in the Site Editor, no code
Header layoutTheme-specific options or custom template codeChoose from four built-in header variants
Homepage sectionsPage builder plugin or a hand-built templateStarter patterns inserted from the Site Editor
Useful WooCommerce extrasSearch for and install each plugin separatelyTheme's recommended-plugins installer; install only what you need
Fully bespoke brand designCustom build from scratchNot a built-in feature; Cmsmart builds it as custom development

What's the business value of customizing your store properly?

A storefront that matches your brand and runs only the plugins you actually use looks more trustworthy to buyers and costs less to maintain than a store left on starter styling with a dozen unused add-ons, and Cmsmart's Site Editor tools get you there without a developer invoice for every small change.

Customization value
BenefitHow it shows up in your businessKPI to track
Faster brand launchColors, fonts and header set in the Site Editor instead of a developer ticket queueDays from theme activation to a branded homepage
Lower plugin overheadInstalling only the recommended plugins you need instead of all of themActive plugin count per store
Consistent brand everywhereStyles panel changes apply site-wide, not page by pagePages matching your current brand colors and fonts
Lower one-off dev spendSmall layout and color tweaks handled in-house instead of billed hourlyDeveloper hours billed per month on cosmetic changes

Quick math: if small theme tweaks — a color, a font, swapping a homepage section — currently go through a developer at your hourly rate, and you need a few of those most months, moving the routine ones into the Site Editor yourself saves roughly (your hourly rate) × (tweaks per month) × (minutes per tweak, often 15-30 once you know where Styles and Patterns live) ÷ 60, every month you'd otherwise have billed for them.

How do you set up the Site Editor and recommended plugins on your Cmsmart Store?

On a Cmsmart Store, you configure this in two places: Appearance > Recommended plugins to add only the WooCommerce extras you want, and Appearance > Editor for the Site Editor, where the Styles panel sets your colors and fonts and the Patterns and Templates screens set your header variant and homepage sections.

  1. Make sure your Cmsmart Store child theme is active first (see the install guide) — customization builds on an already-activated theme.
  2. From the WordPress dashboard, note the two shortcuts the theme adds: Open site editor and Edit styles, right on the dashboard's welcome panel.
  3. Go to Appearance > Recommended plugins.
  4. Review the free WooCommerce add-ons listed (15 in a fresh install) and install only the ones your store needs — cart recovery, search, an SEO plugin, variation swatches and similar; WooCommerce itself is installed separately, not from this list.
  5. Open Plugins and confirm WooCommerce and Cmsmart Product Designer both show as Active before moving on to design.
  6. Open Appearance > Editor to launch the Site Editor on your home template.
  7. In the left-hand Design menu, open Patterns or Templates to pick a header variant — logo left, centered, menu below, or left navigation — and swap the homepage's placeholder sections for starter patterns built around your own content.
  8. Click the Styles icon (the half-shaded circle, top right) to open the Styles panel, then open Typography to set your heading and body fonts.
  9. Still in Styles, open Colors and replace the default palette with your own brand colors; the change applies across every page immediately.
  10. Click Save in the Site Editor to publish your changes.
WordPress dashboard right after activating a Cmsmart Store, with Open site editor and Edit styles shortcuts
The dashboard right after activation already links to the Site Editor and Styles.
Cmsmart Store recommended plugins installer listing 15 free WooCommerce add-ons to choose from
Appearance > Recommended plugins: 15 free add-ons to choose from, not a forced bundle.
WordPress Plugins screen with WooCommerce and Cmsmart Product Designer both active, version 2.17.2
WooCommerce and Cmsmart Product Designer (2.17.2) active on the Plugins screen before customizing design.
WordPress Site Editor used to customize WooCommerce block theme templates, showing the Cmsmart Store home template with starter pattern content
The Site Editor on the home template, showing the theme's starter pattern content.

If you see a notice about an unrecognized block (for example, one named slider) when you first open a template, you can leave it as-is or remove it. It only means that particular dynamic block isn't registered on this install yet, and it won't affect the rest of the page.

Site Editor Styles panel showing Typography, Colors, Background, Shadows and Layout sections
The Styles panel: Typography, Colors, Background, Shadows and Layout, applied site-wide.

Going further: what if you want a fully custom store design?

The Site Editor's four header variants and starter patterns cover most stores, but when a brand needs a header, homepage or pattern library that doesn't exist yet, Cmsmart builds it as custom development: bespoke templates and styling layered on top of your Cmsmart Store instead of swapped in from a short list of defaults.

What we build on top of a customized Cmsmart Store, project by project:

  • Bespoke header and homepage design. A layout beyond the four built-in header variants and starter patterns, built to match an existing brand identity exactly.
  • Preset and demo content import. Since 0.4.5 has no bundled demo content, our team installs the theme, imports sample pages, menus and products, and hands back a store matching a chosen preview. See Cmsmart Store preset installation & demo import.
  • Custom patterns for your catalogue. Purpose-built sections — a price-matrix table, a gang-sheet pricing explainer, a 3D preview block — that the standard pattern library doesn't include.
  • Plugin cleanup and curation. Auditing a store where recommended plugins were installed without a plan, removing overlap, and configuring the ones that stay.
  • Catalogue and brand migration. Moving products, categories and styling over from an existing WooCommerce store or a different platform.

Delivery runs the same way for every engagement: discovery call, a short solution design, build sprints, QA against a staging copy of your store, launch, then support. See the delivery model at Cmsmart ecommerce projects.

Get my Cmsmart Store custom-designed

Why work with Cmsmart on your store's design?

Cmsmart has built WooCommerce storefronts and the Cmsmart Product Designer plugin since 2012 as a Netbase JSC division, and the Cmsmart Stores theme comes from that same team, so the Site Editor templates, header variants and the designer plugin are built to work together — down to a print-ready PDF that matches the order once your design-enabled products go live.

Cmsmart has delivered 6,300+ client projects and currently runs 1,800+ live stores for clients in 80+ countries, and is rated 4.2 on Trustpilot (404 reviews). One long-time plugin user, reviewing Cmsmart Product Designer, put it this way:

"We have had the NB Designer plugin installed for three years and have experienced absolutely no problems during that time. It is wonderful to see their commitment to continuous development, with new features being added frequently to keep the software current and highly capable." — Web Developer, Trustpilot review

Related reading: the Cmsmart Product Designer plugin page, our web-to-print solutions hub for the wider ecosystem Cmsmart Stores plugs into, and two related guides: setting up Cmsmart Product Designer itself and configuring the product customizer once your store's design is in place.

Frequently asked questions

Do I need to know CSS to customize a Cmsmart Store?

No. Colors, typography, header layout and homepage sections are all set through the Site Editor's Styles, Patterns and Templates screens. A site-wide Custom CSS field exists in the Styles panel for edge cases, but it isn't required for the customization covered here.

What are the four header variants Cmsmart Stores ships with?

Logo left, centered, menu below, and left navigation. You choose between them in the Site Editor's Patterns or Templates screens; none require editing template code.

Does Cmsmart Stores come with demo content I can use as a starting point?

Not in 0.4.5. The theme activates as a clean block theme with starter patterns but no sample products, pages or images. If you want a store pre-filled to match a finished preview instead, that's a done-for-you service: Cmsmart Store preset installation & demo import.

Which recommended plugins should I install first?

Only the ones that solve a problem you already have. A cart-recovery plugin matters once you have real abandoned carts to recover; an SEO plugin and a faster search matter from day one for most stores. Skip the rest until you need them.

Can I undo my Styles changes if I don't like them?

Yes. The Styles panel's menu includes a "Reset to defaults" option that reverts colors, typography and layout back to the theme's original style, without affecting your page content.

Do I need the Cmsmart Product Designer plugin to customize the Site Editor?

No. Site Editor customization — colors, fonts, header layout, patterns — works on any active Cmsmart Store child theme. Cmsmart Product Designer is a separate plugin that adds on-page product customization for your buyers; it doesn't affect how you style the store itself.