Shopify is Great, but these are the things you need to notice

I have been an active Shopify expert in Hong Kong since 2014. No doubt seeing Shopify become a strong platform and I regret not buying their stock in-time…

I believe not only Shopify technical talents and their proactive technology advance bring today Shopify, but also the strong developer community, for which we call Shopify Partners / Shopify Experts contributed in their success. Various apps / theme / tailor-made development services around the world help merchants work out the things they look forward, or providing advices that help giving birth to different success merchant stories.

Yet, even thought you also also like Shopify as of what I do, I have to point out the things below so you could treat that as a reference when you run your store.

Magic number: 1000 and 99 and 16

1000 is a magic number in Shopify, where:

  • A collection can hold at most 1000 products
    • If you have a collection with more than 1000 products, you need to refine your collection to have fewer products. It is not a big deal for Small-Medium business, but for large enterprise / marketplace, it is an obstacle.
  • A collection can holds at most 1000 tags
    • Products in Shopify can has tags. For a given collection, it has an array variable for theme developer to make use of it for function like filtering. Yet, such array can hold at most 1000 tags.

99 is a magic number in Shopify for Product variant

For a given product, you can setup some options, such as size / color / pattern etc. The number of combination of the options form the list of variants. Say, there are size S, M, L, and color with red and yellow. There will be 6 variants. And you cannot have more than 99 variants.

Again, this is fine for most of the scenario unless you have business like color lens, which ash different diopters (0.5,1,1.5,2…8.5, 9…etc) and colors, it likely results in huge variants list.

16 is the latest magic number newly in Shopify Store 2.0,

With Shopify Store 2.0, theme can has sections and block beyond homepage. Many theme developer build theme allowing merchant to add sections / blocks for configurable content like FAQ as the example, merchant can create a FAQ section and add questions. With such new magic 16, you can at most add 16 blocks for the FAQ questions.

Discount code oversell

As a merchant sometime you may run Flash Sale with limited discount for a given period of time as well as number of usage. Shopify allows you setup discount with period and no. of usage and some merchant shall use it as a way to control how many discount take place. Yet, I have merchant who run the Flash Sale for PS5 and some attractive electronic applicants using discount code with limited usage. Yet, the campaign is very success with probably near couple hundred people fight for the competition and turn out, oversell happens. The explanation from Shopify Plus support sharing it is possible to happen: for an order creation, it is allocated to some thread process. When there are many order fall to different process for the transaction/order creation, different threads have chance to get a non-updated copies of the discount code usage, leading the oversell. It sounds sensible to me, yet, it is a problem for merchants and what merchant can only do could be reducing the discount availability such as reducing the quota.

Discount code quote being occupied by abandoned checkout order (for checkout with 3rd payment service provider), no way to release

It is related to previous item. My merchant use 3rd payment service provider, meaning the customer will redirect from Shopify checkout to the payment gateway for the payment. For a hot campaign, there could be many customers attempt to checkout but didn’t complete their checkout, while those discount code would be classified as used. Imagine there are other customer also attempt to use the discount and it being feedback as discount code has no more quota.

From merchant perspective, they see the used quota is not fully redeemed from counting the transaction records, say, there is 5 quota for the discount code, the merchant sees the discount being used by 5 times already, while he only see 2 code applied to completed transaction. They try to find which orders are using the code but they fail. It is because the discount code detail only show the number of count being used but has no information of which 5 orders applied the code. Merchant can only find the code in Abandoned Checkout section manually. Yet, since it is abandoned checkout, there is no way to cancel such checkout for releasing the discount code… The lack of control of the discount code usage upset merchants.

No collection hierarchy

Merchants with large product size will find it hard for merchandising their product collection in Shopify. Shopify goes for flat collection principle. You can at most try combine with tagging / vendor attribute to form sub-collection. If your business work like marketplace, with collections have multiple sub-level. Shopify can only achieve this visually, but it does not offer the collection hierarchy. Say, if you want to have collection hierarchy like Women > Clothing > Dress, it is not having such logic in Shopify upon collection setup. Some developer leverage Navigation menu to accomplish such hierarchy-concept, and to have Women collection created with rules cover Clothing and Dress collection, as well as Clothing with rules that cover Dress Collection.

Too simple Member System

