Shopify App Theme Extension - Configure your Store Front

Adding your Configurators to your store front

in this article you will learn how to add your configurators into your store front using our theme app extension

our app extension works with themes built with online store 2.0 which is shopify 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

Follow Out 10 Step Guide

Step 1 - Click Customise Theme

Step 1

Step 2 - Navigate to the Product Templates

Step 2

Step 3 - Select the Template You Want to Edit

This can be any template it does not have to be the mimeeq product one shown in the screenshot (this was created for the reasons of our demo) however its could be a good name to use to clearly indicate which products are connected with mimeeq. to create a new template just click new template as per the standard shopify logic

Step 3

Step 4 - Add the Mimeeq App Blocks as Pictured

Step 4

Step 5 - Drag to Reorder the Button

Step 5

Step 6 - Add the Embed Template ID from the Mimeeq Dashboard (External App)

Step 6

Step 7 - Customize Your Button Name and Styles

You can customize the Mimeeq button using CSS targeting button.mmq-button.
For example you could change the shape to a pill and adjust padding by adding this to your CSS theme settings:

button.mmq-button {
    border-radius: 50px;  /* This gives the pill shape */
    padding: 10px 20px;   /* Adjust the padding as needed */
    /* Add any other styles you need, such as background-color, border, etc. */
}

Step 7

Step 8 - Make Sure the Preview Product is One with Mimeeq Metafields Completed

Step 8

Step 9 - Test Everything is Working, by Clicking the Button

Step 9

Step 10 - Save Your Changes

Step 10

Generally there is many fields that you should now hide, such add product variants, price, buy buttons, click the eye symbol to hide them as now the Mimeeq app will be managing those things

Other Types of Mimeeq Theme App Blocks

Addtionally you will find Mimeeq app blocks such as

Theme App Block - Translations

This app block should be added to the same page that your configurator is added

It allows you to customize the names of the interface, the 4 most popular fields are shown for quick and convenient access, which are:

Add to Cart button
View in Room (AR button)
Required Warning Messages
Custom Delivery Information

Additionally there a box where you can paste your translation keys from Mimeeq allowing you to customise the entire configurator UI.

Theme App Block - Standalone Configurator

Should you wish to embed a configurator on any page, even you home page you can do that using the standalone configurator

Updated on: 28/12/2023

Was this article helpful?

Thank you!