How to create e-commerce website in 12 hours

Nurzhan Ospanov
Jan 18, 2017 · 7 min read
Image for post
Image for post

During my winter break in Kazakhstan on December 2016, I’ve met with my old friend Kana Beisekeyev — professional filmmaker and photographer.

After chatting about how our things were going, I’ve proposed Kana to create his website together since he significantly updated his portfolio with new amazing documentary projects. Plus his old website was designed with the aim to show portrait photos and Kana is now focused on filmmaking his website needed to get updated for different goal.

Also Kana wanted to start selling some of his photo series as framed posters, so he can spread a word about Kazakhstan even more and get additional income source.

We’ve decided to keep our motivational momentum and start the next day.

Goals

  • website has to be mobile friendly
  • design should be simple and focused on emphasizing documentary projects
  • fully operating store with framed posters
  • finish in 8 hours (as you’ve already understood from the title, we failed with this one and finished in 12 hours 🙂)

I was responsible for choosing a platform, taking care of all technical parts and setting up the store while Kana was responsible for creating content and text. Finally, we’ve decided that we will work on design together.

Choosing a platform

Moreover, Shopify Support is operating 24/7 with people called Shopify Gurus ready to help you in a chat straight away. I was constantly addressing different questions to them and live support accelerated our process significantly.

At the end we both realized that choosing Shopify was a right move and actually we achieved our goals mainly because of that very first decision.

Design

Image for post
Image for post

Once we got understanding with images and concept, it is time to choose a theme. There are plenty of Shopify themes you can use in your store and it is important to pick one that fits best into your needs. It is well worth spending some time studying themes beforehand.

We’ve chosen Boundless theme. It is simple, mobile friendly and has “single product gallery to feature large, high-resolution images”. Perfectly fits into our goals!

Moreover, this theme is free, so we could try without spending money.

Setting up documentary portfolio

Recently, I graduated from Make School Summer Academy in San Francisco where I learned iOs programming. What I’ve learned the best during my summer is that you don’t have to be afraid to fail and don’t need to keep thinking about the problem itself. All you have to do is to make baby steps or “eat elephant one bite at a time”, as I sometimes imagine. This approach is extremely helpful and can be used in almost every situation when you face with the problem.

So, once we started working on creating portfolio, we found that you can actually upload every documentary project as a product on Shopify and every product obviously has its price and “add to cart button”.

It looked the following way on the homepage:

Image for post
Image for post
You can see price $0 under the title which is not desired in our case

If you press on a image you will open product page:

Image for post
Image for post
We have to get rid off quantity selector, price and “add to cart” button

At this point I’ve started worrying about whether these problems can be solved on Shopify and we are not limited technically by platform. One of Shopify Gurus explained me that we can customize our theme by digging into code which is mix of HTML, CSS, Javascript and Liquid template language.

I have to admit that I have a small experience with these languages and had actually never seen Liquid before, so was a little bit uncomfortable proceeding further.

What can help you in these kind of cases is resourcefulness.

So, several google requests , searching for a code we need in order to remove price from homepage, asking for advice and help from friend Roma (thanks again!) and we are done.

We simply commented some part of product-grid-item.liquid file, so it looks the following:

Image for post
Image for post

Removing price and add to cart button from product page was a little bit more difficult task to accomplish because we need to remove both from documentary projects, but enable for our future store with framed posters. Moreover, we had to add quantity selector for store if customers would like to purchase several posters.

We figured it out by assigning all documentary projects (they are set as products on Shopify) as “Sold out” with price $0 in our admin panel. Then we modified code in product-template.liquid file with the following logic.

If product price is more than $0 then enable quantity selector, and if product is available then show price and “add to cart” button on product page.

Image for post
Image for post

Thus, we are done with setting up documentary portfolio and it’s now time to move on to the next task.

Setting up a store

Printful has a tool called Mockup Generator that saves you enormous amount of time and shows you how your product exactly will look like.

Image for post
Image for post

We used Mockup Generator and synced all images for sale, set sizes for framed posters and prices. It is also good that Printful pays attention to details and gives merchants opportunity to include add-ins such as business card, flyer or sticker into orders, but it will cost you additional fee.

There is still some level of customization you can make for free though. You can upload your logo which will be used as a branding sticker for your orders.

Posters section was looking really good and we enjoyed the process of creating it. Take a look on the image below.

Image for post
Image for post
Image for post
Image for post

Few polishing things

Then, we had to create Privacy Policy and Terms and Conditions. This part was always a nightmare for me and I really hate to deal with all these legal documents.

Luckily, Shopify has free generators for both Privacy Policy and Terms and Conditions. It is cool, isn’t it?

It doesn’t mean though that generated documents will perfectly fit in every case, but you can always tailor it according to your needs later, but as of for starting quickly it is exactly what we needed.

Lastly, we set domain in our setting and the store is launched.

Final result

Image for post
Image for post
Home Page
Image for post
Image for post
Documentary
Image for post
Image for post
Posters

We really enjoyed the process and were so happy to launch!

Image for post
Image for post
Photo after launch

Visit Kana’s website at beisekeyev.com, we hope you will love it ❤️

If you are thinking about starting e-commerce business, choose Shopify and you will be excited about how advanced the platform is.

There are plenty of other great features such as Dashboards, Discounts, Shopify Payments and Sales Channels that I didn’t have a chance to write about.

However, if you will need more information or need help with setting up a store on Shopify, feel free to reach me out.

Thank you for reading and press 💚 if you liked this post — this gives me motivation to keep sharing my experience 😊

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store