新型コロナウイルスに関係する内容の可能性がある記事です。
新型コロナウイルス感染症については、必ず1次情報として 厚生労働省 首相官邸 のウェブサイトなど公的機関で発表されている発生状況やQ&A、相談窓口の情報もご確認ください。※非常時のため、すべての関連記事に本注意書きを一時的に出しています。
見出し画像

今話題のShopifyで、簡単なサンプルサイトを作ってみた!

今回は、サンプルサイト作成に伴って、テーマのカスタマイズとLiquid(Ruby形式のテンプレート言語)を使用したセクションとテンプレートの編集を実施しました。


使用技術

・Shopify
・Liquid

そもそもshopifyって何?

カナダ発で世界最大のECサイト制作プラットフォームです。現在、175カ国100万ショップ以上に導入されています!
他のECプラットフォームとは違い、サーバーの用意、パッケージの導入が不要で、shopifyでアカウントを作成すれば、管理画面でカスタマイズや設定をするだけでECサイトを作成出来ます。また、サーバやネットワークの管理といった負担から解放されます。
shopifyはサブスクリプション型のサービスで、ベーシックプランであれば月額29ドル(約3,200円)で利用出来ますが、現在は、コロナウイルス対応の一環として、90 日間無料でECサイトを立ち上げることが出来ます!

各プランごとの機能一覧については、下記URLからご欄ください。https://www.shopify.jp/pricing

作業手順

1,ストア作成(Shopifyアカウント作成)と各種設定
2,Shopfy Theme Kitの環境構築
 ・Shopify Theme Kitで出来ること
 ・macOSのインストール手順
3,APIアクセスの取得
 ・Admin API権限一覧から[読み取りおよび書き込み]及び[読み取りアクセス]を選択する項目
4,構成ファイルの作成とダウンロード
 ・その他コマンド
5,商品の追加と各設定
 ・商品を追加する設定で、今回必要な情報
6,テーマのカスタマイズ
 ・使用したセクション項目
7, Liquidを使った、セクションとテンプレートのカスタマイズ
 ・Liquidとは?
 ・作成したセクションの内容
 ・設定項目
 ・Liquidを使ったテンプレートの編集
8,SNSでシェアする画像のプレビュー


1,ストア作成(Shopifyアカウント作成)と各種設定

上記URLから、メールアドレス、パスワード、ストア名、ストアURLを入力してShopifyアカウントを登録してください。


スクリーンショット 2020-04-24 2.18.11

登録が完了すると上の管理画面に移動します。

スクリーンショット 2020-04-24 2.26.31

左ナビの最下部にある設定から、さまざまな設定ができます。
[一般設定]から、ストアのメールアドレスや住所、ストアの通貨を変更できます。また、返金ポリシー、プライバシーポリシー、利用規約、配送ポリシー、特定商取引法に基づく表記の記載は、右下の[法務関連]から編集できます。


2,Shopify Theme Kitの環境構築

参考: https://shopify.github.io/themekit/

Shopify Theme Kitはshopifyテーマの開発で使用するコマンドラインツールです。

Shopify Theme Kitで出来ること
・複数環境へのアップロードとダウンロード
・高速でテーマのアップロードとダウンロードができる

・ローカルファイルをウォッチして変更した差分をShopify環境へ自動アップロードできます。
・Windows、Linux、macOS で動かすことができる

Windowsは、以下からインストールしてください。

Linuxは、以下コマンドを実行してインストールしてください。

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python


macOSのインストール手順

インストールにHomebrewを利用しますので、インストール済んでない方は、以下コマンドを実行してください。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

次に以下のコマンドを順に実行してください。

brew tap shopify/shopify

brew install themekit

↓機能しているか確認してください↓

theme help

theme version



3,APIアクセスの取得

スクリーンショット 2020-04-24 10.11.38

APIキーを使用するには一度、Shopify管理画面に戻って左ナビの[アプリ管理]から、右下の[プライベートアプリを管理する]をクリックしてください。

次に[新しいプライベートアプリを作成する]をクリック。

スクリーンショット 2020-04-24 10.21.38

プライベートアプリ名と緊急連絡用開発者メールを入力してください。

スクリーンショット 2020-04-24 10.26.53

下にスクロールして、Admin APIの[▼ 無効になっているAdmin API権限を確認する]をクリックして一覧を表示。


Admin API権限一覧から[読み取りおよび書き込み]及び[読み取りアクセス]を選択する項目

[読み取りおよび書き込み]
・Products, variants and collections
・Script tags in your store's theme template files
・Theme templates and theme assets

[読み取りアクセス]
・Shopify payments disputes
・Shopify payments balance & payouts
・Third party fulfillment orders
・Translations graphql admin api

スクリーンショット 2020-04-24 11.12.53

下にスクロールして、[このアプリがストアフロントAPIを使用してストアフロントデータにアクセスできるようにする]にチェックする。

スクリーンショット 2020-04-24 11.14.08

