From a good demo to your own store.

Build a music store with a point of view. Riff & Keys is a WordPress block theme for guitars, pedals, keyboards and accessories, with five distinct homepages and native WooCommerce shopping layouts.

What this guide covers

This customer guide covers theme 0.7.32, Card Tools 0.1.15, Atelier Demo Import 1.3.0 and Atelier Demo Export 1.1.0. It describes the files and controls supplied with these versions. WordPress and plugin menu labels may differ with language and version.

The theme uses the native block editor and Site Editor. Elementor or another page builder is not required. Theme activation does not import products, create customer accounts or change your homepage.

Before installing

• Prepare a WordPress installation, hosting, domain and administrator access.
• Back up an existing website. Use a fresh staging site to reproduce the supplied demo most closely.
• The theme declares WordPress 6.7 and PHP 7.4 as minimums. Also meet the requirements of your installed WooCommerce version; these theme minimums are not hosting recommendations.
• Allow sufficient PHP memory, execution time and upload size for the actual package. The importer displays the effective upload limit.

Reference environment used during development: WordPress 7.1.4, WooCommerce 11.2.1, Apache PHP 7.4.24 and CLI PHP 8.4.1. This is the tested local environment, not a promise for every hosting or extension combination.

Extract the download first. Upload each installable ZIP through its matching WordPress screen; the complete tools kit is not a theme installer.

Install WooCommerce, Contact Form 7 and MC4WP from their official WordPress plugin listings. Their service accounts, paid plans and configuration are separate from the theme.

1. In WordPress admin, open Appearance → Themes → Add New → Upload Theme.
2. Choose riff-keys-0.7.32.zip, install it and activate Riff & Keys.
3. Open Plugins → Add New. Install WooCommerce and the integrations you will use. Upload supplied companion plugin ZIPs through Upload Plugin.
4. For the complete Riff & Keys demo, activate WooCommerce, Card Tools, Contact Form 7 and MC4WP before inspecting the package. Install Atelier Demo Import if you want the demo.
5. Continue to Import a demo, or follow Manual page setup.

Check the result

Riff & Keys is the active theme, Appearance → Editor opens the Site Editor, and WooCommerce product/settings screens are available when WooCommerce is active. An empty catalog before adding or importing products is normal.

Common installation messages

• Missing style.css: you probably selected the full kit or a content ZIP. Upload only the theme installer.
• Upload exceeds the limit: compare the ZIP size with the server's limit. Ask your host to adjust the limit or use its supported installation method.
• A required content type is unavailable: activate the plugin named by the demo inspector.

Installation screenshots

Use the controls shown below in order. The screenshot sequence shows the ZIP selection screen and the resulting active theme; the ZIP filename should match the version you received.

Theme and plugin ZIPs are installed through different screens. Do not upload a plugin ZIP through Upload Theme.

1. Open Plugins → Add New → Upload Plugin.
2. Select a supplied plugin ZIP, such as atelier-demo-import-1.3.0.zip, and click Install Now.
3. Click Activate Plugin after installation. Repeat for Card Tools and any other supplied plugin you need.
4. Install WooCommerce, Contact Form 7 and MC4WP from their official plugin listings if you are using the complete demo.
5. Open Plugins → Installed Plugins and confirm the required integrations are active before inspecting/importing the collection.

Third-party plugin installers and hosted service accounts are separate from the theme. The demo inspector reports the exact integrations required by the package you select.

1. Open Appearance → Import Demo. Select the registered Riff & Keys collection if available. Otherwise expand Have a demo ZIP?, choose the content ZIP and click Inspect ZIP.
2. Browse the five homepage cards. Use View preview for a larger image, then select a layout. The card and Selected homepage list stay in sync.
3. Review item counts and resolve every requirement. Required plugins must be active and the matching theme must be selected.
4. Enable Apply demo homepage, page assignments and menu locations if you want the selected homepage and supplied page assignments applied. This is optional and starts unchecked.
5. Click Import demo. Keep the tab open until completion; follow the progress and recent steps.
6. Open the site, verify the selected homepage, then review Shop, Cart, Checkout, My Account, contact and footer links.

Resume, cancel and repeat imports

• After a connection interruption, sign in again if needed, reopen Import Demo and choose Resume import. A pending job locks package/homepage choices.
• Cancel import stops future steps and keeps already imported content. It is not an undo or cleanup command.
• Completed imported items are reused on repeat imports; merchant edits are retained. This tool seeds content rather than synchronizing changes over an existing store.
• A SKU belonging to an unrelated existing product blocks preflight. Use a fresh demo site or a deliberately revised package; do not delete live products just to bypass the warning.
• Download the report for troubleshooting. Restore your pre-import backup if you need a completely clean site.

