A little guidance.
A store that feels like you.

Know your toolkit.

Grocenest handles the design. WordPress holds your content. WooCommerce runs your store.

Requirements

Check your environment under Tools → Site Health and WooCommerce → Status. This guide describes Grocenest 1.0.0-rc.93 and Demo Importer 1.0.0-beta.2, which are pre-release builds. Menu labels may vary slightly with your WordPress and plugin versions.

Set up your foundation.

Theme installation · actual screenshotView full size ↗

1. Prepare a fresh staging site or take a full backup.

   Keep both database and uploads backups. A separate staging site is the best place to try the demo before editing an existing store.

2. Upload the installable theme ZIP.

   Go to Appearance → Themes → Add New → Upload Theme. Choose the installable Grocenest ZIP, click Install Now, then Activate. The developer-source ZIP is not needed for normal setup.

3. Install WooCommerce.

   Go to Plugins → Add New, find WooCommerce, install and activate it. Complete its setup using your actual store information.

4. Install optional form plugins.

   Activate Contact Form 7 and Mailchimp for WordPress before importing if you want the importer to create sample forms. Connect delivery services after import.

5. Choose how to add content.

   Use the Demo Importer below, or build pages manually from the Grocenest pattern library.

What to upload

Upload the theme ZIP through Appearance → Themes. Upload the separate Grocenest Demo Importer ZIP through Plugins → Add New → Upload Plugin. Keep this documentation folder outside the theme uploader.

Choose a starting point.

Demo selection · actual screenshotView full size ↗

1. Activate the companion plugin.

   Install Grocenest Demo Importer. Grocenest rc.91 or later and WooCommerce must be active.

2. Open Appearance → Grocenest Demo Import.

   Check the requirements panel, then select Everyday, Market or Seasonal.

3. Review the import choices.

   The page-assignment option fills missing homepage/store assignments. The branding option fills a missing logo/site icon. Existing assignments and branding remain unless you explicitly choose the homepage replacement option.

4. Choose whether to replace your homepage.

   Check “Make the selected demo my homepage” only if you want the selected page to replace the current homepage assignment after import finishes.

5. Confirm your backup and start.

   Check the backup confirmation and click Import selected demo. Keep the page open while progress runs.

6. Review the result.

   Click View imported demo. Check pages, products and Media, then replace the sample content before opening the store.

What gets imported?

On a fresh site, each demo supplies 12 page destinations, nine shared products, two Pack size variations, three articles, six product categories and 57 bundled images. Existing WooCommerce store pages are reused where available. Importing all three demos shares the catalog, articles and media, and creates 14 total page destinations rather than three separate catalogs.

Resume an interrupted import

Reopen the importer and click Resume selected demo. A saved job belongs to its selected demo; finish it before selecting another. Repeating an import reuses importer-owned records and preserves merchant edits. There is no automatic rollback or bulk reset. Use your backup to restore a site if needed.

After completion, you may deactivate the importer. Imported content remains in WordPress and WooCommerce. Keep the theme, WooCommerce and any form plugins active for their respective features.

Make your preferred home the front page.

1. Check the page content.

   Open Pages → All Pages and edit the imported homepage. Use List View to select sections, headings, images and product blocks.

2. Select a static homepage.

   Go to Settings → Reading. Choose A static page and select your preferred homepage. If you use a separate Blog page, assign it as the Posts page.

3. Check the page template.

   Use the matching homepage template in the page settings. The template supplies the shared header/footer and displays the page content.

4. Review the Homes menu.

   Open the Header in the Site Editor and confirm that menu links point to your published pages. Existing customized menus are preserved by the importer.

Build without importing

Create a page and open the block inserter’s Patterns tab. Look in Grocenest pages for the matching homepage composition, insert it and select its matching template. Publish the page and assign it in Reading settings. Add your own products, categories, posts and images.

With “Your latest posts” selected, the theme can show its default Everyday front-page composition. For an imported demo, a static page gives you a clear place to edit its full content.

The right place for each change.

Gutenberg page editing · actual screenshotView full size ↗

Use List View

Open List View in the editor toolbar to select nested Groups, Columns and template parts. Select the actual Image, Heading, Navigation or Search block to see its controls. Keep existing layout classes when replacing text or images so that the theme’s responsive styles continue to apply.

