Awesome e commerce-shopify

Awesome eCommerce with

What is ?

• Shopify is an ecommerce platform for online and brick and mortar commerce

• Powers over 175k online stores• Helped customers sell over $7b worth of

products• One of the most widely used eCommerce

platforms. • Recently released an IPO (stock ticker: SHOP)

Who Uses ?

Competitors

What’s It Made Of?Liquid

Liquid is a Ruby based template language created and used by Shopify.

Setting Up A Store

How easy is it?

Setting Up A Store

Step 1: Register on shopify.com (email, pw, store name)Step 2: Choose the type of storeStep 3: Enter address info Step 4: General biz infoStep 5: SUCCESS!

What’s Under the Hood?

Pricing Plans

Features

Buy Button Buyable PinsFacebook’sBuy Button

Development Workflow & Theme Customization Overview

The Architecture– Homepage– Category/Collections page– Product page– Blog – Default page– Contact page– Cart page

Development Workflow & Theme Customization Overview

Setup a Shopify Partner Account http://www.shopify.com/partners

Development Workflow & Theme Customization Overview

Create a development store

Development Workflow & Theme Customization Overview

Pick a starter themehttp://shopify.github.io/Timber/

Development Workflow & Theme Customization Overview

Install the theme on your development store

Development Workflow & Theme Customization Overview

Noteables

• If you’re just updating a theme’s settings and editing templates you do not need to setup a development store.

• If you need to manipulate site structure, create/edit link lists, create/edit collections or anything outside of the theme files, you need to create a development store

Development Workflow & Theme Customization Overview

Editing just the theme files

Development Workflow & Theme Customization Overview

Folder & File Structure• Layout Folder (Main theme file)

• theme.liquid (header, navigation and footer)• Template Folder (Main template files)

• index.liquid (homepage)• product.liquid (product page)• blog.liquid (blog page)• page.liquid (default page)• timber.scss.liquid (scss file)

• Snippets Folder (pieces of code you want referenced in other templates)

• Assets Folder (images, stylesheets, javascript)• Config Folder (where you edit admin theme

settings and default preferences)• Locales Folder (translated content for the theme)

The Pros & Cons

Cons• Costs • Customization can be a little hacky• 2nd level collections landing pages

aren't standard• checkout page is not customizable and

on a Shopify URL• Page specific customization requires app• Blog (not as robust as Wordpress)

Pros• All-in-one retail solution• Easy setup• User friendly admin• Everything you need out-of-the-box• Large app marketplace• Affordable• Hosted solution

• Security• Open API• Mobile SDK• Great customer support• POS - inventory syncronization• Omni-channel retailing • Extensive documentation and resources

ReferencesPricing Comparison Charthttp://www.websitetooltester.com/en/reviews/shopify/pricing/http://www.shopify.com/pricing

Partner Portalhttp://www.shopify.com/partners

Shopify Documentationhttps://docs.shopify.com/

Starter Themeshttps://github.com/Shopify/skeleton-themehttp://shopify.github.io/Timber/

/michaelhtrang

@itsmetrang

[email protected]