チェックすると、ストアフロントAP権限のチェック項目が表示されますので、全項目にチェックをいれて[保存]をクリック。
[私は理解しています。アプリを作成します。]をクリックして、APIの資格情報が保存されます。


4,構成ファイルの作成とダウンロード

ターミナルもしくはiTermに戻って以下のコマンドを実行

//構成ファイルの作成
theme configure --password=your-api-password --store=your-store.myshopify.com --themeid=your-theme-id

・your-api-password=Admin APIのパスワード
・your-store.myshopify.com=ストアのドメイン(your-storeの箇所を置き換えてください)

スクリーンショット 2020-04-24 12.03.19

・your-theme-id=左ナビの[オンラインストア]をクリック。
次に、Debutテーマの[カスタマイズ]をクリックしてください。
ドメインから以下の、/your-theme-id/の箇所をyour-theme-idにいれてください。
https://○○.myshopify.com/admin/themes/your-theme-id/editor

実行すると、config.ymlが生成されます。ファイルには以下の内容が出力されます。

development:
 password: [your-api-password]
 theme_id: "[your-theme-id]"
 store: [your-store].myshopify.com

次に、以下のコマンドを実行。(テーマ全体をダウンロード)

theme download


その他 コマンド

ローカル環境の変更を Shopify開発店舗へ反映
theme watch

テーマのプレビューページを参照できます
theme open --env=development​




5,商品の追加と各設定

スクリーンショット 2020-04-24 12.31.12

左ナビの[商品管理]から[商品を追加する]をクリック。

スクリーンショット 2020-04-24 13.28.46

商品を追加する設定で、今回必要な情報
・タイトル
・説明
・商品タイプ
( T-shirt,Coffee-Cup,Headphone)
・販売元
・タグ( T-shirt,Coffee-Cup,Headphone)
・メディア
↓画像はshopify推奨の、無料の画像ライブラリから素材をダウンロードしてください。

・価格(今回はテスト用ですので、費用や割引前価格は省きます)

スクリーンショット 2020-04-24 13.27.18

・バリエーション
-size(Free)
-color(Red etc.)


6,テーマのカスタマイズ

スクリーンショット 2020-04-24 13.43.35

管理画面に戻って、テーマの[カスタマイズ]をクリック。

今回は、shopifyデフォルトのDebutテーマを使用して、カスタマイズしました。他にも無料or有料のテーマがたくさんあります。


スクリーンショット 2020-04-24 14.10.33

左ナビは各セクションの一覧で、真ん中がDebutテーマのホームページになります。
ホームページの上にある、[ページを選択]をクリックすると他のページ一覧が表示されます。

スクリーンショット 2020-04-24 14.15.27

補足:テーマの設定から、文字色やサイズ、フォントをカスタマイズ出来ます。また、ファビコンをこちらから追加することができます。

使用したセクション項目
・ ヘッダー
テキストオーバーレイ付き画像
 
設定項目= 画像,見出し,テキスト
(セクション名をクリックすると編集できます)
・ テキスト付き画像
 
設定項目= 画像,見出し,テキスト
(セクション名をクリックすると編集できます)
・ 画像付きテキスト列
 
設定項目= 画像,見出し,テキスト,ボタンのラベル,ボタンのリンク
(セクション名をクリックすると編集できます)
スライドショー
・ フッター


・ヘッダー

スクリーンショット 2020-04-24 13.58.27

今回作ったサンプルサイトでは、ヘッダーのタイトルにロゴを起用しました。
画像の追加は、[画像を選択する]から追加ができます。
また、ロゴの幅のカスタマイズやリンク先の設定ができます!

ロゴは以下、shopify推奨の作成ツールで生成しました。
こちらは無料でシンプルなデザインのロゴが作れますので、オススメです!


スクリーンショット 2020-04-24 14.26.53

ヘッダーメニューは管理画面の左ナビから[メニュー] < [メインメニュー]から確認できます。
ヘッダーのメニュー項目では、名とリンク先を編集できます。
また、メニューの追加と削除も簡単にできます。

・フッター
フッターメニューは管理画面の左ナビから[メニュー] < [フッターメニュー]から確認できます。
フッターのメニュー項目では、ヘッダーと同じく名とリンク先を編集できます。また、メニューの追加と削除も同様です。

・スライドショー

スクリーンショット 2020-04-24 15.04.20

スライドショーは、セクション一覧にはないので、左ナビから[ ギャラリー]の下にある、[セクションを追加]をクリック

↓画像カテゴリからスライドショーが追加できます。

スクリーンショット 2020-04-24 15.02.41


スクリーンショット 2020-04-24 15.15.28

各設定を変更・編集した項目
・スライドの高さ(小)
・スライドの自動切り替え
・スライドを変更する間隔(3s)
・画像
・見出し
・小見出し

スクリーンショット 2020-04-24 15.22.46

画像、見出し、小見出しは[CONTENT]の[画像スライド]をクリックすると編集できます。


7, Liquidを使った、セクションとテンプレートのカスタマイズ