Page content versus templates

A page stores its own content. A template controls the surrounding layout. The Post Content block connects the two; keep it in page templates. Changing a shared template part changes every template that uses that part.

Patterns and saved customizations

Grocenest patterns give you reusable section layouts. After insertion, edit their native blocks. WordPress may offer synced or unsynced patterns: synced patterns update their linked instances; unsynced blocks are independent. Saved Site Editor templates and parts take precedence over theme defaults.

More: WordPress Site Editor documentation.

Your colors. Your type.

Site Editor · captured previewView full size ↗

1. Choose a style variation.

   Go to Appearance → Editor → Styles → Browse styles. Preview Default, Harvest, Coastal or Modern Market, then Save.

2. Edit the theme palette.

   In Styles → Colors → Palette, adjust Primary, Primary dark, Canvas, Soft surface, Accent, Text, Muted text, Border, Surface and Warm surface.

3. Set typography.

   In Styles → Typography, edit Text, Headings and Buttons. Check the preview before saving. The bundled font choices use system fonts; appearance can vary slightly by device.

4. Check representative pages.

   Review a homepage, Shop, a product, Cart, Checkout, My Account, a blog article and a help page on desktop and mobile.

Change the palette

Global colors · Site EditorView full size ↗

Change text typography

Text typography · Site EditorView full size ↗

If one block keeps its old color or font, check its individual settings. A local block override can take precedence over Global Styles. Reset that control to inherit the global choice. Photos, illustrations, logos and favicons retain the colors in their image files.

More: WordPress Styles documentation.

Bring your own images.

Logo and favicon

Open the Header template part and select the native Site Logo block. Upload or select your logo from Media Library. Also review the Footer, mobile introduction, Checkout header and Order confirmation header; they can share the same site logo, while their block widths remain editable.

Set your Site Icon in WordPress’s site identity settings (Settings → General on current installations). A square 512 × 512 pixel image is a useful starting point. Use a transparent PNG for a logo that needs to sit on several background colors.

Change your logo · Site Logo blockView full size ↗

Replace a hero or banner image

1. Select the image in Gutenberg.

   Use List View if the image is nested inside a Group or Columns block.

2. Choose Replace → Media Library.

   Select an existing attachment or upload your own image, then confirm the selection.

3. Check crop, size and alternative text.

   Keep a suitable aspect ratio. Add a helpful description when the image conveys information; leave alt text empty for purely decorative artwork.

4. Save and preview both screen sizes.

   Confirm the subject is visible and the image does not leave an unwanted background rectangle.

Replace an image · Media LibraryView full size ↗

Product and category images

Set the featured image and gallery under Products → Edit product. Set product category thumbnails under Products → Categories → Edit category. Category displays that use WooCommerce thumbnails update from that category data; a manually placed Image block is edited separately in Gutenberg.

Decorative mobile menu category thumbnails use the theme’s mapped artwork and are separate from editable Image blocks. Changing those mapped thumbnails is a developer task in this build. Use the editable Shop megamenu’s Image blocks for normal visual customization.

Help visitors find their way.

Edit the shared header and topbar

The header is a reusable template part. Its topbar, logo, menu, Search, Account and Mini-Cart remain native editable blocks. Select the containing Group or Row to adjust layout, and select a nested block to edit its own content or settings.

Header & topbar · template partView full size ↗

Edit the main menu

Go to Appearance → Editor → Patterns → Template parts → Header. Select the Navigation block to edit link labels and destinations. Use published page or category URLs from your own site. Edit the Footer part separately for its link columns and bottom text.

Main menu · Navigation blockView full size ↗

Desktop submenu and Shop megamenu

Use the Navigation block’s submenu settings to open submenus on hover. The theme’s Shop megamenu has a maximum 1280 pixel desktop content width. Edit its illustrated departments, product collection and promotion in the Shop megamenu template part. The Header’s Navigation block contains the trigger and mobile links.

Shop megamenu · editable compositionView full size ↗

Mobile navigation

Homes and Shop use compact accordion groups in the mobile menu. Their labels and links come from Navigation blocks. Edit the Mobile menu introduction template part for its caption and Search block. Preserve the theme’s existing additional CSS classes if you want to retain its mobile presentation.

