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

rahul2001
Visitor
2 0 0

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?

Replies 3 (3)

Arif_Shopidevs
Shopify Partner
129 18 13

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.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
rahul2001
Visitor
2 0 0

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.

Arif_Shopidevs
Shopify Partner
129 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers