Shopify App Theme Extension - Configure your Store Front
Content
- Setup Your Theme
- Add and Configure Mimeeq Configurator Block
- Add and Configure Mimeeq Button Block
- Configure Error Handling
- Cart Processing Tooltips
- Test and Finalize
- 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.
Setup Your Theme
Step 1: Customize Theme
Click on "Customize Theme" in your Shopify admin to access the theme editor.
Step 2: Navigate to Product Templates
Navigate to the Product Templates section in the theme editor.
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.
Add and Configure Mimeeq Configurator Block
Mimeeq offers two blocks for adding configurators:
- 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.
After adding the Dynamic Configurator, enter the Mimeeq Embed Template ID.
- 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:
- Mimeeq Simple Button (the original button with basic customization options).
- Mimeeq Advanced Button (offers significantly more customization options).
Drag the button block to your desired location on the page.
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 | ✅ | ✅ |
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.
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 |
Availability Error Modal | Displays when one or more items in the design are currently unavailable. |
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:
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.
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 |
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 |
Cart Processing Tooltips
The Cart Processing Tooltip displays progressive notifications to keep customers informed when adding products to the cart takes longer than expected. An error modal will appear after a configurable delay if the cart action is still processing.
Setting Up Processing Tooltips
- Add the Cart Processing Tooltip block to your theme
- Configure the timing, visual appearance, and message content
Timing Settings
Configure when each message should appear. Messages show one at a time in sequence.
Setting | Description |
First message delay (seconds) | Time in seconds before the first notification displays |
Second message delay (seconds) | Time in seconds before the second notification displays |
Third message delay (seconds) | Time in seconds before the third notification displays |
Error modal delay (seconds) | Time in seconds before the error modal appears if processing is still incomplete |
Visual Customization
Customize the appearance of the tooltip notification to match your store's branding.
Setting | Description |
|---|---|
Background color | Background color of the notification |
Text color | Color of the message text |
Border color | Color of the notification border |
Progress bar color | Color of the loading progress indicator |
Icon | Choose from: None, Cart, Clock, Magic, Light |
Icon color | Color of the selected icon and dismissal icon X |
Content Settings
Customize the message content for each notification stage.
Setting | Description |
|---|---|
First message | Initial message shown to customers (e.g., "Hmm this masterpiece is taking longer than normal to prepare") |
Second message | Message shown during extended wait (e.g., "Stay with us, we are working our magic behind the scenes") |
Third message | Final message before error (e.g., "Our servers must be overloaded today, this is taking longer than normal") |
Test and Finalize
- Ensure the preview product has Mimeeq metafields completed properly
- Click the View link to test that the configurator loads and functions correctly
- Save your changes
Additional Mimeeq Blocks
Mimeeq Skeleton Loader
The Mimeeq Skeleton Loader block displays a placeholder layout while the configurator is loading. It automatically handles all loading states for the mmq-embed and removes itself once the configurator is ready — giving customers a polished experience instead of a blank space or layout jump.
Add the Mimeeq Skeleton Loader block to the same page as your configurator embed block.
Layout settings
These settings control the size and proportions of the skeleton loader to match your configurator layout.
Setting | Description | Default |
|---|---|---|
Padding Top | Space above the skeleton loader | 0 px |
Padding Bottom | Space below the skeleton loader | 0 px |
Loader Height | Total height of the skeleton loader | 900 px |
Maximum Width | Prevents the loader from expanding beyond this width | 1600 px |
Side Panel Width | Width of the configuration side panel placeholder. Set this to match the side panel width in your embed template | 380 px |
Element Border Radius | Rounds the corners of internal panels and placeholders | 4 px |
Color settings
Customize the skeleton loader's colors to match your store's theme. All colors support a color picker as well as direct hex/RGBA input.
Setting | Description | Default |
|---|---|---|
Base Background Color | Background color outside the main 3D canvas and panel | #F4F4F4 |
Surface Color | Background color of the side panel and active tabs | #FFFFFF |
Border Line Color | Color for thin separating lines and borders | #EDEDEE |
Placeholder Background Color | Base color for text and layout skeleton "bones" | #E4E5E7 |
Placeholder Dark Color | Darker color used for accents like active buttons | #D8D9DC |
Shimmer Animation Effect | Color of the loading sweep animation overlay | rgba(255,255,255,0.7) |
Icon Placeholder Background | Background color for circular icon placeholders | rgba(46,51,65,0.05) |
Mimeeq Embed Translations
This app block allows you to customize interface text with quick access to the 4 most popular fields:
- 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.
Related Help Articles
Updated on: 16/03/2026
Thank you!