Applies to Cmsmart Bike Builder Store 2.0.0 (built on Cmsmart Stores 2.0.0, with Cmsmart Product Designer 2.18.4) · Updated October 2026. Screenshots in this guide come from a real Store Setup install of this store, on the released build.

In short

  • The outcome: a custom bike builder WooCommerce store live with branding, a sample catalogue, payments and shipping ready to edit, in about an hour.
  • How it works: a Product Builder sets frame size, frame colour, decals and logo colour on the bike itself, while the Cmsmart Product Designer runs the printed accessories: decal kits, race plates and team kit.
  • What it takes: a Cmsmart Fullstore licence (or a free 30-day trial key), a WordPress host, and about an hour at a keyboard.

A custom bike builder WooCommerce store lets a bike shop or frame builder sell build-to-order bikes online: shoppers pick frame size, frame colour, decals and logo colour and watch the price update before they pay. This guide installs the Cmsmart Bike Builder Store and gets it from a fresh WordPress install to a sellable catalogue in about an hour.

What does a manual bike-configuration process really cost you?

Cmsmart turns a bike shop's manual build-to-order process into a storefront the customer runs themselves, so staff stop quoting every frame, decal and logo combination by hand. The shopper sees the picture and the price change with every choice, before anyone on your team touches the order.

If a bike shop or frame builder still takes build-to-order orders by phone or email, the pain repeats every week:

  • Every frame colour, decal set and logo combination is quoted by hand, one email at a time.
  • Customers cannot see what their bike will look like before they commit to an order.
  • Team and club kit (tees, caps, bottles, bags) arrives as loose artwork files matched to orders by hand.
  • A build sheet gets re-typed from an email into whatever system runs production, which is where mistakes creep in.
  • Decals and race plates are a separate conversation from the bike itself, so nothing is quoted or checked out together.

Put a rough cost on it with your own numbers: quotes answered by email each week, times minutes per quote, times what your time is worth. That is the staff cost a self-serve configurator removes, before it sells one extra bike.

What could a one-hour bike builder store look like for your shop?

Cmsmart's Store Setup turns a blank WordPress install into a working bike shop with a configurator, a sample catalogue, pages and menus already in place, so you spend the first hour on your brand and products instead of plumbing. Everything it imports is editable, not locked to the demo content.

Example scenario: A visitor lands on your shop in the evening, opens a road bike, and picks a frame size, a frame colour and a set of decals; the picture on the page updates with every choice and the price moves with it. They add a matching helmet decal kit designed from a template in the same visit, then pay in the normal WooCommerce checkout. In the morning your team opens the order and finds the approved design and the print-ready file already attached — nothing to chase by email.

How does the custom bike builder WooCommerce store actually work?

A custom bike builder WooCommerce store runs on three pieces working together: the Product Builder for the bike's frame, colour, decals and logo; the Cmsmart Product Designer (formerly NBDesigner) for printed accessories; and standard WooCommerce for cart, checkout and orders. None of it is a separate system to maintain.

Install first. Getting the files onto your host is a separate, already-written guide: download the installer or the theme files from your Cmsmart dashboard, point it at an empty folder (or upload the theme and plugin zips yourself), and paste your licence key. Follow the full walkthrough in Install a Cmsmart Store: WordPress Parent and Child Theme rather than repeating it here — the steps below pick up once the store is live with sample data.

The CycleCraft homepage, an example of a custom bike builder WooCommerce store built on Cmsmart, with a Design the bike you will ride hero and a Design now button
The storefront home of a Cmsmart Bike Builder Store install, as imported by Store Setup. CycleCraft is the sample brand; you replace the logo, colours and copy with your own.

Once the store is live, three building blocks do the work:

  • Product Builder on the bike itself. On the bike's product page, the shopper works through frame size, frame colour, decals and logo colour, and the picture and price change with each step.
  • Cmsmart Product Designer on accessories. Decal kits, race plates and team kit open the online designer, with ready-made templates to start from or a finished file to upload.
  • WooCommerce underneath. Cart, block checkout, payments, shipping and order emails stay standard WooCommerce, so the store is yours, not a closed platform.
The Bike Builder: Design Your Road Bike product card showing the five configurator steps: frame size, frame colour, decals, logos and paint finish, with a Customize your bike button
The bike's own product page lists the Product Builder steps — frame size, frame colour, decals, logos, paint finish — above the Customize your bike button.
The Custom Frame and Helmet Decal Kit product page with Sheet Size, Vinyl and Protection options before the shopper opens the online designer
A printed accessory, the Custom Frame & Helmet Decal Kit, sells through the Cmsmart Product Designer instead of the Product Builder: sheet size, vinyl and protection options set the price before the shopper designs the sheet.
The Cmsmart Product Designer open on a decal template, with Templates, Text, Cliparts, Photos, Elements and Layers tools and a Process button
The online designer opens on a ready-made decal template; the shopper edits the text and artwork, then presses Process to add it to the cart.

