If you are using a Shopify Vintage Theme, the button of the widget will automatically inherit the font family of your theme to ensure alignment between the design of your product page and Sizefox widget.
You can nevertheless modify both the padding of the button and the font size as you prefer.
How to modify the padding of the button
You can modify the internal spacing of the button (padding) both vertically and horizontally by updating the properties: “padding_y” and “padding_x”.
The paddings are represented in orange in the image below. Please keep in mind that the spacing added is inside the borders.
PLEASE NOTE: even if you want to modify one of the options (padding_y: "20px" or
padding_x: you have to include values for both)
From within the snippet, here is the code to be modified with your values:
<script> window.Sizefox = {
styles: {
button: {
padding_y: "20px",
padding_x: "14px",
}
}, orgId: "custom-9999", platformId: "my-shopify.myshopify.com", previewMode: true, product: { serial: "{{ product.id | json }}", title: {{ product.title | json }}, keywords: {{ product.tags | json }}, vendor: {{ product.vendor | json }}, }, }; </script> <script type="text/javascript" charset="utf-8" defer src="embedder.sizefox-bundle.js"></script>
How to modify the font size
You can change the font size of your button as you prefer, but before proceeding, please note that the button will show two different types of text:
-
Before the user clicks on it
-
After the user inputs his data and receives a recommendation
In the case no. 2, the button will display exactly the text taken from your size chart, and if the text is long, there is the risk of it being longer than the button width. E.G:
Please keep this scenario in mind before changing the font size of the button.
When you are ready to proceed, modify the code in the snippet to change the font size of your button text:
<script> window.Sizefox = {
styles: {
button: {
font_size: "14px"
}
}, orgId: "custom-9999", platformId: "my-shopify.myshopify.com",
previewMode: true, product: { serial: "{{ product.id | json }}",
title: {{ product.title | json }}, keywords: {{ product.tags | json }},
vendor: {{ product.vendor | json }}, }, };
</script> <script type="text/javascript" charset="utf-8"
defer src="embedder.sizefox-bundle.js"></script>
How to modify the padding and font size at the same time
If you would like to change both the padding and the font size of the button at the same time, you can do so by modifying the code as in the example below:
<script> window.Sizefox = {
styles: {
button: {
padding_x: "10px",
padding_y: "20px",
font_size: "14px"
}
}, orgId: "custom-9999", platformId: "my-shopify.myshopify.com",
previewMode: true, product: { serial: "{{ product.id | json }}",
title: {{ product.title | json }}, keywords: {{ product.tags | json }},
vendor: {{ product.vendor | json }}, }, };
</script> <script type="text/javascript" charset="utf-8"
defer src="embedder.sizefox-bundle.js"></script>