Shopify Theme Extension
Add Mimeeq configurators, buttons and error handling to your Shopify storefront. Learn to set up each Mimeeq app block in the Shopify theme editor.
Add your configurators to your storefront using our theme app extension. The extension works with themes built with Online Store 2.0, which uses Shopify's drag-and-drop theme editor.
Set up your theme
Select your template
This can be any template. It does not have to be the Mimeeq product template shown in the screenshot, which was created for demo purposes. 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 the Mimeeq configurator block
Mimeeq offers two blocks for adding configurators. Choose the one that fits the page.
Use on product pages where each Shopify product already has an assigned shortcode. It automatically connects to the viewed product and can load with or without a button, based on your Mimeeq template settings.
After adding the Dynamic Configurator, enter the Mimeeq Embed Template ID.
Use on any other page (homepage, landing pages) or when you don't need Shopify product management. It requires both a Shortcode and a Template ID. Ideal for stores with a single customisable product.
Skeleton loader
The skeleton loader displays a placeholder layout while the configurator is loading. Customers see a polished experience instead of a blank space or layout jump. It removes itself automatically once the configurator is ready.
The loader is built into the Dynamic and Standalone Embed Configurator block.
To enable it:
Select the Dynamic and Standalone Embed Configurator block in your theme editor.
Under Skeleton Loader Settings, toggle on Enable skeleton loader.
Layout settings
These settings control the size and proportions of the skeleton loader to match your configurator layout.
Adjust to container
Makes the skeleton loader fill the available container width. Enable this if your configurator is placed inside a constrained layout. When enabled, the Maximum Width setting is hidden, as the loader takes up all available space within the container.
Padding Top
Space above the skeleton loader (px). Default: 0.
Padding Bottom
Space below the skeleton loader (px). Default: 0.
Dimensions Unit
Unit used for the loader height on desktop: either Pixels (px) or Viewport (vh).
Loader Height
Total height of the skeleton loader. Default: 900 px.
Mobile Dimensions Unit
Unit used for the loader height on mobile: either Pixels (px) or Viewport (vh).
Mobile Loader Height
Height of the skeleton loader on mobile devices. Default: 100 vh.
Maximum Width
Only visible when Adjust to container is disabled. Prevents the loader from expanding beyond this width.
Side Panel Width
Width of the configuration side panel placeholder. Set this to match the side panel width in your embed template. Default: 380 px.
Element Border Radius
Rounds the corners of internal panels and placeholders. Default: 4 px.
Colour settings
Customise the skeleton loader's colours to match your store's theme. All colour fields support a colour picker as well as direct hex/RGBA input.
Base Background Color
Background colour outside the main 3D canvas and panel. Default: #F4F4F4.
Placeholder Background Color
Base colour for text and layout skeleton "bones". Default: #E4E5E7.
Shimmer Animation Effect
Colour of the loading sweep animation overlay. Default: #FFFFFB3.
Add and configure the Mimeeq button
If your embed template is set to load with a button, you can add and customise a Mimeeq button. There are two button types:
Mimeeq Simple Button: the original button with basic customisation options
Mimeeq Advanced Button: offers significantly more customisation options
Drag the button block to your desired location on the page.
Customise button appearance
You can customise and use both Simple and Advanced buttons in your store. These settings are available in each button type:
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 the configurator, you can customise various error handling elements. First add the App Error Modal block to your theme, then customise the available content.
Error modal types
Cart Error Modal
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 customise. Each modal has a different illustration, but the layout stays the same. Here is an example of how a modal can look:
Recovery form settings
When customers experience errors, they can submit their contact information so you can reach them and not lose the sale. You receive an email with all submitted information, and it is also stored in the Error Recovery Center.
Name Field Placeholder
Placeholder text for the name input
Text
Email Field Placeholder
Placeholder text for the email input
Text
Optional Message Field Placeholder
Placeholder text for the message text area
Text
Submit Button Label
Text displayed on the submit button
Text
Optional Disclaimer
Checkbox text (e.g. Privacy Policy acceptance)
Text + Checkbox
Success modal settings
The success modal displays after a customer submits the recovery form. It closes automatically after 3 seconds.
Modal Title
Title shown when recovery data is successfully submitted
Modal Content
Message content displayed in the 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 appears after a configurable delay if the cart action is still processing.
To set 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.
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 customisation
Customise the appearance of the tooltip notification to match your store's branding.
Background color
Background colour of the notification
Text color
Colour of the message text
Border color
Colour of the notification border
Progress bar color
Colour of the loading progress indicator
Icon
Choose from: None, Cart, Clock, Magic, Light
Icon color
Colour of the selected icon and the dismissal icon (X)
Content settings
Customise the message content for each notification stage.
First message
Initial message shown to customers (e.g. "Hmm this masterpiece is taking longer than normal to prepare")
Second message
Message shown during an extended wait (e.g. "Stay with us, we are working our magic behind the scenes")
Third message
Final message before the error (e.g. "Our servers must be overloaded today, this is taking longer than normal")
Test and finalise
Ensure the preview product has its 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 lets you customise interface text, with quick access to the 4 most popular fields:
Add to Cart Button: customise the purchase button text
View in Room (AR Button): customise AR functionality text
Required Warning Messages: set validation messages
Custom Delivery Information: add delivery details
There's also a box where you can paste your translation keys from Mimeeq to customise the entire configurator UI.
Related articles
Last updated
Was this helpful?