Cmsmart insight: keep the bike itself on the Product Builder and move everything printed — decals, race plates, team tees — onto the Cmsmart Product Designer. Mixing the two on one product page is the most common setup mistake we see: it forces a shopper through configurator steps for a product that should just open a design template.

Production stays attached to the order. Once a customer's design is approved, Cmsmart's approved-artwork lock keeps that exact file as the one your team downloads for production, with the print-ready PDF generated for every designed line item.

Video thumbnail: how to create a component in the Product Builder of the Cmsmart Product Designer
Video: How to create a component in the Product Builder (Cmsmart on YouTube).

What business value do you get from a custom bike builder WooCommerce store?

Cmsmart replaces email quoting with a configurator that prices the order itself, so the business value shows up as fewer manual quotes, a shorter path from order to production, and a second line of revenue from decals and team kit sold on the same visit. None of this needs new headcount to run.

BenefitHow it shows up in your businessKPI to track
Fewer manual quotesShoppers configure frame, colour, decals and logo themselves and see the price before they orderQuote emails handled per week
Shorter order-to-production timeThe approved design is locked as the production file, with a print-ready PDF generated per order lineDays from order paid to production started
A second revenue lineDecal kits, race plates and team kit sell through the same Cmsmart Product Designer as the bike's accessoriesAttachment rate and average order value
Faster time to first saleStore Setup imports a working catalogue, pages and menus you edit instead of building from a blank themeDays from install to first live order

Rough payback, with your own numbers: quotes you currently answer by email each week × minutes per quote × your hourly staff cost = hours reclaimed once the configurator prices the order itself. Add your current reprint or re-quote rate × the cost of each one, and you have a working case for the switch before a single new sale.

How do you set up the Cmsmart Bike Builder Store in the first hour?

Cmsmart's Store Setup gets you to a sample catalogue in minutes; the work in the first hour is to configure the store for your own brand, products, payments and shipping before you point customers at it. The order below follows the real admin screens, start to finish.

With the store installed and sample data loaded (see the install guide above), work through these steps in order:

  1. Confirm the active theme. Under Appearance → Themes, Cmsmart Bike Builder Store should be active, with the Cmsmart Stores parent theme installed alongside it.
  2. Set your logo and header. Open the Header template part in the WordPress site editor and swap the Site Logo block and menu items for your own.
  3. Do the same for the footer template part: update the columns, links and copyright line.
  4. Check Settings → General for your site title and tagline, and set a site icon.
  5. Review Pages → All Pages. Store Setup imports a full set — home, shop, cart, checkout, FAQ and niche pages such as a decal guide and a club and fleet orders page — ready to edit or unpublish.
  6. Review Products → All Products, replace the sample bikes and accessories with your own range, and keep the categories that fit (road, gravel, city, kids, parts and accessories).
  7. Open your bike product's edit screen and set up the Product Builder tab: frame sizes, frame colours, decal sets and logo colours, with the price rule for each choice.
  8. Open an accessory product (a decal kit, race plate or team-kit item) and enable its Cmsmart Product Designer tab, then pick the printing option set it uses for sheet size, material and finish.
  9. Set your store address and currency under WooCommerce → Settings → General; this also drives your default tax and shipping rates.
  10. Connect a payment method under WooCommerce → Settings → Payments, such as WooCommerce Payments or PayPal, before you take real orders.
  11. Set your shipping zones under WooCommerce → Settings → Shipping: a zone for your home country plus a rest-of-world zone if you ship internationally.
  12. Place one test order on both a configured bike and a designed accessory, right through to the cart, to confirm the design, the price and the shipping total all agree before you go live.
WordPress Appearance Themes screen with Cmsmart Bike Builder Store active and the Cmsmart Stores parent theme installed alongside it
Appearance → Themes: the active store theme and its parent theme, both installed by Store Setup.
WordPress site editor open on the Header template part, with the Site Logo block and main menu ready to edit
The header template part in the site editor: this is where the logo and main menu are replaced.
WordPress Pages list with store pages imported by Store Setup, including a decal guide and a club and fleet orders page for this bike niche
Pages imported by Store Setup, including niche pages for this store: a decal guide and a club and fleet orders page.
WooCommerce Products list with the sample bike catalogue, prices and categories from Store Setup
The sample catalogue Store Setup imports: replace these products with your own range.
Cmsmart Product Designer settings on a WooCommerce product, with Enable Design, Enable Upload Design, DPI and template options
An accessory product's Cmsmart Product Designer tab: Enable Design, Enable Upload Design, DPI and template settings sit alongside a Printing Option, Product Builder, Request Quote and Design Guideline tab list.
WooCommerce Settings Payments tab listing WooCommerce Payments, PayPal Payments and Take offline payments options
WooCommerce → Settings → Payments: connect a provider before you take real orders.
WooCommerce Settings Shipping tab with a United States shipping zone and a Rest of the world zone
WooCommerce → Settings → Shipping: a named zone per region, each with its own methods.
WooCommerce cart with a designed decal kit line item showing the artwork, proof approval and production time chosen in the designer
The cart line for a designed accessory carries the choices made in the designer — artwork method, proof approval and production time — through to checkout.

