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
- 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 |
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 |
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 |
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 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: 03/09/2025
Thank you!