Over the past week and a half I've been able to spend a few hours each night working on the online store so it is finally showing some progress. Since there have been some questions about it, I figured I would share the details about how I'm going about updating the site to include a store.
For guys that don't want to read the wall of text below, the TLDR is that I have to update the kit order pages before creating the store. I've made some progress on updating the order pages but still have at least a week and a half to go before those pages are done and I can start on the store.
Today the kit order pages (where you select your kit configuration and options) are static. The options that appear on those pages are hard coded on the website. This means to add, remove or update an option I go into the code for that page and do whatever change needs to be done. If the option is something that is available on the street Goblin and the Goblin A/T, I have to update the option on both pages. If I tossed a store up there that was designed the same way, I would then have 3 places to update the options. It was quick and easy to do this back when we started but it isn't sustainable.
So, the first step in creating a store is to update the kit order pages to dynamically load the options from the same source that the store will use. This source is Shopify.
Shopify is normally used to make the whole store (from the front end that the users see to the back end that only I would see) but I find it difficult to customize the front end to work for ordering the kits. You are only allowed so many variants on a product page so I can't make kit order pages with donor options, chassis length, chassis type, door bar style and all the other options. It is also tricky dealing with the full kit price vs the deposit price. For this reason I'm only using Shopify for the back end (storing the product data, processing payments and handling customer/order info).
Shopify makes it easy to add a new item, add a couple of photos, a description, price, variations and tag it as part of collection. The collections will be something like goblin-AT-options and every item added to the goblin-AT-options collection will automatically appear on the Goblin A/T order page.
For the past week and a half I've been figuring out how to integrate the Shopify data into a regular site. I found that the way to do this is to use the Shopify Javascript Buy SDK. There has been a steep learning curve with this product but I'm getting the hang of it. I've got the collection of items appearing on the kit order page including a photo, title, price and description. When I add something to the collection on Shopify it automatically appears on our site. It's pretty cool.
The next big hurdle is figuring out the checkout process. The kit order pages show your total kit price so you know what your kit costs as it is configured. It would be misleading if it showed you just the deposit price and you had no idea how much the kit cost with your selected configuration. So that's why we need to show the full price. However, when you go to checkout you just pay a deposit and not the full price. This means I need to have our page create a checkout that has a line item for the deposit at the deposit price and line items for all of your options at no charge. That way you only pay for the deposit up front and the database still gets a list of all of your options without you paying for all of the options up front.
Finishing up the kit checkout process and the final look and feel of the order pages will take at least another 1.5 weeks worth of nights.
Once I get the whole kit ordering process functioning I will be able to build the store. On paper the store is much easier than the kit order pages since the products don't require nearly as many variations and the price isn't broken up into a deposit + final payments.
At first there is a good chance it will just be a table of thumbnails and item names for every item we offer. When you click on one it'll take you to the page for that item and you'll be able to add it to cart. Eventually I'd like to group the items base on various criteria so that it is easy to narrow down the options you want to see but I'm looking for the minimum viable store at first.
Also, the first thumbnails of the products will definitely leave a bit to be desired until we can get some type of booth setup for taking high quality photos.
If you have any questions, please let me know.
For guys that don't want to read the wall of text below, the TLDR is that I have to update the kit order pages before creating the store. I've made some progress on updating the order pages but still have at least a week and a half to go before those pages are done and I can start on the store.
Today the kit order pages (where you select your kit configuration and options) are static. The options that appear on those pages are hard coded on the website. This means to add, remove or update an option I go into the code for that page and do whatever change needs to be done. If the option is something that is available on the street Goblin and the Goblin A/T, I have to update the option on both pages. If I tossed a store up there that was designed the same way, I would then have 3 places to update the options. It was quick and easy to do this back when we started but it isn't sustainable.
So, the first step in creating a store is to update the kit order pages to dynamically load the options from the same source that the store will use. This source is Shopify.
Shopify is normally used to make the whole store (from the front end that the users see to the back end that only I would see) but I find it difficult to customize the front end to work for ordering the kits. You are only allowed so many variants on a product page so I can't make kit order pages with donor options, chassis length, chassis type, door bar style and all the other options. It is also tricky dealing with the full kit price vs the deposit price. For this reason I'm only using Shopify for the back end (storing the product data, processing payments and handling customer/order info).
Shopify makes it easy to add a new item, add a couple of photos, a description, price, variations and tag it as part of collection. The collections will be something like goblin-AT-options and every item added to the goblin-AT-options collection will automatically appear on the Goblin A/T order page.
For the past week and a half I've been figuring out how to integrate the Shopify data into a regular site. I found that the way to do this is to use the Shopify Javascript Buy SDK. There has been a steep learning curve with this product but I'm getting the hang of it. I've got the collection of items appearing on the kit order page including a photo, title, price and description. When I add something to the collection on Shopify it automatically appears on our site. It's pretty cool.
The next big hurdle is figuring out the checkout process. The kit order pages show your total kit price so you know what your kit costs as it is configured. It would be misleading if it showed you just the deposit price and you had no idea how much the kit cost with your selected configuration. So that's why we need to show the full price. However, when you go to checkout you just pay a deposit and not the full price. This means I need to have our page create a checkout that has a line item for the deposit at the deposit price and line items for all of your options at no charge. That way you only pay for the deposit up front and the database still gets a list of all of your options without you paying for all of the options up front.
Finishing up the kit checkout process and the final look and feel of the order pages will take at least another 1.5 weeks worth of nights.
Once I get the whole kit ordering process functioning I will be able to build the store. On paper the store is much easier than the kit order pages since the products don't require nearly as many variations and the price isn't broken up into a deposit + final payments.
At first there is a good chance it will just be a table of thumbnails and item names for every item we offer. When you click on one it'll take you to the page for that item and you'll be able to add it to cart. Eventually I'd like to group the items base on various criteria so that it is easy to narrow down the options you want to see but I'm looking for the minimum viable store at first.
Also, the first thumbnails of the products will definitely leave a bit to be desired until we can get some type of booth setup for taking high quality photos.
If you have any questions, please let me know.