Setup

This guide assumes that you have already installed the Modi app from the Shopify App Store. If not, please do so before proceeding.

Step 1: Insert Config code

In your product page file (usually product.liquid, main-product.liquid, or similar), insert the following code towards the bottom of the product form file:

<script src="https://modi-fit.s3.us-east-2.amazonaws.com/widgets/production/public-find-my-size.js" defer></script>


<script src="https://modi-fit.s3.us-east-2.amazonaws.com/widgets/production/public-reviews.js" defer></script>



<script>
  const StoreId = '{{ shop.id }}'
  const StoreDomain = '{{ shop.permanent_domain }}'
  const StoreName = '{{ shop.name }}'
  const ProductId = '{{ product.id }}'
  const ProductName = '{{ product.title }}'
  const ProductImage = '{{ product.featured_image | image_url }}'
  const ProductVariants = {{ product.variants | json }}
</script>


<link rel="preconnect" href="https://fonts.googleapis.com">
<link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

Step 2: Locate where you want the Find My Size button to show in the theme files

Merchants often place the "Find Your Size" button above or below size selectors, commonly located in files like product.liquid or main-product.liquid.

In Shopify, size selectors are integrated into product variants. To locate them in the liquid file, search (ctrl+f) for the term "variants." Since variants can include product color selection, focus on finding the variants section specifically related to size.

Step 3: Insert "Find your size" code:

div id="modifit-find-my-size" class='modi-style'></div>

Insert the "Find Your Size" code in your preferred location, ideally above or below the size selector.

To see the "Find Your Size" button on the page after completing the setup, ensure you've added a product to a size chart for the button to appear for that specific product. You can find those steps here.

Next:

Last updated