As a merchant, they wish to have member system which allow them to customer information including phone / preference. In Shopify….. no phone field, no additional profile attributes. You could accomplish similar feature by means of using customer tagging or otherwise to use App in aid of it, this leads to problem like data sharing with 3rd party, or difficulty on account spam prevention.

Not only that, for customer, when they login to their account, they cannot change email / reset password. The only way for reset password is to proceed Forget Password…

As a merchant, lacking of Date of Birth or phone number make limitation in marketing strategy or premium customer service.

The list is not stop by here. I shall further update the post when I can articulate what I encountered in the future. Wish the shared information enrich your understanding toward Shopify. You can also consider to checkout my consultant service so I can help you resolving the questions that you encountered.

You can sign up Shopify with this link, or you can ask me for help setup Shopify store with me has a collaborator access to guide you through the onboarding or store setup.

Bespoke by Shahina

Some days ago, I helped a merchant onboard Shopify from Square-space.

She wanna have a much easier way to manage her product, and eventually help her tailor made various widget to facilitate adding different type of her products to cart.

Bespoke by Shahina is a self-own brand business providing diamond & gemstone concierge service, making precious, beautiful jewellery with diamond and gemstone. There are different type of jewelleries: band / ring / ear-ring / necklace and various accessories. Some items are new to me, like:

Signet:
https://bespokebyshahina.com/products/signature-diamond-signet-ring
You can mark your name to the ring. Good for couple.

Custom Silver Cufflinks:
https://bespokebyshahina.com/products/custom-silver-cufflinks

Have your baby footprint print on a cufflink, good for parents.

She has many products offer customization, you can select how many diamond / gemstone, or add chain extender, or even add letters (which could be for your name initial)

See if this is a good gift idea source for upcoming festival or your memorial days.

Bespoke By Shahina: https://bespokebyshahina.com/

Win City Coffee

Welcome Win City Coffee launches with Shopify.

https://wincitycoffee.com/

WinCityCoffee is a Hong Kong based speciality coffee roaster since 2016. They source coffee beans over the world, having real visit to know the manufacture and their products to ensure the production is responsible and sustainable, and offers 3 collections to their customers.

Products – Signature Blends

Eric and his partner, Ben, approaches me and look for having the site run on Shopify because of the Shopify benefits that they heard.

I evaluate their business, where their website used to be hosted in Wix.com. I explained to them how the business work different between Wix and Shopify. The order fulfilment journey, the way to manage inventory, product setup, theme management which are all new to them, but they have picking them up. The store setup complete in a month time, despite there are some imperfect migration regarding the domain transfer, which add the complexity of the migration.

Now, with the fresh new platform, with proper site performance facilitates, I wish that help Eric and Ben run their business and able to have their roasted coffee beans deliver to people who love coffee.

Give it a try if you are a coffee lover!

Facebook: https://www.facebook.com/WinCityCoffee/
IG: https://www.instagram.com/wincitycoffee/

If you are interested in Shopify, follow this link (with my referral) to learn more about Shopify: https://www.shopify.com/?ref=gordon-chan-net

Naturali Japan – 美曈 Shopify Store

naturali-japan-shopify-site-responsive-displays

Naturali Japan 是近來參與的 Shopify Store 開發。當中包括的挑戰:

  1. 與日本人合作
  2. 由開發至發佈為期一個月
  3. 讓網站能以 3 款語言和 3 種貨幣運作

當中最具挑戰性是讓網站能以 3 款語言運作。Shopify 基本功能支援翻譯功能,但只能於一網站上使用其中一款語言。要讓網站能支援多項語言,則需要使用其他 Shopify App 。客戶選用了 Langify ,所以我主要的工作是讓站台與 Langify 整合。

在整合過程中,遇上 Langify 與其他 App 的支援問題,比如客戶也選用了 Product Customizer 來處理商品的屬性。縱使 Product Customizer 的支援網站提及曾得到 Product Customizer 的回應說能相互兼容,但在與兩方一連串的電郵查詢後,得出的回應是他們基本不能互相兼容。Product Customizer 雖表示他們正部處更新版並可望令其功能與其他 App 更相容,只是未有公開期限。雖然這樣,作為 Shopify Expert 的價值就是利用對 Shopify 編程的熟悉來為客戶解決問題,最終還是能利用一些略為轉折的方法得出了解決方案。

此方案我也利用了 Taiga.io 作為與客人溝通問題、改良要求的 PM 工具。它容許使用者建立客戶戶口、定義 Ticket 類別、狀態。美中不足是沒有附件功能,但經已方便和客戶的基本溝通。

