何ですか Shopify 液体？基本の簡単な要約

オーバー１億１０００万人 e コマース Web サイトは、 Shopify プラットホーム。 2006 年の開始以来、ウェブを揺るがしたオールインワンの e コマースプラットフォームです。マーチャントは、簡単な支払い設定から組み込みのマーケティングツールまで、さまざまな理由でオンラインストアをホストするためにこのプラットフォームを選択します。

しかし、重要な側面の XNUMX つは、 Shopify 何千ものテーマを備えた直感的なサイトビルダーであり、 Shopify から選択するアプリの統合。

ただし、ノーコードビルダーでは魅力的でユニークな Web サイトを作成できますが、いくつかの制限があります。たとえば、オンラインストアの構築を開始するときは、コンテンツの配置と制御レベルを定義するテーマを選択する必要があります。空のテーマ、つまりコンテンツのないテーマを選択した場合でも、コンテンツの編成方法を事前に定義する基礎となるコードアーキテクチャが存在します。

しかし、良いニュースがあります。自分で作成したい場合 Shopify あなたのサイトや他の誰かのテンプレート、 Shopify 液体。

興味がある？質問に答えようとする私に参加してください。 Shopify 液体？飛び込みましょう！

何ですか Shopify 液体？

興味深いことに、 Shopify 液体はそれ以来存在しています Shopifyの始まり。いつ Shopifyの作成者は最初にプラットフォームを設計し、すべてのテンプレート言語として機能するオープンソースプロジェクトを構築しました。 Shopify ウェブサイトテンプレート。

初心者向けに説明すると、「オープンソースプログラミング言語」とは、ソフトウェアのソースコードを指し、誰でも自由に利用でき、目的を問わずコードを使用、変更、配布することができます。

Rubyを使用して作成された、 Shopify 液体基本的にはプレースホルダーとして機能し、定義済みの形式でデータを挿入できます (詳細は後述)。

それで、これはどのように機能しますか？

これを理解するには、まず、Web サイトは一般的に静的または動的であることを知っておく必要があります。静的ストアは、HTML などで記述されているとおりにコンテンツを正確に表示するようにハードコードされています。対照的に、動的 Web サイトは、ユーザーの操作方法に応じて異なるコンテンツを表示できます。

ここで、静的な Web サイトがあるとします。サイトの基本的なスケルトンは事前に設定されていますが、動的コンテンツをレンダリングしたいと考えています。書き込みはこちら Shopify HTML コードへのリキッドは便利です。これは、動的コンテンツのプレースホルダーとして役立ちます。

Shopify Liquid は、店舗と店舗の間の仲介者として機能します。 Shopifyのサーバーで、Liquid がデータをプルできるようにします Shopifyのサーバーに転送し、あなたのストアに配信します。 Liquid は、主に XNUMX 種類のデータをリクエストできます。

オブジェクト
タグ
フィルタ

以下では、各データ型を順番に調べます。

液体オブジェクト

オブジェクトは、関数またはコンテンツのライブラリに似ています。各オブジェクト内には、さまざまなプロパティがあります。

オブジェクトの概念に慣れていない場合は、以下に簡単な概要を示します。

オブジェクトは、プログラミングの基本的な概念です。オブジェクトは、次の XNUMX つのコンポーネントで構成されます。

オブジェクトの状態を定義するプロパティ
オブジェクトの振る舞いを定義する関数

これがどのように機能するかをよりよく説明するために、コーディングに関連しない例を使用します。たとえば、車です。ここで、対象物である自動車は、「加速する」、「曲がる」、「ブレーキをかける」などの機能を持つことができます。対照的に、プロパティは車の「窓」、「ドア」などです。

簡単に言えば、オブジェクトは重要ですコーディングの概念複雑なシステムをより管理しやすいチャンクに編成するのに役立つからです。

