How to add a 'fit finder form' to recommend size to customers and add the same size to the cart

Store Design
,
1

Hello community,

Recently I came across a Shopify site - Taylor Stitch and they have added a pretty neat ‘Fit Finder’ option on their product pages along the size chart. You can check it out at https://www.taylorstitch.com/products/station-jacket-in-dark-navy-broken-twill-2405

I want to implement the same in my store. I am using the Impact theme.

I searched for apps, but couldn’t find any that can do the same. It seems like they have done it with custom coding. Can someone please guide me on how I can implement something similar to my store?

2

Hello, @rahul2001

function calculateShirtSize(heightFeet, heightInches, weightLbs) {
    // Convert height to inches
    var totalHeightInches = heightFeet * 12 + heightInches;

    // Determine shirt size based on height and weight
    var shirtSize = "";
    if (totalHeightInches >= 72 && weightLbs >= 250) {
        shirtSize = "XXXL";
    } else if (totalHeightInches >= 68 && weightLbs >= 220) {
        shirtSize = "XXL";
    } else if (totalHeightInches >= 64 && weightLbs >= 190) {
        shirtSize = "XL";
    } else if (totalHeightInches >= 60 && weightLbs >= 160) {
        shirtSize = "L";
    } else if (totalHeightInches >= 56 && weightLbs >= 130) {
        shirtSize = "M";
    } else {
        shirtSize = "S";
    }

    // Output the result
    console.log("Your shirt size is: " + shirtSize);
}

// Example usage
calculateShirtSize(5, 9, 160); // Example: Height: 5 feet 9 inches, Weight: 160 lbs

You can do the task like above code and insert your theme js file.

3

I have made a custom liquid with the code and required CSS, Now I am having an issue creating a size guide drawer with dual tabs(Size chart, Fit Finder), as I believe the size chart drawer in the Impact theme only shows the page content. When I am adding more elements to the page template they are not being displayed.

4

Hi,
The site which you provide render the size chart from a js file which is insert in theme content.