Shopifyでオリジナルテーマ制作｜WEB-YoNet｜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でオリジナルテーマ制作

記事一覧

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

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

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