The configurator in your Shopify store
Add the configurator to your Shopify theme through the theme editor, as a button or embedded in the page. No code writing needed.
On this page4
What you need
- Your company link (slug)
- Access to your store's theme editor
In Shopify, you add the configurator to a page with a section for custom code. You can do this in the theme editor, without changing the theme itself.
Through the theme editor
Open the theme editor.
Go to Online StoreThemesCustomize.
Go to the page where the configurator should appear.
Add a section.
Click Add sectionCustom Liquid. In some themes the section is called "Custom HTML".
Paste one of the snippets below and click Save.
Code for a button
<div style="text-align: center; padding: 40px 20px;">
<h2>Configure your product</h2>
<p>Choose your sizes and options and get a quote straight away.</p>
<a href="https://meetpiloot.nl/{your-slug}/configure"
target="_blank"
rel="noopener noreferrer"
style="display: inline-block;
padding: 14px 28px;
background: #1c1917; /* replace with your own colour */
color: #ffffff;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
margin-top: 16px;">
Start the configurator
</a>
</div>Code to embed the configurator
<div style="padding: 20px;">
<iframe
src="https://meetpiloot.nl/{your-slug}/configure?embed=true"
width="100%"
height="800"
style="border: none;"
title="Configurator">
</iframe>
</div>
<script src="https://meetpiloot.nl/embed/mp-tracking.js"></script>Check that it works
View the page in your store in a private window. The button opens the configurator, or the configurator appears directly in the page.
Read next
Stuck?
Email us or open a ticket from your dashboard. We reply within 1 to 2 working days.