Shopify Liquid＆開発｜WEB-YoNet｜Shopifyでオリジナルテーマ制作

Liquid-チートシート　②タグ

反復タグ翻訳反復タグは、コードのブロックを繰り返し実行するために使用されます。反復タグには6種類あります。 ① {% for %} ② {% else %} ③ {% break %} ④ {% continue %} ⑤ {% cycle %} ⑥ {% tablerow %} ※① {% for %}　② {% else %}は何度も使って理解しているので省略 ③ {% break %} 翻訳ループがbreakタグに遭遇したときにループの反復を停止させます

Liquid-チートシート　①基本

Liquidの基本のおさらい演算子　contains翻訳文字列や配列の中に部分文字列が存在するかどうかをチェックする条件の中に～を含んでいるか？含んでいたら処理して～には文字列が入る ◆例コード {% if product.title contains 'Pack' %} 　　This product’s title contains the word Pack. {% endif %} ホワイトスペースコントロール翻訳 Liquidでは、タグ構文の{{-,

Shopifyのテーマのトップページをカスタマイズしたい{{ content_for_index }}とは

templatesフォルダにあるindex.liquidに以下のコードがあります。 {{ content_for_index }} トップページは管理画面からドラッグアンドドロップでセクションを追加できるようになっています。そのため、テンプレートファイルではカスタイズできません。問題はこのコードはどこを探せばこのコードの中身を見ることができるのでしょうか。 Shopifyのフォーラムに上がっていました。これはShopifyテーマの予約オブジェクトのようなもので

＃09　ページのカスタマイズ方法

私たちについてページを作成する<h1>{{ page.title }}</h1><div>{{ page.content }}</div> {% section 'page-template' %} {% schema %}{ "name": "ページ設定", "settings": [ { "type": "select", "id": "container", "label": "レイアウト",

#08　カートページのLiquidについて

Bootstrapでコーディングをします。使用するLiquidは元々あるコードをそのまま使います。商品サムネイル画像のサイズだけ中サイズから小サイズに変更しました。完成コードは以下です。 {% if cart.item_count > 0 %} <div class="container"> <div class="row"> <p class="h2 my-5 text-center">カートの中身</p> </div>

#07　製品ページのカスタマイズ方法

product.liquid にある元々のコードを削除する商品名と商品画像を呼び出すLiquidを追加する商品名と商品画像の情報を取得して、変数に代入するコードを追加します。 {% assign current_product = product.selected_or_first_available_varian %}{% assign product_image = current_product.featured_image | default: product.

#06 ダイナミックセクションでコレクションの商品を表示する方法

このページ見ることで以下のことがわかります。・ダイナミックセクションにコレクションの商品を表示する方法・Liquidの在り方（なぜそのコードになったのか）・Liquidの流れがイメージできるセクションファイル新規作成とJSONコードの追加「sections」フォルダに新しいファイルを作成します。ファイル名「featured-collection.liquid」新規作成した「featured-collection.liquid」に以下のJSONコードを記述するこ

#05 ダイナミックセクションの作成方法

このページを読むことで以下のことが学べます。 ①ダイナミックセクションの設定方法がわかります。 ②Liquidについて詳しくなれます。・for product in～の product は変数？それともオブジェクトなのか？・collections.frontpage.products　プロパティが2つあってもいいのか？・グローバルオブジェクトについて Liquidやプログラムについて詳しい方は Liquidの解説前半・後半は飛ばしてもらって大丈夫です。 {{ con

#04 Shopifyでヘッダー（ナビゲーションバー）をデザインする

この記事を読むことでオリジナルデザインのヘッダー部分のデザインの概要を学ぶことができます。ヘッダーのナビゲーション部分は管理画面から編集ができるまず、Shopifyのヘッダーのナビゲーション部分は管理画面から編集が可能な部分です。左側のナビゲーションエリアのメニュー（赤枠①）をクリックすると「メインメニュー（赤枠②）」が表示されます。管理画面からナビゲーションのメニューにどのメニューを追加するかを設定することができます。ヘッダー部分のLiquidのコードにつ

#03 ShopifyテーマキットでBootstrap5のオンラインショップを作る方法［初期設定］

このページではBootstrapをつかったShopifyのテーマの作り方を学ぶことができます。 Shopifyのテーマの中にBootstrapのCSSとJSを追加することで、BootstrapをつかったShopifyのテーマを作成することができます。 BootstrapのダウンロードBootstrapのファイルは公式サイトからダウンロードできます。コンパイルされた CSS と JSの見出しの「ダウンロード」ボタンからファイルをダウンロード可能（Bootstrap v

#02 テーマ設定を編集できるファイル「settings_schema.json」について

「config」フォルダにある「settings_schema.json」はShopifyの管理画面などを設定するファイルです。今回はこのファイルについて深掘りしていきます。この記事を読むことでテーマ設定の仕組みとJSONを使った管理画面のカスタマイズ方法が少しだけわかります。上記の記事の続きです。まだ閲覧されていない方はご覧いただくことをおすすめします。 settings_schema.jsonにJSONを記述して管理画面の表示を見るローカル環境でShopify

#01 ローカル環境でShopifyのテーマを編集する方法 Shopifyテーマキットインストール／Windows10 【Chocolatey使用】

2021/9/28　現在　オンラインストア2.0のテーマ作成ではShopify CLIを使うようにアナウンスされていますローカル環境でテーマ編集するメリット今回はShopifyテーマキットでテーマを作る方法を試してみました。ローカル環境からShopifyのサーバーと同期できるので、テキストエディタからの修正が即座にShopifyに反映できるところがメリットです。本番アップしている環境では怖くてできませんが、テーマのデザインを開発中に利用できる方法です。 Shopi

Shopifyオンラインストア2.0とは

Shopifyオンラインストア2.0で変わったこと2021年8月から全世界にリリースされました。 ①今までトップページにしか自由に配置できなかったセクションが　他のページにも自由に配置できるようになった。 ②アプリを入れるときはテーマのファイルに直接書き替えないと　いけなかったのが、アプリ専用の拡張ポイントが追加されたので、　そこにアプリ側のコードを出力されるようになった。　テーマ側のコードを汚すことなくアプリ同士の干渉を防ぐことができる。 ③メタフィールドが管

Shopify-Liquid勉強法 Udemy

基本操作こちらの動画でShopifyでできることをざっくり理解できます。【初心者向け】shopifyで自分のお店を作ろう　1時間 Shopifyでクライアントのストアを作る人のための講座　1.5時間 Liquid開発者向け海外の中で評価が一番高かった動画です。オンラインストア2.0についても追加で動画を更新しているそうです。 Shopify Theme Development: Create Shopify Themes [2021] 0からshopifyのテー

Shopify Liquid＆開発

記事一覧

Liquid-チートシート ②タグ

Liquid-チートシート ①基本