Packages contain fictional content and Media, not customer accounts, orders, payment settings or service API keys. Counts may differ between package revisions; the inspector is authoritative for the ZIP you selected.

Follow the import screens

Home 1 — The Original

Editorial / Bold

Home 2 — The Players Club

Playful / Creative

Home 3 — After Hours

Dark / Cinematic

Home 4 — Frequency Market

Colorful / Market

Home 5 — Signal House

Modern / Minimal

Switch the front page later

1. Open Settings → Reading.
2. Choose A static page and set Homepage to the desired published Home page.
3. Keep Journal as the Posts page if you use the blog. Save and check the frontend.

For a manual Home 2–5, create a page, choose its named template, insert the matching Riff & Keys pattern and publish. An empty page with only an alternate template selected will not contain the full pattern content.

Home 1 uses manual campaign controls; other layouts add their own motion and listening sections. Home 5 enhances three anchor-linked channels. Preserve rk-h5-channel-keys, rk-h5-channel-guitars and rk-h5-channel-pedals unless you update the matching selector links too. Effects respect the visitor's reduced-motion setting.

Assign your front page in WordPress

Use Appearance → Editor for templates, shared parts, navigation and global design. Use Pages and Posts for individual content. This distinction prevents editing the wrong level of the website.

1. Open the page or template and use List View to find its section.
2. Select a Heading, Paragraph, Image, Button, Audio or other native block.
3. Change the text, link or Media in the block controls. Preview mobile and desktop.
4. Save and review the list of affected templates/parts. A shared Header/Footer change affects more than one page.

Keep supplied CSS classes and anchor IDs when changing content; some classes identify a layout or interaction. Use a child theme for PHP/CSS source changes. Saving content through WordPress does not require editing theme files.

Official introduction: WordPress Site Editor.

Gutenberg page settings

1. Open Pages and edit the page you want to change.
2. Use the Settings button in the editor toolbar to show the sidebar. The Page tab contains page-level controls, including the template.
3. Click a block in the canvas or select it in List View. The Block tab contains controls for that selected block.
4. Choose the appropriate page template, replace content and save. Review the frontend afterwards.

Site-wide templates

Locate a block with List View

Change the palette

1. Open Appearance → Editor → Styles → Colors → Palette.
2. Adjust the core roles such as Warm ivory, Charcoal, Acid yellow, Lavender, Warm gray and Fine rule.
3. For Home 2–5, edit the entries carrying that Home number. Each alternate layout deliberately has its own colors.
4. Preview a homepage, product, cart and a form before saving the complete design.

Product-photo canvases, some photographic overlays and stock/error indicators do not all use the brand accent. Changing one accent will not recolor every surface.

Change typography

In Styles → Typography, choose Text and Headings fonts. Individual heading levels, Buttons, Navigation and Site Title can have their own typography controls. Available fonts include locally bundled Anton, DM Sans and RiffKeys Vietnamese, plus system serif/sans options. Changing a font may change wrapping; check long product names and mobile headings.

Logo and site name

Edit the Header template part in the Site Editor. Select Site Title to change its presentation, or replace it with a Site Logo block and choose a logo from Media Library. Check its width and contrast on all five header presentations. Update the site name/tagline in Settings → General when appropriate.

Styles and palette controls

Edit the header navigation

1. Open Appearance → Editor and locate Header under template parts/patterns.
2. Select Navigation, open List View and edit labels, descriptions and destinations.
3. The Home dropdown links to Home 1–5. Shop uses a styled mega menu. Pages groups About, Contact, FAQ and policy links.
4. Preserve rk-nav-homes and rk-nav-shop on their parent submenus. Preserve supplied mega-menu positioning classes when only editing labels or URLs.
5. Select the Sound Lab feature link inside the Shop menu. Its Mega menu image inspector control can choose a Media Library image.
6. Save, then check pointer movement, keyboard opening/closing and the mobile navigation overlay.

The search button opens a search dialog; the account icon links to the WooCommerce account page. Wishlist requires Card Tools and a published Wishlist page. The cart button opens the native mini-cart drawer. After migration, replace stale manual URLs and check links on the public website.

Edit the footer

Open the Footer template part. Change the title/logo, newsletter area, Shop/Support/About links and copyright. Newsletter behavior is covered in Newsletter setup. Keep policy links pointed at your actual published pages.

Edit the cart drawer