たとえば、カスタムを作成しているとしましょう Shopify テーマを表示したい ブログのタイトル テンプレートにLiquidを使用して、その情報を取得できます。 Shopifyのサーバーに移動し、ページのどこかに表示します。この例では、これを実現するために使用する Liquid コードの一部です。

{{Blog.title}}

これを分解してみましょう：

ここ、 'blog' はオブジェクトです。
この中で欲しいプロパティ ライブラリ ' でマークされていますタイトル。 '
この 「。」 これら XNUMX ビットのデータがどのように関連しているかを Liquid に伝えます。
二重括弧は、{{content/output you want}} を定義する Liquid 構文です。 Shopify サーバー。

液体タグ

使用時 Shopify 液体、タグは、からリクエストするコンテンツにロジックを追加します Shopify コンテンツをページに表示するタイミングを定義するのに役立ちます。たとえば、お祝いのブログ投稿に特定のグラフィックを表示したいとしましょう。つまり、特定の条件が満たされた場合にのみこのグラフィックが表示されるようにします。

これは次のようになります。

{% if blog.title == 'お祝い' %}

**画像 HTML**

{% % の場合は終了}

これは複雑に思えるかもしれませんが、分解すると非常に簡単に理解できます。

タグは、このようなオブジェクトとは少し異なる構文を使用します {%…%}。
最初のタグ {% if blog.title == 'お祝い' %} サーバーからコンテンツを要求する前に満たす必要がある条件を Liquid に指示します。
要求した条件は、 「if」ステートメント. コーディングに精通している場合は、'if' ステートメントが XNUMX つ以上のデータを相互に比較することで機能することを知っているでしょう。それらが一致すると、コードの次の行に進みます。ここ、 if blog.title == 'お祝い' ブログのタイトルに「お祝い」という単語が含まれているかどうかを Liquid に確認してもらいます。そうであれば、コードの次の行に進みます。そうでない場合、Liquid はコンテンツを返しません。
この例では、ブログのタイトルに「お祝い」という単語が含まれている場合、Liquid は画像の HTML を取得して表示します。
これが完了すると、次の行に移動します {% % の場合は終了}, プログラムを終了します。

これは、タグでできることのほんの一例です。 Shopify Liquid には次のタグがあります。

管理コードが実行されるとき
繰り返す/繰り返し (繰り返し) コードのブロック
ディスプレイ 特定の HTML マークアップ
新しい変数を作成する.

液体フィルター

フィルターは、オブジェクトの出力を変更または修正するコードの断片です。たとえば、Web サイトの要素の色、フォント、サイズ、または外観を変更できます。

ただし、オブジェクトの表示側面を変更するだけでなく、オブジェクトに対して機能を実行できます。たとえば、ブログのタイトルを大文字で表示したい場合、フィルタを使用すると、すべてのブログのタイトルを手動で変更することなく、これを実現できます。

{{ blog.title | uppercase }}

フィルタの構文は次のとおりです。 {{…}}.
ここで、探しているオブジェクトプロパティは 'ブログのタイトル'。
適用しているフィルターは 大文字.
この '|' コードの入力と出力を分離します。

これで、ユーザーがブログのタイトルを見ると、大文字で表示されます。

のメリット Shopify 液体

あなたがサイトデザイナーまたは開発者であるとします。その場合、最も重要な利点の XNUMX つは、 Shopify Liquidの最大のメリットは、ウェブサイトを作成または変更するためにストアデータ（ストアに関する情報）を必要としないことです。これは、ユーザーが最初に Shopify ストアでは、すべての情報が Shopify つまり、Liquid を使用して必要なデータを簡単に取得できます。

ただし、あなたが Web 開発者ではなく、ストアを整えようとしている単なるストアオーナーである場合は、次のような利点もあります。

