tetchi blog

Tetchi's blog about life and stuff

Shopify Tutorial: How to Create a Part Picker Form

Shopify Tutorial – Learn how to create a part picker form


In this tutorial we’re going to be making a parts builder form. It’s an extension of the Order Form that I created a while back. It works by listing single-option products in a table with each variant listed as a radio button.

parts builder

You can see a demo here.

1. Create a new linklist

The first thing you want to do is create a linklist that holds the products that you want to sell through the order form. Go to the “Navigation” page of your admin, and create a new linklist called “Part Picker”. Next, add links to the products that you want to have listed on the order form.

part picker link list

The products that you enter in this linklist will be shown in the table that we’re going to create in the next step.

Please keep in mind that you can only use single-option products.

2. Create an alternate page template

In your Template Editor, click “add a new template” under the Templates section. Select “page”, and call it “part-picker”.

part picker template

Copy the code from this gist and paste it in page.part-picker.liquid. Hit save. It’s pretty bare-bones, and there’s a bit of inline CSS so you’ll have to pretty it up a bit.

3. Create a new page for your part picker

Go to Blogs & Pages, and create a new Page. You can title it whatever you wish. The important part here is to tell it to use the freshly-created page.part-picker.liquid template. You do this by selecting it under the “Templates” dropdown, shown below:

part picker template page

4. Add the part picker script

Inside your Template Editor, create a new snippet called “parts-picker-script”. Add the contents of this gist inside it.

Place the following code right before the </body> tag in theme.liquid.


{% include 'parts-picker-script' %}

The End

That’s it that’s all! You will likely need to sprinkle some CSS love on your table to make it fit in with your theme.

10 Comments

  • Martin
    Martin on January 25th, 2013

    Hi, this is great almost exactly what I am after. My only problem is that I have 2 products on my page, but the first one has multiple variants they choose. Then the second is just an extra quantity box to add an add-on module(s).

    Don’t suppose you know if this is possible or not?

    any help greatly appreciated.

    cheers.

  • tetchi
    tetchi on January 25th, 2013

    Hmm Martin, I’m not sure if I follow. Do you have an example or a mockup you can show me of what you’re looking to achieve?

  • Martin
    Martin on January 30th, 2013

    Hi Tetchi, thanks for getting back to me. I have emailed you a screenshot with further details as no way to attach items to this. Thanks for your time.

  • Dan
    Dan on February 23rd, 2013

    What if I wanted to make them check boxes, i.e select 3 of the following 6, how would I do that?

  • tetchi
    tetchi on February 23rd, 2013

    @Dan: It’s pretty much the same principle at the code in this tutorial. You could have one product in the link list with each of its variants in a checkbox, but you’ll have to adjust the code a bit so that:

    a) you can select multiple checkboxes in one list
    b) add all selected variants of the same product

  • nick1990
    nick1990 on April 23rd, 2013

    Hi Tetchi,
    This script has also been very usefull, i was wondering if it was possible to generate table as follows:

    Pic title price varient quantity
    (pic) Coat 15.0 s (input cell)
    m (input cell)
    L (input cell)

    Where s,m,l, are the varients of the product coat, and upon inputing into cell, the cart will update with these order. this would be qreatly appreciated have strugggled creating a order form for shopify shop for a looooong time

  • Michael Oprisko
    Michael Oprisko on October 2nd, 2013

    Hi Tetchi

    Thank you for the amazing blog! :) Can you help me with customizing the form? Please feel free to email me.

  • Adam
    Adam on July 6th, 2015

    I know this is a little dated but my price doesn’t change when you select a different variant. Im new to this stuff so trying to alter the script is pretty difficult for me.

  • Kylie
    Kylie on February 19th, 2017

    Hi,
    I am trying to work out a way to add a table for my variants onto my product pages so customers can select multiple variants before adding branding and then hitting add to cart.
    Can your table be added to a products page?

  • Tony Harris
    Tony Harris on February 24th, 2021

    Hi Tetchi,

    I really like this product picker, I am using this here as a kind of upsell model: https://original-mattress-company-australia.myshopify.com/collections/firm/products/refresh

    If you select a dropdown it will show an upsell, when you click the button. I really thought I had nailed this, but after further testing, I didn’t realise I would have to add all the products in order from the first row to last. How would I modify the code so if you choose the first variant in the row, you get success in the console? But let’s say I only want to choose the second or third product skipping the first. it’s like I have to add them all from top to bottom.

    Yeah so I cant just go choose the second product and one if it’s variations because I get a fail.

    Any thoughts on this, please?

Post a comment