Account and Basket

Select the WooCommerce Customer Account block beside Search to edit its display/dropdown settings. Guests see Login and, when registration is enabled, Register. Customers use native My Account, Orders, Downloads and Logout destinations. Enable registration under WooCommerce → Settings → Accounts & Privacy if required.

The Mini-Cart block supplies the basket count and drawer. To change “Basket,” edit the adjacent Paragraph in the header’s basket group. Keep the group structure for the label integration.

Product search, including Home Market

Select the Search block to edit its label, placeholder and button text. Home Market uses a compact “Find it” action. Keep the native Search block and its product query; avoid replacing it with a Custom HTML form. It submits WooCommerce product searches using WordPress’s normal search handling.

Check pointer hover, keyboard Tab/Enter/Escape and mobile tap after editing menu structures. Long labels should wrap without pushing controls off screen.

Edit the shared footer

Open Appearance → Editor → Patterns → Template parts → Footer. Expand its groups and columns in List View. Edit the logo, column headings, Navigation links, support copy and bottom line in their respective blocks, then preview your changes before saving. Update shared site information consistently with your other pages.

Footer · editable link columnsView full size ↗

Tell the rest of your story.

About, Contact and help pages

Edit imported pages in Pages → All Pages. For a manual setup, create a page, insert a matching pattern from Grocenest pages and choose its matching template. FAQ and Delivery & Returns use native Details blocks: edit each summary for the question and the blocks inside it for the answer.

Privacy Policy and Terms & Conditions

The supplied pages are sample content for you to complete. Replace bracketed fields, store contact information and all example policies with your actual business information. Select the published Privacy Policy page in Settings → Privacy. Assign your published Terms page in WooCommerce → Settings → Advanced when you want it used at checkout.

Blog and article pages

Set your Blog as the Posts page under Settings → Reading. Manage posts in Posts → All Posts, including featured image, excerpt, categories and article blocks. The assigned Posts page uses the blog template and native post queries rather than its page body. Edit its layout in the Site Editor.

Blog category archives and article-search results use native WordPress data. Product categories and tags use WooCommerce data. Edit their surrounding banner layouts in the Site Editor without replacing the dynamic archive titles or queries.

404 and Search Results

Open the 404 or Search Results template in Appearance → Editor → Templates. Edit introductory copy, links and layout. These are templates, not pages you need to publish. Keep Search and query blocks in place so the actual query and empty state continue to work.

Products stay native.

Manage products · WooCommerceView full size ↗

Edit a product

Go to Products → All Products → Edit. Update the title, full description, short description, featured image, gallery, categories and tags. Use WooCommerce’s product data controls for price, SKU, stock, weight, dimensions and shipping information.

Edit a product · native WooCommerce editorView full size ↗

Pack size variations

1. Choose Variable product.

   Use the product type selector in the WooCommerce product editor.

2. Add a Pack size attribute.

   For a local attribute, enter meaningful options separated by a vertical bar, such as 250 g | 500 g. Enable Used for variations, optionally enable Visible on the product page, then click Save attributes. A global Pack size attribute can also be selected if your store already uses one.

3. Create or edit the variations.

   For a new product, use Generate variations or Add manually. Set each option’s price and stock, then Save changes. When changing an existing catalog, edit its existing variations carefully rather than deleting and recreating them.

4. Test selection and purchase.

   Save or Update the product, then check every available option, unavailable options, displayed prices and Add to cart behavior.

Pack size · AttributesView full size ↗

Pack size · VariationsView full size ↗

Fill the product card image frame

New rc.93 product cards use the native WooCommerce Product Image block’s Cover setting. For an already-saved homepage, open Pages → Edit. For a customized Shop template, open Appearance → Editor → Templates → Product Catalog. In List View, select Product Image inside the product card and choose Cover / Fill instead of Contain / Fit, then save. Cover may crop a small part of a square image to fill a wider frame. These are layout settings; product image IDs, galleries, prices and stock stay unchanged.

Updating the theme or repeating a demo import preserves existing saved page layouts. Change this setting manually on older pages. Product artwork, logo exports and SVG sources are supplied by the separate Demo Importer; the theme keeps only images needed as pattern fallbacks.

Edit product images and gallery