Open the Mini-Cart drawer template part. Edit headings and empty-state copy while preserving the functional WooCommerce mini-cart blocks, items, subtotal and checkout link. A saved template-part customization takes precedence over the theme's file version.

Replace an image

1. Open the page or template that owns the image.
2. Select its Image/Cover block and choose Replace → Media Library or upload a new file.
3. Set descriptive alt text for meaningful images, check the focal point/crop and keep the supplied block classes.
4. Save and review both mobile and desktop.

Use Media Library references instead of pasting a URL into a theme file. Upload real merchant photography for the products you sell. Keep consistent aspect ratios within a product gallery, leave some room around the instrument, and avoid heavy baked-in borders. The product gallery preserves the whole product; differing image backgrounds may still remain visible.

Homepage and Sound Lab media

Replace Audio and Video blocks in the owning page/template, including poster artwork where used. Some product sections use Card Tools URL fields instead of native page blocks; copy the file URL from Media Library into the matching field. Supported playback depends on browser codecs and server MIME support.

Demo tones are illustrative synthesized examples, not recordings of actual advertised products. Replace them with accurate recordings or retain the illustrative label. Audio should start only after visitor interaction. Preserve native playback controls and supply descriptive text for the content.

During migration, transfer Media files and the WordPress database consistently. A working-looking block that points to an old hostname can fail once the old website is removed.

Add a simple product

1. Open Products → Add New. Enter the product title, main description and short description.
2. In Product data, select a simple product. Set the price, SKU, stock policy and shipping dimensions/weight where applicable.
3. Assign a category, featured product image and gallery images. Add descriptive attributes for specifications such as Body, Pickups or Keys.
4. Publish and check the product card, product page, search and category listing.

Create a variable product

1. Choose Variable product in Product data.
2. Add an attribute such as Finish with the required options, and enable its use for variations.
3. Create variations. Set a price and availability for every variation that should be purchasable; assign variation images where needed.
4. Choose sensible default attributes if appropriate, save and test each option combination.

The storefront uses WooCommerce prices, stock and validation. Simple/variable Add to cart requests use AJAX where supported by the supplied forms and open the cart drawer after success. Variation selection is also available in Quick View with Card Tools. Test other product types and extension-provided forms separately.

Official walkthrough: WooCommerce variable products.

Product editing screen

Activate RiffKeys Card Tools to enable the supplied wishlist, comparison, quick-view and editorial fields. In the classic WooCommerce product editor, find Product data → General → Riff & Keys — Product story. The current fields are rendered in that form; a different product editor may not expose them in the same place.

Save the product after changing fields. Specifications still come from native WooCommerce attributes; the story fields do not replace product price, stock or variation data.

Wishlist, Compare and Quick View

• The header heart leads to the published Wishlist page.
• Wishlist/Compare selections are stored in browser localStorage on the current device. They are not synchronized with customer accounts.
• Compare supports up to four products.
• Quick View shows the gallery with thumbnails, quantity, supported variation choices and Add to cart. Successful additions open the cart drawer.
• The product page and Quick View support gallery arrows and mobile swiping. Keep gallery images accurate and consistent.

Deactivating Card Tools removes its optional controls without deleting native WooCommerce products or orders. Describe browser storage behavior in your store's privacy information.

Optional product story fields

Store pages and assignments

Let WooCommerce create its functional store pages. Confirm Shop under WooCommerce → Settings → Products and Cart, Checkout, My Account and Terms under WooCommerce → Settings → Advanced, where available in your version. Publishing a page with a familiar title alone does not assign it to WooCommerce.

Grid/List controls and category/brand filtering use the theme's catalog presentation. For a Brand filter, populate and assign the brand taxonomy supported by your WooCommerce installation. If products are missing, check publication, catalog visibility, stock settings and the current query/filter first.

Prepare checkout

1. Set the store address, currency, tax behavior and shipping zones/methods appropriate to your business.
2. Configure a payment provider and test in its supported sandbox/test mode.
3. Set guest checkout, account creation and terms requirements as needed.
4. Test a simple product and every relevant variation, quantities, invalid/valid coupons, required-field errors and out-of-stock behavior.
5. Complete a test order and inspect Order Received, My Account orders and transactional email delivery.

The theme supplies presentation, not payment accounts, shipping rates, tax rules or a live delivery service. Keep Cart, Checkout and My Account out of full-page caching. Test payment/checkout extensions on staging before activating them on a trading store.

Create supporting pages without demo import

In Pages → Add New, choose the matching template in page settings and insert the appropriate pattern from the Riff & Keys pattern category. Publish, then add it to navigation or assign it in the relevant WordPress/WooCommerce setting.

