How to create e-commerce website in 12 hours

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

Before starting we set the following 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

There are many platforms for creating website, but whenever your case is related to e-commerce, the alpha dog here is Shopify. It provides you whatever you need to run a successful e-commerce store, so you don’t need to worry about so many things.

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

In order to reach our goal of emphasizing documentary projects we’ve decided to demonstrate them using “cinema posters style” images. They are large, eye-catching and clearly transfer the meaning.

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

Here comes the interesting part. I knew that our task of creating portfolio + store website is not standard, so we might face some customization problems.

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:

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:

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:

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.

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

For selling framed posters we would need a company who can print, frame, pack and ship orders to clients worldwide. We’ve chosen Printful and it was super easy to integrate in our store (check Shopify App Store if you are still in doubt about what platform to choose and need to find more about potential opportunities for your store. There are many apps that will save you a ton of time and help to boost your business).

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

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.

Few polishing things

We have connected PayPal with a couple of clicks and now ready to accept payments.

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

We were extremely happy to reach all our goals, and you remember that we aimed to create mobile friendly website, right? So, here is how it looks like on mobile device.

Home Page
Documentary
Posters

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

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 😊