Cmsmart insight: run your own test order before launch, not just a preview. The test order is the only way to see the proof-and-approval step and the print-ready file the way your production team will, instead of trusting that the settings are right.

Before you point customers at the store, run through a short go-live checklist:

  • Logo, header and footer replaced with your brand, not the sample.
  • Product catalogue is your own bikes and accessories, with correct prices.
  • Store address, currency and tax settings match where you trade from.
  • At least one payment method is connected and tested.
  • Shipping zones cover every region you sell to.
  • One test order placed end to end, including a designed accessory.

On a phone, the same configurator and designer run at a smaller width: a shopper can still size a frame or open the decal designer from the product page.

The Cmsmart Product Designer open on a mobile screen, with the design canvas and a mobile toolbar for Design, Templates, Text and Cliparts
The Cmsmart Product Designer on a phone-width screen, with the same template and a mobile toolbar.

How far can you take this with custom development?

Cmsmart builds the features a bike shop needs beyond the standard store as custom development: bulk club and team ordering, ERP or fulfilment integrations, and a richer 3D or component-based configurator. These are quoted and delivered as projects, not toggled on in settings.

The Cmsmart Bike Builder Store covers a solid build-to-order catalogue out of the box. Shops that outgrow the standard setup usually ask us to build one of these next:

  • Club and team ordering portals. Cmsmart builds a private ordering flow for clubs and teams buying matching kit in bulk, with quantity pricing and one combined checkout, as custom development on top of the standard catalogue.
  • ERP and fulfilment integrations. When orders need to reach a separate production, inventory or accounting system automatically, Cmsmart builds the integration so the print-ready file and order data arrive without re-typing.
  • A deeper 3D or component configurator. Beyond frame, colour, decal and logo choices, Cmsmart can extend the Product Builder with additional components (wheels, groupsets, finishing kit) for shops with a more complex build sheet.
  • Loyalty and reorder flows. For repeat club orders or seasonal kit refreshes, Cmsmart builds a reorder path that reuses a customer's approved design and settings.

Delivery follows the same path for every project: discovery, solution design, build in sprints, QA, launch and support, the model behind Cmsmart's ecommerce project work. A full store setup, branding and catalogue included, is also available as a quoted add-on if you would rather hand the first hour to us.

Plan my bike builder store · See the store preset & demo-import service

Why work with Cmsmart to launch your bike store?

Cmsmart has run ecommerce projects as a Netbase JSC division since 2012, with the Cmsmart Product Designer and Cmsmart Stores line built and supported by the same team you reach for setup and custom work. The store you install is the same one Cmsmart's own team maintains and extends.

Cmsmart has delivered 6,300+ client projects and 4,600+ completed projects since 2012, with 1,800+ stores live today in 80+ countries, and holds a 4.2 rating from 404 reviews on Trustpilot. The Bike Builder Store and the Cmsmart Product Designer it runs on are built and maintained by that same team, so a support ticket or a custom-development request reaches the people who built the store.

See how a similar build-to-order storefront reads for buyers in the Cmsmart Product Designer user guides, or open the live demo of the Cmsmart Bike Builder Store before you install anything. Demo products, prices and contact details on that demo are sample content, not a live store.

Frequently asked questions

Can I use my own products instead of the sample catalogue?

Yes. Store Setup loads a sample catalogue so the store is sellable from the first minute, but every product, price and category is yours to edit, replace or delete once you are in Products → All Products.

Which plan activates the Cmsmart Bike Builder Store?

Cmsmart Fullstore. It unlocks every Cmsmart Stores package, including the Bike Builder Store, and a free 30-day trial key activates it the same way a paid key does. Current plan details are on the pricing page.

Can I change the colours, logo and layout without code?

Yes. The header, footer, logo and page layouts are block-based template parts in the WordPress site editor, so branding changes are drag-and-drop, not a theme edit. The companion guide Customise a Cmsmart Store: Recommended Plugins & Site Editor goes further into layout and plugin choices.

What happens after the 30-day trial?

Your trial licence key keeps working through the trial period; buying the Cmsmart Fullstore plan upgrades the same key with nothing to reinstall. Plans are not refundable, so test the configurator and a sample checkout before you commit.

Can Cmsmart set up my products and branding for me?

Yes, as a quoted service. Cmsmart Fullstore includes setup of your first products, and a full store setup covering branding, catalogue and print options is available as a custom-development add-on if you would rather not do the first hour yourself.