ECサイト関連

【2021_07_21 メモ】Sections Everywhereと新テーマ「Dawn」の特徴

Shopifyの基礎シリーズ

パートナープログラムの基礎シリーズ

ストア運営の基礎シリーズ

開発の基礎シリーズ

デザインとテーマの基礎シリーズ

アプリ開発の基礎シリーズ

【最高】Shopifyストア構築のロードマップ

土屋鞄のサイト、使用テーマやプラグインが分かる

Shopify Unite 2021 | Coding commerce. Together.

テーマコード編集・カスタマイズ

<aside> ⚠️ テーマをカスタマイズする場合は、必ず事前にバックアップを取ろう！！

- バックアップの取り方 - 管理画面 ＞ テーマをカスタマイズ ＞ アクション ＞「複製する」をクリック

</aside>

▼チートシート

• Shopifyチートシート

• ファイルディレクトリ ※ sections はテーマエディタで並べ替えや設定が可能 ※ snippets はテーマエディタで編集できない

  

▼テーマ編集の流れがわかる参考記事

• HTML・CSSを使ってテーマを独自にカスタマイズする

▼参考記事

• 【はにわまんさん】Liquid言語の基本構文のまとめ
• 【Shopify】独自言語「liquid」の基本的な書き方
• Shopify Liquid テンプレート言語の基本を理解する
• フィルターの種類も記載されている記事
• 【参考】Liquidで変数、配列、オブジェクトを作ったり、if文を作りたい時に便利な例文集

▼公式マニュアル

• テーマコードの編集
• テーマの複製

【Liqiudの基本】

• Liquidは主にHTMLで使用する
• WordPressで使うPHPのような言語
• LIquidには2種類＋αの使い方がある
  • {{ ◯◯ }}：サイト上に出力される。◯◯にはShopifyであらかじめ定義されている「オブジェクト」、「オブジェクトのプロパティ」、「文字列」のいずれかを記述する。Shopifyの公式ドキュメントではObjectsと呼ばれる
  • {% ◯◯ %}：ロジック（if文など）として使用される。サイト上には出力されない。Shopifyの公式ドキュメントではTagsと呼ばれる
  • {{ 〇〇 | フィルター }}：パイプ（ | ）を入れることで、出力結果に変更を加えることができる。