> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/commerce-and-integrations/woocommerce/storefront-setup.md).

# Storefront Setup

Add the Mimeeq 3D configurator to your site with Gutenberg blocks, Elementor widgets, or shortcodes — plus buttons and add-to-cart setup.

## Overview

This article explains how to actually put the Mimeeq configurator on your site, using either the WordPress block editor (Gutenberg) or Elementor.

**Before you start:** finish the setup in [Admin Settings](/commerce-and-integrations/woocommerce/admin-settings.md) and connect your WooCommerce products to Mimeeq first.

***

## Available Gutenberg Blocks

The plugin adds 6 blocks, grouped under a **Mimeeq** category in the block inserter:

| Block                    | Use Case                                                       |
| ------------------------ | -------------------------------------------------------------- |
| Mimeeq - 3D Configurator | The main 3D configurator — shown directly on the page          |
| Mimeeq Advanced Button   | A stylable button that opens the configurator when clicked     |
| Mimeeq Add to Cart       | Adds a Mimeeq-configured product to the WooCommerce cart       |
| Mimeeq Group Add to Cart | Adds a set of Mimeeq products to the cart together             |
| Mimeeq WC Product        | Ties an existing WooCommerce product to a Mimeeq configuration |
| Mimeeq WC Group Product  | Same, but for a group of existing WooCommerce products         |

![Screenshot: Mimeeq blocks in the block inserter](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2F5KxMiFEgMqy87KTCnxyS%2F03-blocks-and-widgets-01-block_qphrnj.png?alt=media)

***

## Setting Up Gutenberg Blocks

### Step 1: Open the Page You Want to Edit

1. Edit the product page, template, or regular page where the configurator should appear
2. Click **+** to add a new block

> Creating a dedicated product template makes it much easier to manage all your configured products at once, instead of repeating this setup on every single product page.

### Step 2: Add the Configurator Block

Add the **Mimeeq - 3D Configurator** block. It can be used in two ways, depending on what you fill in:

* **On a WooCommerce product page** — leave the shortcode/template fields empty and the block will automatically use whichever configurator is assigned to that product (set up in the product's **Mimeeq** tab, see [Admin Settings](/commerce-and-integrations/woocommerce/admin-settings.md))
* **On any other page** (homepage, landing page, or a product page where you want a specific configurator regardless of which product it is) — enter a **Shortcode** and **Template ID** directly in the block's sidebar settings

**Block sidebar settings:**

* **Shortcode** — the Mimeeq product code
* **Template ID** — the embed template to use
* **Configuration Code** / **Scene Shortcode** — optional, start the configurator on a specific saved setup instead of its default

![Screenshot: Configurator block sidebar settings](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FqhoDhVX3fPYqbbWiI3hg%2F03-blocks-and-widgets-02-confi_1juv2ss.png?alt=media)

***

### Step 3: Add a Button (Optional)

If you'd rather show a button that opens the configurator in a popup — instead of the configurator sitting inline on the page — use the **Mimeeq Advanced Button** block.

| Feature                                                      | Available |
| ------------------------------------------------------------ | --------- |
| Label, background color, text color                          | ✅         |
| Shape (rounded, pill, rectangle, or custom)                  | ✅         |
| Border color                                                 | ✅         |
| Icon (palette, brush, magic wand) and icon color             | ✅         |
| Hover effect (gradient or custom)                            | ✅         |
| Idle animation (shimmer, border pulse, glow pulse, and more) | ✅         |
| Animation speed                                              | ✅         |
| Padding                                                      | ✅         |

**Want to go further with CSS?** Target `button.mmq-button` in your theme's custom CSS.

![Screenshot: Advanced Button style panel](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FZw4xy1PQB1sKWuaFxr29%2F03-blocks-and-widgets-03-advan_1j5cegt.png?alt=media)

***

## Elementor Widgets

If your site uses Elementor instead of (or alongside) the block editor, the plugin adds two matching widgets:

### Configurator 3D

The Elementor equivalent of the Configurator block — embeds the 3D configurator directly on the page.

**Setup:** Widget panel → Content tab → enter the **Short code** and **Template ID** (optionally also Configuration code, Scene short code, and a Public price list override).

### Advanced Button

The Elementor equivalent of the Advanced Button block, with the same styling options.

**Setup:** Widget panel → Style tab.

![Screenshot: Elementor widget panel](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FoZiM1kSTojExr3IZtZoe%2F03-blocks-and-widgets-04-eleme_h5daoc.png?alt=media)

***

## Shortcodes (for Pages Without a Block Editor)

If you're working with an older page or theme area that doesn't support Gutenberg blocks or Elementor, you can paste these directly instead:

```
[mimeeq_configurator short_code="YOUR_SHORTCODE" template="TEMPLATE_ID"]
[mimeeq_button embed_short_code="YOUR_SHORTCODE" embed_template="TEMPLATE_ID"]
```

Both accept the same optional extras as their block counterparts (configuration code, scene shortcode, and so on).

***

## Test Before You Go Live

1. Confirm the WooCommerce product has a Mimeeq shortcode and template assigned
2. Open the page and check the configurator loads correctly
3. Try adding a configured product to the cart
4. Save your changes

***

## Related Articles

* [Admin Settings](/commerce-and-integrations/woocommerce/admin-settings.md)
* [Error Recovery Center](/commerce-and-integrations/woocommerce/error-recovery.md)
* [Add to Cart Methods](/commerce-and-integrations/woocommerce/add-to-cart.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.mimeeq.com/commerce-and-integrations/woocommerce/storefront-setup.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.