習得と使用が簡単： Liquid の構文はシンプルで理解しやすいため、開発者にも非開発者にもアクセスしやすくなっています。
動的コンテンツ: Liquid は動的なコンテンツ作成を可能にします
カスタマイズ可能： Liquid を使用すると、カスタムテンプレートとテーマを作成して、e コマースストアのルックアンドフィールを完全に制御できます。
改良された性能： リキッドテンプレートはコンパイルされてキャッシュされ、改善されます。ウェブサイトのパフォーマンスと速度他のテンプレートエンジンと比較して。
大規模なコミュニティ： Shopify には大規模なユーザーコミュニティがあり、豊富な知識とサポートへのアクセスを提供し、一般的な Liquid 関連の問題の解決策をより簡単に見つけることができます。

要件

では、何を使い始める必要がありますか Shopify 液体？

広告ⓘ

あなたがすでに Shopify 店舗, Shopify リキッドは無料でご利用いただけます。以下で、Liquid を見つける方法について説明します。ただし、今のところ知っておく必要があるのは、 Shopify は Liquid で構築されているため、サイトを作成したらすぐにこのコードを手動で編集することができます。

ただし、 Shopify ストアで、Liquid をいじり始めるには XNUMX つ作成する必要があります。

まず、 Shopify とプランを選択. 詳細を入力し、アカウントを作成します。
あなたから Shopify 管理者、テーマをクリックします。 Shopify デフォルトのテーマを自動的に提供します。これをそのままにしておくか、別のテーマを選択して開始することができます。
Shopify には、ストアを完成させるためのチェックリストがあります。商品ページの追加、ストアフロントのデザインなど、すべての基本を行いたいと思うでしょう。

オンラインストアの基本的な骨組みができたので、このデータを Shopify サーバーに移動し、Liquid を使用してカスタマイズします (これについては以下で詳しく説明します)。

Liquid の使用を開始するのにコーディングの経験は必要ありませんが、基本的なコーディングの原則に精通していると、旅がより簡単になります。しかし、ほとんどの場合、広範なセルフヘルプドキュメントとチュートリアルは、 Shopify 開発者ポータル。ここでは、専用のセクション全体を見つけることができます液体の基本.

開始する前に、これらのガイドに目を通しておくことをお勧めします。 Liquid は強力なカスタマイズツールですが、何をしているのかわからないと、サイトが壊れる可能性もあります。

はじめに Shopify 液体

それでは、これまでに学んだことを使用して、どのように編集できるか見てみましょう。 Shopify Liquidを使用したテーマ。

Liquid にアクセスするには、次の手順に従います。

テーマを複製します。 大きなトラブルを避けるために、始める前にテーマのコピーを作成しておくのが賢明です。そうすれば、間違いを犯しても元のテーマは Shopify テーマはそのままです。これを行うには、右側のテーマセクションに移動します。 Shopify ダッシュボード。編集するテーマを選択し、アクションをクリックしてドロップダウンメニューを表示します。次に、複製を選択します。
複製の名前を変更します。 テーマを複製すると、テーマのリストに表示されます。オリジナルと複製を混同しないように、コピーの名前を変更できます。アクションボタンをもう一度クリックして、ドロップダウンメニューの [名前の変更] をクリックします。
コードエディターに入る: ここで、複製に対するアクションを再度選択し、コードの編集を選択します。テーマ内のコードの完全なリストが表示されます。右側にリストされているフォルダを見てください。レイアウト、テンプレート、セクションなど、テーマのさまざまな側面を含む一連のフォルダーが表示されるはずです。テンプレートフォルダーを開きます。
Liquid でのコーディング: テンプレートフォルダー内に、ファイルタイプが .liquid のファイルのリストが表示されます。テンプレートフォルダーのプラスボタンを選択して、新しい Liquid ファイルテンプレートを作成することもできます。作成するテンプレート (ページ、セクション、ブログなど) と、ファイルの名前を尋ねられます。ファイルを編集するには、テンプレートファイルをダブルクリックすると、右側のコードエディターで開きます。

