1. Enable the 'SmartSize Script' App Embed
2. Add the button's code snippet to your theme
On the .liquid file where you want to display the button (usually variant-picker.liquid or product-options.liquid), locate the position where you want the button added and insert the following code snippet:
{% comment %}
START SMARTSIZE RECOMMENDER
{% endcomment %}
<style>
#smartrecom-button.smartrecom-main-button {
display: none;
}
#smartrecom-button.smartrecom-main-button.visible {
display: inline-flex;
}
</style>
<div id="smartrecom-inline-button"
style="display: flex;"
data-smartrecom-shop="{{ shop.permanent_domain }}"
data-smartrecom-product-image="https:{{ product | image_url: width: 1000 }}"
data-smartrecom-product-title="{{ product.title }}"
data-smartrecom-product-id="{{ product.id }}"
data-smartrecom-collection-ids="{{ product.collections | map: 'id' | join: ',' }}"
data-smartrecom-tags="{{ product.tags | join: ',' }}"
data-smartrecom-type="{{ product.type }}"
data-smartrecom-vendor="{{ product.vendor }}"
data-smartrecom-localization-language="{{ localization.language.iso_code }}"
data-smartrecom-localization-country="{{ localization.country.iso_code }}"
>
<button id="smartrecom-button"
class="smartrecom-main-button"
type="button"
style="background: #CAAF88;
color: #ffffff;
padding: 6px 14px 8px; border: none;
margin-bottom: 10px">
<span id="smartrecom-button-text">Find my size</span>
</button>
</div>
{% comment %}
END SMARTSIZE RECOMMENDER
{% endcomment %}
3. Styling the button
Feel free to change any of the styles on <button> , under the style property:
Property | What it styles | Sample values |
background | Button's color |
|
color | Button's text color |
|
padding | "Size" of the button, i.e. space around the text label |
|
border | Button's border color and style |
|
margin-bottom | Space below the button, between the button and the next component |
|