ブログ
Shopify カスタマイズ
shopify で構築したオンラインショップのカスタマイズのご依頼をお受けしました。
とても興味深いサービスでしたので簡単に紹介します。
Shopifyは個人でも簡単にオンラインショップを構築できるサービスです。
オンラインショップの骨組みが提供されているのでプログラミングの知識がなくても自分のオンラインショップが構築できること、画面、メール本文はテンプレート化されておりカスタマイズが出来ること、決済システムが備わっている等の特徴からshopifyサービスを利用したオンラインストアは世界で2万5000店以上も存在するそうです。
テーマやアプリも販売されていますので気に入ったものがあれば購入することも出来ます。
今回は触りませんでしたがshopify はPCだけでなくスマートフォンにも対応しています。
クライアントのショップオーナーはウェブ制作については素人ですがご自身の手で Inlay Stickers Jockomo のショップを構築されました。
管理画面は操作性が直観的で分かり易く、ブログや会員制ページ、商品一括登録機能や顧客との遣り取りが記録出来たりと様々な便利機能も充実しています。日本語の情報が少ないのが残念ですがとても使いやすそうな印象を受けました。
ご依頼頂いたカスタマイズの内容は「名入れ用のテキスト入力機能の実装」でした。
標準機能では商品の属性情報（例えば、色や形状）を「選択」する機能は用意されているのですが、「文字を入力する」機能が用意されていません。
名入れ対応商品に対して「名入れ文字」を入力出来るようにし、カート画面、注文履歴、注文確認メール、出荷メールにも内容を反映させるといった内容でした。
テンプレートはluquid と呼ばれるテンプレートエンジンで解釈されます。
luquid では条件分岐や繰り返しなどの構造を持ち、フィルタ機能も備えています。
画面は「画面レイアウト(Layouts)」「部分テンプレート(Templates)」「機能テンプレート(Snippets)」「HTML/CSS/画像(Assets)」で構成されています。
広範囲に渡ってカスタマイズすることが出来る仕組みになっているので機能追加や機能改変といったカスタマイズは少し難易度が高く、HTML/CSS + jQuery の知識が必要になるだろうと思います。
実現したいこと自体はそれほど難易度は高くないものの、英語の資料を読みながらの作業ということで予想していたよりも時間が掛かってしまいました。
後から振り返ってみると、資料読みとコーディングの比率が 8 : 2 位だったんじゃないかと思います。(@_@)
今回助けていただいて非常に助かりました。感謝してます。shopifyは管理画面は英語ですが、ショップ自体はたくさんの言語を表示できるので日本語のショップも構築できます。
カート画面では言語を何通りも登録できるので海外に向けてのビジネスを考えておられる方などには最適ではないでしょうか？またshopifyの特徴はオプションでshopify専用のAPPがあります。
shopifyにない機能でもAPPを入れれば色んな事ができます。Facebookにお店を連動させたりwishリストを追加できたり。
エンジニアの方はAPPを作ってアップロードすることもできます。
まだまだAPPが少ないので、人気が出ればかなり確実な収入になるのでは？と思われます。
とにかく今回はありがとうございました。また宜しくお願いします。
コメント有難うございます。
shopify のような魅力的な課題に触れるチャンスを与えて下さって有難うございます。感謝しています。
shopify はデザインもフルカスタマイズ可能！と謳っているだけあって構造上の都合によってデザインの自由度が制限されるということは少ないように思います。（内部的にはjQueryを使ってDOM要素に部分テンプレートを挿入するなど副作用のありそうなテクニックを使っている部分もありましたが。。。）
デザイン変更の場合でもjQueryを理解していないとどのテンプレートをどのように変更すれば良いのか見つけることが難しい場面があるかもしれません。
不明な点がありましたらお気軽にお声掛けください。
Shopifyの上野と申します。
この度は、Shopifyをご利用いただきありがとうございました。
今回のようなShopifyのサイトの構築依頼を受けましたら、ぜひパートナーアカウントで構築いただけると毎月20%のリベニューシェアがパートナー様にお支払いされます。
https://www.shopify.jp/partners
また、こちらの投稿より5年を経て、現在Shopifyを利用したストアは世界に50万件となりました。今年度より日本語でのShopifyの公式サイトを始動させております。https://www.shopify.jp/
合わせて、参考になれば幸いです。