Liquidとは?
Shopifyによって作成された、Rubyで書かれたテンプレート言語です。
MovableTypeでいうテンプレートタグのようなものです。

参考: Rubyの演算子まとめ

今回はLiquidを使って、サンプルとしてセクションを作成しました。
販売者から、既存のセクションではなく、○○○のセクションを作って欲しいという要望がきた場合、Liquidを使って用意することができます。


作成したセクションの内容

カテゴリ: 画像
セクション名: liquid サンプル セクション

スクリーンショット 2020-04-24 16.04.14

今回作成したセクションは、セクション名をクリックすると自動的に、タイトルを真ん中に配置することができます。
他の設定項目は以下になります。

設定項目
・タイトルの編集
・カスタムブロックの追加と削除
・リッチテキスト
・画像

スクリーンショット 2020-04-24 16.11.40


Liquidを使ったテンプレートの編集

スクリーンショット 2020-04-24 16.27.40

Liquidコードの編集は管理画面の左ナビから[テーマ]の[アクション]から[コードを編集する]をクリックして編集できます。

スクリーンショット 2020-04-24 16.31.44

このように管理画面からも編集できますが、私は見づらいのでvscodeで編集しています。

vscodeなどの他のエディタで編集する場合は、ターミナルもしくはiTermを開いて以下のコマンドを実行してください。

theme watch --notify=○○○○
//○○○○に、config.ymlがある該当ディレクトリをいれる

このコマンドは、ディレクトリの変更を監視してShopifyにアップロードするプロセスを開始します。変更はすべて端末に記録され、アップロードのステータスも記録されます。ctrl + Cを入力するだけでプログラムを停止できます。エディタでテンプレートの追加、削除を行ってもshopifyの方にも反映されます。

今回作成したセクションのコードは以下になります。

<div class="page-width">
 <div class="section-header text-center">
   <h2>
     {{ section.settings.title }}
   </h2>
 </div>
 <ul class="grid grid--uniform grid--view-items">
   {% for block in section.blocks %}
   <li class="grid__item grid__item--featured-collections small--one-half medium-up--one-third">
     <div class="grid-view-item product-card">
       <img src="{{ block.settings.image | img_url : 'master' }}" style="width: 350px;" />
       <p>{{ block.settings.block-text }}</p>
     </div>
    </li>
   {% endfor %}
 </ul>
</div>


{% schema %}
 {
   //一行テキスト
   "name": "テストセクション",
   "settings": [
     {
       "id": "title",
       "type": "text",
       "label": "タイトル",
       "default": "テストセクション"
     }
   ],
  //カスタムブロック
   "blocks": [
     {
       "type": "text",
       "name": "カスタムブロック",
       "settings": [
         {
           "type": "richtext",
           "id": "block-text",
           "label": "ブロックテキスト"
         },
         {
           "type": "image_picker",
           "id": "image",
           "label": "画像"
         }
       ]
     }
   ],
   //プリセット
   "presets": [
     {
       "name": "liquid サンプル セクション",
       "category": "画像"
     }
	]
 }
{% endschema %}


スクリーンショット 2020-04-23 12.00.56

補足:今回、スライドショーのコントロール箇所は、テンプレートから直接削除しました。
テーマのレイアウトをカスタマイズする時、googleの検証ツールで該当のクラス名を調べて、shopifyのエディタもしくはvscodeなどのエディタで検索をかければスタイルの調整などが可能です。


8,SNSでシェアする画像のプレビュー

スクリーンショット 2020-04-24 17.08.55

管理画面の左ナビから[各種設定]をクリック。
[SNSでシェアする画像]で画像をアップロードして、保存してください。
プレビューURLをSNSでシェアすると以下のように表示されます。


既存サイトやブログ記事に購入機能を導入する方法

既にサイトを持っているならShopify Liteという既存サイトやブログページにカートボタンを設置することで、購入機能を導入出来ます。
ただし、用意されているのはカートボタンと管理画面のみですのであらかじめ商品紹介ページを作っておく必要はあります。

既に販売したい商品があれば、Facebookを連携してショップを開設することができますので、ぜひ導入を検討してみてください。
Shopify Liteは月額9ドル(約970円)で導入出来ます!今ならコロナウイルス対応の一環で90日間無料で始められます!


まとめ

今回、初めてshopifyを触ってみましたが、管理画面はシンプルなUIでわかりやすく、エンジニアでなくても簡単にECサイトを作ることが出来ます。
また、Shopify Theme Kitを使うと、更新やダウンロード、shopifyサーバーへのアップロードも簡単で、エンジニアは作業時に導入することをオススメします!

今なら90日間無料でストアを開設できるので、ぜひ導入してみてください!

長くなりましたが、ここまで読んでいただてありがとうございました!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
7

こちらでもピックアップされています

SPREAD SYSTEMS INC. TECH BLOG
SPREAD SYSTEMS INC. TECH BLOG
  • 17本

SPREAD SYSTEMS INC. ( https://www.spreadsystems.co.jp/ )が運営するTECH情報BLOGです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。