Integration
Webflow

Webflow

You are just 2 steps away from adding mySHOEFITTER to your shop and reduce your return rate drastically.

Add the Script

  1. Log into Webflow: Open your browser, navigate to the Webflow website (https://webflow.com (opens in a new tab)), and log into your account.

  2. Choose your project: From your dashboard, click on the E-Commerce project you wish to add the custom script tag to.

  3. Navigate to Project Settings: Once inside your project, click on the "Project Settings" button located at the top right corner of the dashboard.

  4. Select the Custom Code section: Inside Project Settings, navigate to the "Custom Code" tab found on the top menu.

  5. Add the script in the Footer Code section: Under the "Footer Code" box, you can add the following script tag. The code you insert here will be added before the </body> tag on every page across your site. Make sure your script tag begins with <script> and ends with </script>.

index.html
<!-- Load the mySHOEFITTER Script -->
<script src="https://js.myshoefitter.com/v1/script.js"></script>
 
<!-- Initialize mySHOEFITTER -->
<script type="application/javascript">
  myshoefitter.init({
    shopId: 'your-shop-id', // <- Replace
    productId: 'custom-product-id' // <- Replace
  });
</script>

  1. Save your changes: Click the "Save Changes" button on the top right corner of the page.

  2. Publish your site: Navigate back to the designer by clicking on the designer icon on the left-hand side. Click on the "Publish" button at the top right corner of the designer to make your changes live.

Add the button

  1. Go to Designer: In the project's dashboard, click the "Designer" button in the top-right corner to open the Designer tool.

  2. Find your 'Add to Cart' button: Navigate to the page that contains the "Add to Cart" button. Usually, it's in your product template page. If it's not visible in the page's structure, make sure you've added a product to the cart for testing purposes.

  3. Add a new button: In the left panel, select "Add Elements". Then, under the "Form" section, drag a "Button" element and drop it next to the "Add to Cart" button in your design layout.

  4. Set an ID for your button: Select your newly added button, then, on the right-side panel under "Element Settings" (the cogwheel icon), type myshoefitter-button into the "ID" field.

  5. Save your changes: Click the "Save" button in the top-right corner of the Designer interface.

  6. Publish your site: Once saved, click the "Publish" button at the top right of the designer to make your changes live.

ShopifyWoocommerce