1. Set the main product image.

   Use the Product image panel in the product editor. This image is separate from the gallery and is normally used on product cards.

2. Add gallery photos.

   Click Add product gallery images. Select relevant images from Media Library, or use Upload files. Click Add to gallery when your selection is ready.

3. Arrange the thumbnails.

   Drag gallery thumbnails into your preferred order. Remove an unwanted thumbnail from the gallery rather than deleting an attachment that may be used elsewhere.

4. Save and preview.

   Save or Update the product. Check the main image, thumbnail order and WooCommerce image zoom/lightbox on desktop and mobile. Use consistent image proportions and clear views of the actual product.

Product gallery · native Media LibraryView full size ↗

Categories, tags and related products

Manage categories and their thumbnails under Products → Categories. Use tags for useful cross-category labels. WooCommerce selects related products from its own catalog relationships and visibility rules; Grocenest styles the native related collection. Edit its layout in the product template and its source data in Products.

Catalog filters depend on actual categories, prices and stock. Changing a card’s text block does not change a product’s price or inventory.

Keep the purchase flow connected.

Set up the Shop page

Select your published Shop page in WooCommerce’s Products settings. For layout changes, open the Product Catalog template in the Site Editor rather than adding a replacement catalog form to the Shop page body.

Shop page · WooCommerce settingsView full size ↗

Shop layout · Product Catalog templateView full size ↗

Assign the store pages

Check WooCommerce → Settings → Advanced → Page setup for Cart, Checkout and My Account. Check Products settings for the Shop page. Each page should have its own appropriate content and assignment; Cart and Checkout must not point to the same page.

Store pages · Advanced settingsView full size ↗

Set up Cart

1. Check the published Cart page.

   Open it in Pages and keep the native WooCommerce Cart block. Both Filled Cart and Empty Cart are part of its composition.

2. Confirm the page assignment.

   Choose that page as Cart in WooCommerce’s Advanced settings. Keep Cart and Checkout as different pages.

3. Preview the real storefront.

   Add your own test product on staging, change its quantity and remove it to check the filled and empty states.

Cart page · native Cart blockView full size ↗

Set up Checkout

1. Keep the native Checkout block.

   Open Pages → Checkout. Preserve its contact, address, shipping, payment, order summary and action blocks.

2. Confirm its assignment and store settings.

   Assign Checkout in Advanced settings. Configure shipping, taxes and a payment gateway separately in WooCommerce.

3. Test with the gateway’s test mode.

   Use your staging store to check validation, totals and order confirmation. An editor preview does not verify a purchase flow.

Checkout page · native Checkout blockView full size ↗

Set up My Account

1. Keep the native account shortcode.

   The page should contain one Shortcode block with [woocommerce_my_account]. Grocenest provides the surrounding editable template.

2. Assign the page.

   Select it as My account in WooCommerce → Settings → Advanced → Page setup.

3. Choose registration behavior.

   Use Accounts & Privacy to enable account creation on My Account when you want a Register form. Check guest and signed-in views using your own test account.

My Account · native shortcodeView full size ↗

Registration & login · Accounts & PrivacyView full size ↗

Customize surrounding content

Edit banners, introductions, support links, spacing and shared parts in the Site Editor. Keep the native commerce blocks and Post Content connection. Checkout field rules, shipping, taxes, payment methods, account endpoints and order permissions belong to WooCommerce and its extensions.

Test before launching

Use a staging store and a payment gateway’s test mode. Add a simple product and a variation, change cart quantities, remove an item, try a coupon, check shipping/taxes, place a test order and inspect confirmation and account orders. Test guest and signed-in flows. Never use a real customer’s account for testing.

More: WooCommerce Advanced settings and Accounts & Privacy settings.

Connect your conversations.

Configure Contact Form 7

1. Open Contact → Contact Forms.

   Edit the imported Grocenest form or create your own. Adjust labels, required fields and English success/error messages.

2. Configure Mail.

   Set your real recipient and a sender address appropriate for your domain. Use the visitor email in Reply-To rather than as the sender. Set up your host’s email delivery or a suitable mail transport service.

3. Select the form on the Contact page.

   Edit the native Contact Form 7 block in Gutenberg and select the correct form.

