How to enable personalization directly on my store?

All of the products that we offer can be made even more personal by allowing your customer to add their own text, photos or birthstones. Not all types of personalization are available for all products, but in the editor you will find the personalization options that are available for that product.

Unfortunately, personalization is, at the moment, not available for wooCommerce. We hope we can add a plugin for wooCommerce soon!

In order to enable this type of personalization directly on your store, you’ll need to add a small code snippet to your Shopify theme.

This javascript snippet will have to be addedd to the product template. No worries, it is only a few kb and won’t slow down your website. This snippet only initialize when it notice the product is a customizable product.

How to add it?

Adding the snippet to the product template can be done in the theme. To see the themes that are installed in your online store, visit your Shopify admin, click Online Store, then click Themes.

In the right corner, you will find a “‘…” button. Click the “…” button, then click Edit HTML/CSS.

Search for the product.liquid template and add to that file (preferably to the top of the file) the following snippet;

<link href="https://assets.beeoux.com/croppie.css" id="beeoux-js" rel="stylesheet" type="text/css" media="all" />
<script src="https://assets.beeoux.com/croppie.min.js" id="beeoux-js"></script>
<script src="https://assets.beeoux.com/widgets.v2.shopify.js" id="beeoux-js"></script>

{% for field in product.metafields.beeoux %}
 <meta class="beeoux" name="{{ field|first }}" content="{{ field|last }}">
{% endfor %}

{% for field in product.metafields.beeouxcustom %}
<meta class="beeouxcustom" name="{{ field|first }}" content="{{ field|last }}">
{% endfor %}

And that’s that! Now your customers can personalise the products directly on your store.