Skip to main content

Choose your "Find my size" button style: standard or light

Updated

Sizefox offers 2 ready made styles for the "Find my size" button.

  • Standard Find my size style: 

mceclip0.png

  • Light Find my size style: 

mceclip1.png

Note:

  • depending on your theme and existing customisation, the Light style, might not always align to the right side.
  • You can apply additional CSS customisation. Read more about it here. 

 

How to Change the Button Style:

Depending on your integration method, follow the relevant instruction to apply your choice:

 

If you installed the Sizefox widget using the App block: 

  • click on the block "Sizefox Connect" in your product page editor
  • select the desired style in the drop down named "Button Style"

mceclip2.png

 

If you installed the Sizefox widget using the JS Snippet: 

When you copy the code Snippet provided on the Sizefox "Integrate widget" tab to your main product template page, you can update the property “buttonTheme” with the values “light” or “standard”. See the example highlighted in red below:

 

<script> window.Sizefox = {
styles: {
button: {
padding_x: "14px",
padding_y: "14px",
font_size: "16px",
},
colors: {
primary: "#1a1a1a",
secondary: "#bb9068",
accent: "#eedfcc",
},
},
previewMode: false,
buttonTheme: "light",
buttonPlacement: "#sizefox",
country: {{ localization.country.iso_code | json }},
locale: {{ localization.language.iso_code | json }},
orgId: "teststoreOrgId", platform: { platformId: "xyzberlin1234.myshopify.com", platformType: "shopify" } , product: {{ product | json }}, }; </script> <script type="text/javascript" charset="utf-8" defer src="https://cdn.sizefox.com/assets/widget.sizefox.js"></script>

 

 

 

 

 

Related to

Related articles