New Lane Crawford site

It is incredible I have chance to participate in building up the Lane Crawford official site.

The visible website is just the tip of the whole iceberg. In the last 14 months, started from a 6 people team, we build up the whole project linking up various internal systems, collaborate with our vendor and overcoming different hardship. We finally come up with a presentable website. Yet it looks simple, the site aim to serve various browsers especially IE6. Yes, as its target audience is from the mainland… Continue reading New Lane Crawford site

Angelo’s Pizza is launched!!!

With an occasion brought by my colleague, I have a chance to offer my spare skill on building website for a well-known Italian restaurant, which open a new branch of dining service: Pizza Delivery – Angelo’s Pizza.

The site is customized CMS driven, bilingual, provide web master easier way to manage the site content.

Its mobile version is coming soon.

Cross Browser Compatibility & Progressive Enhancement

隨著網路的發展,網頁所包含的不單止有文字圖案,不同種類的多媒體應用漸漸被應用於一些尖端前衛的網站上,固有的瀏覽器未必能應付這樣的需求。由Internet Explorer vs Netscape 的年代開始,瀏覽器的戰爭自此沒有停過。林林種種的瀏覽器出現,Firefox, Chrome, Safari, Opera等等,對用家來說是多了選擇,對Web Developer來說分分鐘是惡夢的開始。

假如各門路的瀏覽器能夠把任何一個網頁都一致地呈現,這是最理想的情況。但事實上各家各有自己對網頁的編譯方法,甚至運行上的不同做法,都使 Web Developer 再神勝不過。意思說,作為 Web Developer ,有責任的話,他需要讓其製作的網頁能在絕大部份的瀏覽器 / 視窗平台中順利運行,這就是所謂 Cross Browser Compatibility 。要做到這點,並不是把一切基本網頁編寫的 HTML,JavaScript 學會就是了。還得要從各個瀏覽器的特性方面著手。由標準HTML (W3C Standard HTML)學起,到逐步了解不同瀏覽器對 HTML 的演譯方法,接著學寫標準的JavaScript,並且查找某些JavaScript在不同瀏覽器中編寫文法的例外,到較後學習如何利用CSS對版面作改動,與及留意不同瀏覽器所支援的 CSS 版本,為網頁作出適當的 CSS 調整。

從前 Cross Browser Support 主要依賴人手在各個瀏覽器上作測試,而現在坊間有說多途徑去減化這些測試動作。這個網站羅列了數個測試方法:

7 Fresh and Simple Ways to Test Cross-Browser Compatibility | FreelanceFolder

詳細的不說了,重點就是作為 Web Developer ,對自己所製作的網站傑作,都應該執行 Cross Browser Compatibility 測試,好使自己的作品不會在某些執行環境中出洋相。

當然,在云云瀏覽器存在的世代,正如我說不同瀏覽器對網頁的呈現會有不同的演譯方法,然而強行要將一個網頁完全順利一式一樣的在各個瀏覽器呈現,並不是沒可能,只是不夠實制。比方說,對不同瀏覽器對網頁中的元作執位方面會有偏差,這個還不算太難應對。但對一些網站運用了許多視覺優化,如圓角表單、文字陰影、背景漸變等等,從前人們會用 Table、Div或背景圖來規劃一些組件來製作相關效果。但隨著 CSS 的廣泛應用,CSS版本進展到CSS3,利用它能夠將許多效果實現。這些進化了的效果在較舊的瀏覽器上當然未能完整呈現,但呈現出的結果因背後有 Backward Compatibility 的概念而也不算太強差人意。這個網站有提出一個例子解釋:

When Should You Use Progressive Enhancement

嗯,本文另一個字眼出現了:「Progressive Enhancement」。其大意是一個網頁的表現結果在各個瀏覽器都大致一樣,唯獨對新技術有所支援的瀏覽器中,會展示較好的呈現結果。以上網站顯示了一個表單資料的顯示情況。用較新的瀏覽器觀看網站,會得到較漂亮的版面,然而在較舊的瀏覽器中,亦不失其功能上的表現。當然,對於一些不明白上文所述的一切,又要要求 Web Developer 把網頁做到在任何網站一式一樣的老闆來說,那只有苦了該 Web Developer 去花心機時間做盡一切方法將其老闆的想法實現。