Articles on: Commerce Carts

Shopify App Theme Extension - Configure your Store Front

Content


  1. Setup Your Theme
  2. Add and Configure Mimeeq Configurator Block
  3. Add and Configure Mimeeq Button Block
  4. Configure Error Handling
  5. Test and Finalize
  6. Additional Mimeeq Blocks


In this article, you will learn how to add your configurators to your storefront using our theme app extension. Our app extension works with themes built with Online Store 2.0, which uses Shopify's drag and drop theme editor.


You should first read this guide: Shopify App - Admin Settings to connect your configurators with your existing Shopify products and add your Mimeeq API key.


Setup Your Theme


Step 1: Customize Theme


Click on "Customize Theme" in your Shopify admin to access the theme editor.


Customize Theme

Step 2: Navigate to Product Templates


Navigate to the Product Templates section in the theme editor.


Product Templates


Step 3: Select Your Template


This can be any template - it does not have to be the Mimeeq product template shown in the screenshot (this was created for our demo purposes). However, using a clear name like "Mimeeq Product" helps indicate which products are connected with Mimeeq. To create a new template, click "New Template" following standard Shopify logic.


Select Template


Add and Configure Mimeeq Configurator Block


Mimeeq offers two blocks for adding configurators:


  1. Dynamic Configurator Block: Use on product pages where each Shopify product already has an assigned shortcode. Automatically connects to the viewed product, can load with or without a button based on your Mimeeq template settings.


Dynamic Configurator Block


After adding the Dynamic Configurator, enter the Mimeeq Embed Template ID.


Enter Mimeeq Embed Template ID


  1. Standalone Embed Block: Use on any other page (homepage, landing pages) or when you don't need Shopify product management. Requires both a Shortcode and Template ID. Ideal for stores with a single customizable product.


Add and Configure Mimeeq Button


If your embed template is set to load with a button, you can add and customize a Mimeeq button. There are two button types available:


  1. Mimeeq Simple Button (the original button with basic customization options).
  2. Mimeeq Advanced Button (offers significantly more customization options).


Drag the button block to your desired location on the page.


The Advanced Button was launched on August 21, 2025. If you created a button block before this date, you are probably still using the Simple Button.


Mimeeq Button Block


Customize Button Appearance


You can customize and use both Simple and Advanced buttons in your store. Here's what settings are available in each button type:


Setting

Simple Button

Advanced Button

Label

Background Colour

Text Colour

Shape

✅ (Rounded, Pill, Rectangle, Custom)

Border Colour

✅ (Gradient or Custom)

Icon

✅ (Palette, Brush, Magic Wand, None)

Icon Colour

✅ (Gradient or Custom)

Hover Background Color

✅ (Only Custom)

✅ (Gradient or Custom)

Text Hover Color

Icon Hover Color

✅ (Gradient or Custom)

Idle Animation Type

✅ (Shimmer, Border Pulse, Glow Pulse, Corner Sweep, Wave Border, None)

Idle Animation Speed

✅ (2 seconds, 3.5 seconds, 5 seconds, Custom)

Idle Animation Intervals

✅ (Every 2 seconds, Every 3.5 seconds, Every 5 seconds, Custom)

Repeat Idle Animation

✅ (1-3 times, Custom, Infinite)

Top/Bottom Padding

Left/Right Padding

Vertical Margin


For additional customization beyond these settings, you can use CSS to style the Mimeeq button by targeting <button.mmq-button>.


Button Settings


Configure Error Handling


If customers experience issues with configurator, you can customize various error handling elements. First add the App Error Modal block to your theme and then you can customize available content.


Learn More: You can find detailed information about setting up notifications and how the error recovery center works in our dedicated guides.


Error Modal Types


Modal Type

When It Appears

Cart Error Lodal

Displays when a product cannot be added to the cart.

Embed Error Modal

Displays when the configurator fails to load on the page.

Price Error Modal

Displays when product pricing cannot be calculated or shows invalid values


Error Modal Settings



Each modal has title, description and content fields that you can customize and change. Each modal has different illustration, but the layout stays the same. Here is an example of how this modal can look like:


Modal Example


Recovery Form Settings


When customers experience errors, they can submit their recovery information so you can contact them and not lose the sale. You will receive an email with all submitted information, and it will also be stored in the Error Recovery Center.


Note: Only the email field is required to submit the form.


Field

Description

Type

Name Field Placeholder

Placeholder text for Name input

Text

Email Field Placeholder

Placeholder text for email input

Text

Optional Message Field Placeholder

Placeholder text for message textarea

Text

Submit Button Label

Text displayed on submit button

Text

Optional Disclaimer

Checkbox text (e.g., Privacy Policy acceptance)

Text + Checkbox


Recovery Form Settings


Success Modal Settings


Displays after customer successfully submits the recovery form. This modal will automatically close after 3 seconds.


Setting

Description

Modal Title

Title shown when recovery data is successfully submitted

Modal Content

Message content displayed in success modal


Success Modal Settings


Loading Delay Toast Messages


Progressive notifications shown while cart processing takes longer than expected. Error modal automatically appears after 16 seconds if the cart action is still processing.


Message

Display Time

Purpose

First Toast Message

4-8 seconds

Initial loading indicator

Second Toast Message

8-12 seconds

Extended wait notification

Third Toast Message

12-16 seconds

Final warning before error modal


Delay Toast Messages Settings


Test and Finalize


  1. Ensure the preview product has Mimeeq metafields completed properly
  2. Click the View link to test that the configurator loads and functions correctly
  3. Save your changes


Preview Changes


Additional Mimeeq Blocks


Mimeeq Embed Translations


This app block allows you to customize interface text with quick access to the 4 most popular fields:


Mimeeq Embed Translations block should be added to the same page as your configurator.


  • Add to Cart Button: Customize the purchase button text
  • View in Room (AR Button): Customize AR functionality text
  • Required Warning Messages: Set validation messages
  • Custom Delivery Information: Add delivery details


Additionally, there's a box where you can paste your translation keys from Mimeeq to customize the entire configurator UI.


Additional Mimeeq Blocks


Updated on: 03/09/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!