マガジン
記事一覧
Shopifyテーマ Chapter13 Liquidで便利なCSS hooks
Javascript hooks やWordpress のように、ShopifyにもCSSクラスをbody タグに動的に加えることができます。
bodyのクラスに現在のレンダリング中のテンプレートを加える<body class="{{ template | handlize }}">
以前のチャプターでLiquidコードの{{ template }}をつかって現在使用中のテンプレート名を出力
Shopifyテーマ Chapter 11 画像の出力の仕方いろいろ
このチャプターではテーマ上でどのように画像を表示するかをみていきます。
Shopifyでは画像をアップロードすると自動的にShopfiyのCDN(コンテンツデリバリーネットワーク)上に画像が保管されます。
そして下記のようなオブジェクトが画像CDNのリンクを含んでいます。
article
collection
image
line_item
product
variant
そしてL
Shopifyテーマ Chapter 10 all_productsの使い方
このチャプターではコレクションをループさせたりせず、もしくは商品ページ上でないところで、特定の商品情報にアクセスする方法を紹介します。
商品に直にアクセスするためにはall_productsのオブジェクトを使用します。例えば下記のような例です。
{{ all_products["coffee-cup"].title }}
この記述方法はとてもシンプルでall_productsに商品のハンドル
Shopifyテーマ Chapter9 セクションとブロック
Shopityテーマにおける｢セクション｣はページを構成するカスタマイズ可能な要素です。セクションはスニペットと似ていますが、セクションはShopifyのオンラインストアエディタでユーザーがコード編集を行うことなくカスタマイズを行うことができる仕組みになっています。
*オンラインストアエディタと英語では呼ばれていますが、日本語ではテーマエディタと呼ばれてるようです。
下記はセクションの特徴の概
Shopifyテーマ Chapter 8 スニペットの使い方
以前のチャプターでも紹介しましたが、Shopifyでスニペットを使うにあたって下記の事を覚えておくとわかりやすいです。
スニペットは再利用するコードの塊をまとめたファイル。
スニペットはスニペットフォルダに格納します。
スニペットファイルには.liquidの拡張子をつけます。
スニペットファイルはストア全体を通して複数回使うコードに使われます。
テンプレート内で仕様するにはLiquidコ
Shopify テーマ Chapter7 リンクリスト
リンクリストはShopifyの特定のページにアクセスするためのリンクのリストです。
リンクはページ・コレクション・商品などのページへアクセスさせることができます。
リンクリストは階層構造にすることができ、Shopifyの管理画面で設定することができます。
メニューの作成Shopifyの管理画面上の｢オンラインストア>メニュー｣を選択するとメニューとなるリンクリストを作成することができます。
デ
Shopifyテーマ Chapter6 オルタネイトレイアウト
チャプター5ではオルタネイトテンプレートの作り方をみました。今回はLiquidのレイアウトファイルをみてみます。
デフォルトのレイアウトファイル theme.liquidShopifyのテーマのデフォルトのレイアウトファイルはtheme.liquidというファイルでレイアウトのフォルダーの中に入っています。
このtheme.liquidレイアウトファイルはShopifyテーマの｢マスター｣テン
Shopiyテーマ Chapter 5 オルタネイトテンプレート
Shopify テーマのファイル構成を見た時、最初は collection や product ページはそれぞれ一つだけのファイルに対応させているように見えるからもしれません。
ですが、Shopify では、複数のバリエーションファイル(オルタネイトテンプレート)を作り、別のファイル指定してレンダリングさせることが可能です。
例えば T シャツの商品群には A の liquid ファイルを、ズボ
Shopifyテーマ Chapter4 商品ページ
これまでのチャプターではShopifyのテンプレートファイルがどのようなURLでレンダリングされるかを見てきました。今回はproduct.liquidファイルについてみていきます。
商品ページのレンダリングサイト訪問者が商品ページをみたときにはproduct.liquidのliquidコードファイルがデフォルトでレンダリングされます。また別バージョンの商品ページ用のファイルを作り、商品によって別
ShopifyテーマChapter3 LiquidファイルとURLの連携
Shopify上で、Liquidファイルはそのフォルダ構成やファイル名によって、どのファイルがどのページやURLで表示されるかがあらかじめ決められています。
まずどのフォルダがどういった場合に使われるかを知る。
そして、その中のどのファイルがどのページで表示されるかを見ていきましょう。
URLテンプレートマッピングShopifyは独自のルーティング(URLとの紐付け)構造が設定されていて、ユーザ
Shopifyテーマ Chapter1 Liquidコードの基本
Shopify のLiquid イントロダクションLiquid とはShopifyのテーマに使われるプログラミング言語の一つです。正確にはテンプレート言語というカテゴリになります。Shopifyストアのデータとストアのデザイン構成(HTML・CSS)を橋渡しするために使われます。これにより、Shopify管理画面で登録した商品や画像のデータをECストア上に表示することができます。
チャプター1
Noteはじめてみました。
前々から興味はあったけど、なかなか手をつけずにいたnoteはじめてみました。
自己紹介EC構築やビジネスサポートのコンサルティングやっています。米国MBAホルダー。Shopifyパートナー。あと海外との連絡やりとり支援や翻訳的なことも。 ウェブサイト構築なども。
noteで書いてこうかなと思っていること①最近ハマっているMacでの作業効率化
Macを使い始めて長いけど、まだまだ使いこなせてな