Skip to main content

How to modify the position of the “Find my Size” button on your product page - Vintage Theme

Updated

Sizefox allows you a great degree of customization when it comes to modifying the position of the button within your product page. Depending on your preferences, you can choose between two different types of customization.

 

Option 1 - Add an extra snippet

Add the following snippet to your product template in the very place you want the “Find my Size” button to be shown.

 

mceclip0.png

 

Option 2 - Add a custom button placement ID

If for any reason you prefer to not add the above mentioned snippet, you have the option of adding a custom button placement ID within the normal Sizefox snippet, as in the example below:

<script> window.Sizefox = { orgId: "custom-9999",
 platformId: "my-shopify.myshopify.com",
 previewMode: false, buttonPlacement:
 "#sizefox", 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>

The buttonPlacement is completely optional, but if you want to use it make sure to always follow the below points:

  • Must contain a hash: #my-id
  • Must contain a valid id identifier: #my-id
  • Must be a unique id

How to know if your id is valid? Please check this official documentation https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

 

How does it work exactly? Here the two behaviours you can expect::

1 - Your identifier matches a button HTML element.

For instance, if your id is called buttonPlacement: "#my-custom-button", and your HTML is

<button id=”my-custom”></button>

 

The widget will look for your button element, and will replace the button element by a new button created by our widget. The identifier #my-custom looks up the exact position where the button will be implemented but will be removed afterwards. Keep this in mind as it means that you won’t be able to point your button with that widget for further operations with different scripts/widgets/snippets. 

 

2 - Your identifier matches any other element (but not an HTML “button” element)

For instance, if your id is buttonPlacement: "#my-custom-element", and your HTML is

<div id=”my-custom-element”>...extra code...</div>

 

The widget will look for the custom element and will append the widget button to the container without removing anything inside of it. If for instance you point your add to cart form, the widget button will be placed inside it at the very bottom of the form. In this case the identifier will work as an object where your button will be appended.

Related articles