Journal

1. Create a Journal page and assign it as the Posts page in Settings → Reading.
2. Add articles in Posts → Add New, including featured images, categories and excerpts.
3. Edit blog layouts in Site Editor → Templates: the posts index and Single Post templates control the surrounding design.
4. Check homepage Query/Post blocks if a homepage's article selection needs changing.

The Journal page body is not the source of the posts-index layout. Search Results and 404 also use templates; they do not need normal pages with those titles. Replace all example contact details, policy promises, shipping times, addresses and fictional reviews before launch. The supplied policy copy is demo content, not a completed policy for your store.

1. Install and activate Contact Form 7. Open Contact → Contact Forms.
2. Edit the imported contact form, or create one and place its block/shortcode on Contact Us. Use the form's actual current shortcode rather than a copied source-site ID.
3. Review the form's fields, labels, required indicators and confirmation/error messages.
4. In Mail, set a real receiving address and a suitable sender on your website's domain. Configure delivery through your hosting/email provider.
5. Review Additional Settings. The supplied demo uses demo_mode: on and a fake .example recipient; remove demo mode only when real delivery is configured.
6. Test missing required fields, a valid authorized message, the frontend response and arrival at the recipient mailbox.

A frontend success message alone does not prove inbox delivery. Check the form plugin, mail provider and spam/delivery logs if messages do not arrive. Do not paste SMTP credentials into theme templates or demo content.

Official reference: Contact Form 7 — setting up mail.

1. Install and activate MC4WP: Mailchimp for WordPress.
2. Open MC4WP → Mailchimp and connect your own Mailchimp account using its API key.
3. Open the form editor, choose the correct audience/list and review field mappings, consent and double opt-in settings.
4. Use the imported newsletter form or your own MC4WP form in the Footer's newsletter area.
5. Test with an authorized address and verify the subscription/confirmation in Mailchimp.

The demo includes no real API key or audience connection. When no configured connection is available, the supplied footer can show a Journal fallback rather than pretend that a signup succeeded. The theme does not supply a mailing service or create a Mailchimp account.

Official connection guide: MC4WP — connect your Mailchimp account.

Translate the interface

The theme's text domain is riff-keys, with a POT file under languages/. Card Tools, Import and Export have their own domains/catalogs. Use a translation tool such as Poedit or Loco Translate, and store translations in a persistent WordPress language location so updates do not remove them.

WordPress/WooCommerce/CF7/MC4WP translations are separate. Also translate page content, navigation labels, already inserted patterns, product descriptions and policy text: changing the site language does not rewrite authored content.

Vietnamese and fonts

RiffKeys Vietnamese is a bundled, renamed Noto Sans derivative used for Vietnamese body text/fallback coverage. Check all custom font choices with your actual language. Local theme fonts do not require a remote Google Fonts request.

Preserve usability while customizing

• Use a sensible heading hierarchy and visible form labels.
• Keep keyboard focus indicators and sufficient text/background contrast.
• Write useful image alt text and descriptive link labels.
• Test menus, dialogs, gallery controls and checkout with a keyboard.
• Keep reduced-motion preferences respected. Do not hide essential information behind animation.
• Check long translations and RTL layouts on the edited pages; do not assume that an automatic check covers every language or screen reader.

Customers can skip this chapter. Atelier Demo Export runs on your source demo site and is not required by customers importing the resulting ZIP.

1. Install Export 1.1.0 on a curated source website with the theme/integrations active. If Import is also installed, update it to at least 1.3.0 to avoid the older bundled exporter.
2. Open Tools → Export Demo. Choose Riff & Keys — Complete demo for this theme, or Standard for native content.
3. Set the package name. Theme profiles manage a fixed package ID; Standard lets you choose a stable ID. Keep it when revising the same demo on the same source site.
4. Select content cards and classic menus. Related Media, parent content, terms and published variations follow those selections.
5. Choose whether to include demo setup. A profile can collect additional dependencies for its role maps and homepage choices.
6. Review the summary, then choose Export & download ZIP.
7. Test the ZIP on a fresh destination with Atelier Demo Import and the matching theme/integrations. Keep a known-good copy and its version.

The core excludes users, orders, coupons, reviews and service settings. Authored content and original Media are included as-is, so review their privacy and redistribution rights. The Riff & Keys profile supplies safe demo form configuration without real recipients, audience lists or API keys.

Current export limits are 2,400 objects, 240 MB Media total, 25 MB per Media file and a 10 MB manifest. A source library over 10,000 attachments is rejected. Media must be in local uploads. This schema does not automatically export every page builder, custom field, global product attribute or product type.

