Shopify Tutorial: 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.
9 Comments
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?
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.
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.
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
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
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?
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.
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?
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.