> 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).

# WooCommerce Storefront Setup

Put the Mimeeq 3D configurator in front of your shoppers. Learn to use Gutenberg blocks, Elementor widgets, shortcodes and configurator buttons.

Put the Mimeeq configurator on your site using the WordPress block editor (Gutenberg), Elementor or shortcodes.

{% hint style="info" %}
**Before you start:** finish the setup in [WooCommerce Admin Settings](/commerce-and-integrations/woocommerce/admin-settings.md) and connect your WooCommerce products to Mimeeq first.
{% endhint %}

***

## Available Gutenberg blocks

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

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

![Mimeeq blocks listed under the Mimeeq category in the Gutenberg 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

{% stepper %}
{% step %}

### 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

{% hint style="success" %}
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.
{% endhint %}
{% endstep %}

{% step %}

### 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 [WooCommerce 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

![Configurator block sidebar with Shortcode, Template ID, Configuration Code and Scene Shortcode fields](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)
{% endstep %}

{% step %}

### 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 |
| - | ------------------------------------------------------------ | --------- |
| 1 | Label, background colour, text colour                        | ✅         |
| 2 | Shape (rounded, pill, rectangle or custom)                   | ✅         |
| 3 | Border colour                                                | ✅         |
| 4 | Icon (palette, brush, magic wand) and icon colour            | ✅         |
| 5 | Hover effect (gradient or custom)                            | ✅         |
| 6 | Idle animation (shimmer, border pulse, glow pulse, and more) | ✅         |
| 7 | Animation speed                                              | ✅         |
| 8 | Padding                                                      | ✅         |

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

![Advanced Button block style panel with colour, shape, icon and animation options](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)
{% endstep %}
{% endstepper %}

***

## Elementor widgets

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

| # | Widget              | What it does                                                                                         | Setup                                                                                                                                                                             |
| - | ------------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1 | **Configurator 3D** | The Elementor equivalent of the Configurator block — embeds the 3D configurator directly on the page | Widget panel → **Content** tab → enter the **Short code** and **Template ID** (optionally also **Configuration code**, **Scene short code** and a **Public price list** override) |
| 2 | **Advanced Button** | The Elementor equivalent of the Advanced Button block, with the same styling options                 | Widget panel → **Style** tab                                                                                                                                                      |

![Elementor widget panel showing the Mimeeq Configurator 3D widget settings](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

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>WooCommerce Admin Settings</strong></td><td>Configure API, cart, product naming and sync settings.</td><td><a href="/commerce-and-integrations/woocommerce/admin-settings.md">WooCommerce Admin Settings</a></td></tr><tr><td><strong>Error Recovery</strong></td><td>Review, filter and resolve logged configurator and cart errors.</td><td><a href="/commerce-and-integrations/woocommerce/error-recovery.md">WooCommerce Error Recovery</a></td></tr><tr><td><strong>WooCommerce Add to Cart Methods</strong></td><td>Turn configurations into cart items, bundles or modular products.</td><td><a href="/commerce-and-integrations/woocommerce/add-to-cart.md">WooCommerce Add to Cart Methods</a></td></tr><tr><td><strong>WooCommerce Getting Started</strong></td><td>Install the plugin, add your API key and sync products.</td><td><a href="/commerce-and-integrations/woocommerce/getting-started.md">WooCommerce Getting Started</a></td></tr></tbody></table>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.