CLI alternative for slow hosts

wp atelier-demo export /absolute/path/riffkeys-demo.zip --profile=riffkeys
wp atelier-demo export /absolute/path/blog.zip --types=post --skip-settings

Do not overwrite an existing ZIP path. Full profile/adapter authoring details are in atelier-demo-export/docs/EXPORT.md; preview metadata and the import schema contract are documented in the Import plugin's developer guide.

1. Back up the WordPress database and uploads, plus your child theme and custom code.
2. Test updates on staging with your WooCommerce/payment/form extensions.
3. Update the relevant theme/plugin ZIP through WordPress's replacement flow, or your established deployment process.
4. Clear browser/page/CDN caches as appropriate and check the purchase flow, forms, menus and mobile layouts.

Saved Site Editor templates, template parts and Global Styles live in the database and take precedence over supplied theme files. A theme update may therefore leave a customized layout unchanged. Compare/export your edits before using a template's reset/clear-customizations action; that action discards the saved customization for the selected item.

Keep custom PHP/CSS source work in a child theme. Do not assume a theme update backs up overwritten parent files. Demo reimport is not required for a visual/code update and does not function as an overwrite/sync tool.

When moving domains or hosting

Transfer the database and Media together using a suitable migration workflow. Update stored source-domain URLs with a WordPress-aware tool, verify HTTPS and save Permalinks if routes need refreshing. Check navigation, product/gallery media, CF7 shortcode references, Mailchimp connection and WooCommerce page assignments after the move. Do not include live credentials in a demo ZIP.

For the Atelier split, upgrade Import to 1.3.0 or later before activating standalone Export alongside it. Existing demo ZIPs remain valid; customers do not need Export. Automatic update/license services are not supplied by these files; follow the distribution channel's update instructions.

The theme includes conditional assets, responsive Media delivery and progressive motion. Keep these working by testing optimization changes against actual store interactions.

• Use appropriately sized product/editorial images and efficient formats supported by your server. Avoid replacing a small visible image with an unnecessarily huge file.
• Keep above-the-fold hero images readily available. Do not blindly delay every image, font or script.
• Use hosting/page caching suited to WooCommerce; exclude Cart, Checkout, My Account and personalized responses from full-page caching.
• Test cart fragments/drawer updates, variation selection, Quick View, checkout and contact forms after changing minification, script delay or caching rules.
• Check all five homepages rather than assuming they load the same media and scripts.
• Keep visitor reduced-motion behavior. The core animations do not require a third-party animation library.

Local test scores are not a guarantee of hosting performance. Measure your own homepage LCP, layout shifts and responsiveness after replacing images and adding services. Optional local development cache tooling is not a requirement of this theme and should not be copied to another server without its own configuration.

Prepare a useful support report

Include theme/plugin versions, affected URL, exact steps, expected/actual results and a sanitized screenshot or importer report. Use the support channel supplied with your purchase. Do not send passwords, API keys, private order/customer details or payment information in a public report.

Use this checklist after replacing the demo. These checkboxes are for your current reading session; they are not a store configuration tool.

Demo assets and redistribution

Bundled pictures depict fictional demo instruments and scenes. Audio samples are illustrative. Replace product imagery/specifications with accurate material for the products you sell. Retain the included GPL/OFL notices when distributing code/fonts, and review demo-image provenance and redistribution rights before repackaging a theme demo. The theme's asset notes and font license files remain the detailed source records.

Your store configuration, authorized payment-provider testing and actual policy/content review complete the launch process. This guide does not turn placeholder demo claims into a live business commitment.

• WordPress — Introduction to the Site Editor
• WordPress — Templates and template parts
• WooCommerce — Variable products
• Contact Form 7 — Setting up mail
• MC4WP — Connecting your Mailchimp account

External links need an internet connection. This guide's navigation, search, screenshots and print layout work offline. It has no analytics, remote fonts or external JavaScript dependencies.

Documentation version

Prepared 5 November 2026; illustrated English guide 1.1.0 for Riff & Keys 0.7.32, Card Tools 0.1.15, Import 1.3.0 and Export 1.1.0. Theme-specific instructions were checked against the installed source. Provider references were checked against their official documentation. Screenshots show the demo and an isolated QA environment; use your own site's names and content.

The installation and editor screenshots were captured in a separate English-language WordPress documentation site. Screen labels may differ slightly in other WordPress/WooCommerce releases. Screenshot crops focus on the relevant controls; they do not show a different theme or a simulated admin interface.