Liquidファイルの中にはHTMLスクリプトがあります。これがウェブサイトの骨組みです。このHTML内でLiquid言語を使用して、ウェブサイトから情報を取得できます。 Shopify サーバ。正しい Liquid 構文、つまりブラケットを使用している限り、それに応じてコンテンツがレンダリングされます。

説明するために、簡単な例を見てみましょう。

を使用して画像のサイズを変更する Shopify 液体

画像はほとんどの重要な側面です Shopify 店。しかし、複数の画像を使用している場合、すべての画像を適切にサイズ設定してきれいに表示するのは大変です。これを修正するために、 img_url フィルター。他のフィルターと同様に、img_url は、 Shopify サーバー。このフィルターを使用して、画像のサイズ、スケール、形式、切り抜きを変更できます。

フィルターは既存の画像を一時的に変更するだけなので、これは優れた手法です。テンプレートをレンダリングするたびに新しい画像を作成するわけではないため、サイトの読み込み時間が遅くなることはありません。

では、画像のサイズを変更するにはどうすればよいでしょうか。

まず、変更を適用する場所を決定する必要があります。あなたは適用することができます img_url フィルター以下を含む、画像プロパティを持つ任意のオブジェクトに:

製品概要
製品バリエーション
ラインアイテム
コレクション
記事一覧

編集したい画像を決めたら、どのプロパティをターゲットにするかを決める必要があります。どのプロパティに画像属性があるかを調べるには、 Shopifyのオブジェクトのリストおよびそれらのプロパティ。

この例では、ブログ記事の画像をターゲットにします。

基本的なコードは次のとおりです。

{{ blog.articles.image | img_url: ‘100×100' }}

壊す：

ブログ は探しているオブジェクトであり、プロパティが必要です物品、これにはブログのすべての記事が含まれているためです。具体的には、ブログ記事の画像を変更したいので、画像記事内のプロパティ。
次に、フィルターを適用します img_url。 これをそのままにしておくと、 Shopify サーバ。ただし、追加のパラメーターも指定します: 画像サイズ '100×100' （ご了承ください Shopify ピクセルを使用してサイズ範囲を決定します)。
最後に、フィルターに使用される Liquid 二重括弧構文を使用してコードをラップします。

これで完了です。これにより、すべてのブログ画像の出力が返され、サイズが 100 x 100 ピクセルになります。

ヒントとポイント

この記事を読んで、次の質問に対する答えが得られたことを願っています。 Shopify 液体？

あなたが見ることができるように、 Shopify 液体は、デザインや編集の際にさまざまな機能を提供できる汎用性の高いツールです。 Shopify レンプレート。多少の学習曲線はありますが、一度慣れると、特に Javascript のような他のより複雑なコーディング言語と比較して、かなり簡単に使用できます。

使用することに興味がある場合 Shopify Liquid を最大限に活用するには、次のポイントに従うことをお勧めします。

Liquid をしっかりと理解することから始めます。 Liquid を深く理解すると、より複雑なカスタムテーマを作成できるようになります。この基盤により、新しいユーザーは、 Shopify ユニークで魅力的なオンラインストアを作成します。
テーマを徹底的にテストします。 カスタムテーマがさまざまなブラウザーやデバイスで期待どおりに機能することを確認するには、テストが不可欠です。互換性の問題を早期に発見することで、顧客の潜在的な不満を回避できます。
利用可能なツールとリソースを使用します。 Shopify には、テーマ開発者を支援する豊富なリソースがありますので、それらを使用してください! これを利用すると、開発プロセスをより迅速かつ簡単にすることができます。

これらすべての点がカバーされているので、私はそれを言うのは安全だと思います Shopify Liquid は、より魅力的でダイナミックなコンテンツを更新または作成するための楽しく効果的な方法です。 Shopify 保管してください。

私からは以上です。あなたに。とのあなたの経験について教えてください Shopify 以下のコメントで液体を！