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.
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.
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”.
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:
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.
12 Comments
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.
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?
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.
What if I wanted to make them check boxes, i.e select 3 of the following 6, how would I do that?
@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
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
Hi Tetchi
Thank you for the amazing blog! :) Can you help me with customizing the form? Please feel free to email me.
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.
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?
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?
Hi Tetchi I was just wondering if this tutorial still works in 2021 as I have been unable to follow through it. I don’t know much but I believe that Shopify has changed since then. I would really appreciate it if you could reply and help me solve my issue
Thank you
Hey Jeffre, sorry it’s been a while since I’ve visited this code but yes it should still work. Shoot me an email and I might be able to help you out.