見出し画像

初心者に向けたLiquidについて①

初めまして!
駆け出しコーダーとして日々業務に励んでいるR.Aです!

最近はShopifyを構築するに当たってLiquid学習をするひとが増えてきました。
私自身もShopify構築の仕事依頼が来ておりそのLiquid学習者の一人です!
これを機会に初心者目線でLiquidとは何かということを書いていきたいと思います!

Shopifyとは?? Liquidとは??

まず、そもそもShopifyとは決められたテンプレートで、商品登録や決済周りを決めるだけでオンラインショップを立ち上げることができてしまうプラットフォームです。

自分のオンラインショップを立ち上げた際に、例えば
「ロゴの位置をもう少し高くしたい!」
「footerにメニューを追加したい!」
「レスポンシブ時に購入ボタンを下に追加したい」
など上記のような静的サイトのカスタマイズをしたいとなったときは、
Webページを編集するHTML・CSS・Javascriptの言語でカスタマイズすることができます。

ただ、ECサイトのようにあらゆる条件でWebページの表示を変えたい!
というときは、動的サイトの構築が必要になってくるため、それぞれの条件を記述する必要性が出てきます。
その際、中身のテンプレをいじくる際にコード編集からLiquidを編集する必要性がでてきます。
このようにLiquidというShopify独自のテンプレート言語を使用することで、
クオリティの高いECサイトを構築することができます!

簡単!Shopifyアカウント作成の手順!

Liquidを編集するにあたって、まずは自分でShopifyのアカウント作成していきましょう。その際の手順を説明します。
非常に簡単に自分オリジナルのオンラインショップ立ち上げができます。

1. アカウントを作成しよう

スクリーンショット (13)

上記のURLから「無料体験をはじめる」を選択してアカウント作成をします。
14日間は無料でShopifyを体験できるため、クレジットカードのなどの決済の登録はせずにスムーズに登録ができます!

2. 必要な情報を入力しよう

スクリーンショット (17)

1でアカウント作成画面へ遷移しメールアドレス・パスワード・ストア名・ストアURLを入力して「ストアを開く」を選択します。
この際の注意点として、ストアURLはあとで変更ができないため気を付けて設定をしましょう!

3. アンケートに答え、お店の情報を入力しよう

スクリーンショット (18)

スクリーンショット (19)

簡単なアンケートフォームに答えた後に、
名前・住所情報・電話番号を入力して「ストアに入る」を選択しましょう!

4. ストア作成完了

スクリーンショット (21)

上記の手順を踏んだ後に、ストア作成中のロード画面が出てきます。
ロード画面終了後、上記のような画面に映るのでこれでオンラインショップの立ち上げ完了です!!

立ち上げ完了したので今回は以上で、また次回にLiquidについてもう少し深く見ていきたいと思います!

ネットショップ出店パック「ECツクール」を新たに展開中! Shopifyサイトの制作なら500,000円(税込)から。まずはお気軽にご相談ください。

カンナートはWEB制作、事業開発、ECサイト運営を主にWEBに関わる要望にワンストップで対応している会社です。ネットショップ制作に関わるノウハウを提供する場としてnoteを公開しています。https://kannart.co.jp/