4. Test validation and delivery.

   Check empty and invalid fields, then send a test with your own address. Confirm that the email reaches the intended inbox.

Contact fields, mail and response messages

Contact Form 7 · form fieldsView full size ↗

Contact Form 7 · Mail settingsView full size ↗

Contact Form 7 · English messagesView full size ↗

Select the form in Gutenberg

Contact page · native Gutenberg form blockView full size ↗

Connect Mailchimp

1. Connect MC4WP → Mailchimp.

   Enter your API key in WordPress. Credentials are not included in any demo.

2. Edit the newsletter form.

   In MC4WP → Form, select the intended Audience in its settings. Check required Audience fields and choose the appropriate double opt-in setting.

3. Edit the shared Newsletter part.

   In Appearance → Editor → Patterns → Template parts → Newsletter, select the native MC4WP form block and choose the form. If you saved a pending message earlier, replace that group with the form block.

4. Test with an address you own.

   Submit the form, check its success/error messages and confirm the subscriber status in Mailchimp. If double opt-in is enabled, open the confirmation email and confirm the subscription.

Connect your Mailchimp account

Mailchimp connection · MC4WPView full size ↗

Edit newsletter fields

Newsletter · Fields and previewView full size ↗

Choose the Audience and opt-in settings

Newsletter · Audience and double opt-inView full size ↗

Customize newsletter messages

Newsletter · English signup messagesView full size ↗

Until both API connection and Audience selection are ready, the initial newsletter composition can show a pending or disabled state. Installing a form plugin after importing does not replace an edited Contact or Newsletter layout automatically; insert its native form block yourself.

Customize without losing your work.

Before updating

Back up the database, uploads and your custom theme code. Test the new theme ZIP on staging, then update through WordPress’s theme upload flow. Saved Site Editor customizations normally retain precedence, so a changed theme default may not replace your customized template.

Use Global Styles first

For colors, fonts and common spacing, use Styles and block settings before writing CSS. For a small CSS adjustment, use the Site Editor’s Additional CSS option if available in your WordPress version. Preview changes carefully on both desktop and mobile.

Example: a reusable content class

Select a Group block and add store-reading-width under Advanced → Additional CSS class(es). Then add this CSS through your supported customization surface:

/* A merchant class for narrow editorial content. */
.store-reading-width {
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

Use a child theme for PHP changes or longer-term code customization. Avoid editing parent theme files directly: an update can replace those edits. Theme CSS uses semantic colors and typography tokens from theme.json; developer changes should reuse them.

Backups and exports

WordPress can export Site Editor customizations. Keep this alongside a full site backup; a theme export is not a backup of orders, products or Media Library files.

A few quick checks.

Ready for real customers?

• Replace sample products, prices, copy, images, contact information and policy pages.
• Check the logo, favicon, menus and every important link.
• Review colors and text contrast, heading sizes and mobile wrapping.
• Check all product variations, stock states, categories, filters and search.
• Set currency, shipping areas/rates, taxes, payment methods and checkout pages.
• Test guest and customer purchase flows using a staging store and gateway test mode.
• Verify order confirmation, order emails, My Account and password recovery.
• Verify Contact email delivery and newsletter signup/confirmation with your own addresses.
• Check keyboard access, focus visibility, image alternative text and menu/accordion controls.
• Confirm backups, update procedures and the intended WooCommerce site visibility setting.

This is a store-owner setup checklist. It does not certify WooCommerce Marketplace acceptance. Marketplace review and the theme’s release checks are separate processes.

A little help when you need it.

For theme assistance, visit AtelierThemes. Include your theme version, WordPress/WooCommerce versions, affected URL, screenshot and steps to reproduce. For import issues, include the selected demo and the exact error. Keep passwords, API keys and customer information out of support messages.

Official platform guides

• WordPress Site Editor
• WordPress Styles
• WooCommerce Advanced settings and page setup
• WooCommerce Accounts & Privacy

About this guide

This documentation opens locally: keep index.html and styles.css together and open index.html in a browser. It has no JavaScript, external fonts or tracking. External help links require an internet connection. Use your browser’s Print command for a print-friendly copy.

Prepared for Grocenest 1.0.0-rc.93 and Grocenest Demo Importer 1.0.0-beta.2 · 13 October 2026 · English documentation by AtelierThemes.