Shopifyでオリジナルテーマ制作

本

Shopifyでオリジナルテーマを作りたい人向けのマガジン。 Liquidについて詳しくなれます。

運営しているクリエイター: WEB-YoNet｜Shopifyでオリジナルテーマ制作

#ショッピファイ

#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

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

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