Downloading the app onto a 1.0 theme
Websites using a 1.0 Shopify theme will need to manually add a code snippet to complete the installation of the app. If you would like one of our developers to do this step for you, please contact us at support@trywithmirra.com
Installation steps for 1.0 themes
- Download the app
- Complete the onboarding steps and choose your settings
- Copy and paste the below code script into your product pages from the Theme Editor
{% for selling_plan_group in product.selling_plan_groups %}
{% if selling_plan_group.name == 'Try with Mirra' %}
{% liquid
assign selling_plan = selling_plan_group.selling_plans[0]
assign selected_variant = product.selected_or_first_available_variant
%}
{% endif %}
{% endfor %}
<script>
(function () {
// Convert the selling plan, product and variant to JSON so that we can use them in JS
let tryWithMirraSellingPlan = {{ selling_plan | json }};
let product = {{ product | json }};
let selectedVariant = {{ selected_variant | json }} || {};
let extensionSettings = {{ block.settings | json }} || Object.assign({
customCss: '',
mobileBreakpoint: 768,
maxWidth: 44,
width: 100,
mobileWidth: 100,
height: 3,
margin: 'auto',
marginTop: 0,
try_items_max: 3,
buttonBackgroundColor: '#121212FF',
buttonTextColor: '#FFFFFF'
}, window.TryWithMirraExtensionSettings || {});
const customerTags = {{ customer.tags | json }} || [];
const shopMetafields = {{ shop.metafields.mirra | json }} || {};
const tryWithMirraProductProperties = {
tryWithMirraSellingPlan,
product,
selectedVariant,
extensionSettings,
customerTags,
shopMetafields
}
// Add the TWM product properties to the window object so that we can access them in the TWM script
if (!window.TryWithMirra) {
window.TryWithMirra = {};
}
window.TryWithMirra.productProperties = tryWithMirraProductProperties;
// Fire event for TWM product button loaded
window.dispatchEvent(new CustomEvent('tryWithMirraProductButtonLoaded', { detail: { ...tryWithMirraProductProperties } }));
})();
</script>
<!-- This div should go under the "Add to cart" button where you want the Try with Mirra button to display -->
<div id="try-with-mirra-product-container"></div>