{"title":"UI\/UX改善","description":"\u003ch2\u003eShopify UI\/UX改善ガイド\u003c\/h2\u003e\n\u003cp\u003eユーザビリティを向上させ、顧客満足度とコンバージョン率を同時に高めるShopifyの実践的なUI\/UX改善方法をまとめています。\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003e検索機能最適化\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- 商品・ブログ別検索による情報アクセス性向上\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eフォーム改善\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- アカウントページの住所編集画面項目順最適化\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eナビゲーション強化\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- タグ絞り込み表示とパンくずリスト設置\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003e在庫表示最適化\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- 在庫切れ商品の自動非表示による購買体験向上\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eユーザビリティ向上\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- 直感的で使いやすいインターフェース設計\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003eユーザー中心の設計思想に基づいた改善で、離脱率を下げ、購入完了率を大幅に向上させることが期待できます。\u003c\/p\u003e","products":[{"product_id":"2022-12-28","title":"Shopifyで閲覧ユーザーの利便性向上のためにメニューにサムネイルを表示する","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのメニュー、テーマによってはメガメニューで見栄え良く設定できるのですが、通常メニューでもサムネイルが表示できると閲覧ユーザーの利便性が上がるのでオススメです。メニューの要素オブジェクト（link.links）から画像URLを取得してサムネイル表示させる方法です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003eメニューに画像を表示する例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2022-12-28_1.jpg?v=1736003033\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003eメニューに設定できるものの中で、画像を表示できるのは「コレクション」「商品」「ブログ記事」\u003c\/h3\u003e\n\u003cp\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2022-12-28_2.jpg?v=1736003033\" alt=\"\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003eリンクに設定しているコレクションや商品の画像を参照するコード例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2022-12-28_3.jpg?v=1736003033\" class=\"zoomable-image\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46823935803643,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2022-12-28.png?v=1736037693"},{"product_id":"2023-01-23","title":"Shopifyでコレクションをランキング形式で表示したい場合の実装例","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyでコレクションをランキング形式で表示しようとした場合の実装例ですがページネーションに気をつけたいところです。「paginate.current_offset」を使うことによって１ページあたりの表示件数が変わっても、２ページ目以降のランキング順位を正しく表示できます。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e【Dawn 7.0.1】main-collection-product-grid.liquidのschemaにランキング表示・非表示設定項目を追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23_1.jpg?v=1736046249\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003e【Dawn 7.0.1】main-collection-product-grid.liquidとcard-product.liquidを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23_2.jpg?v=1736046249\" alt=\"\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003e【Dawn 7.0.1】全てのコレクションに反映されてしまわないようランキング用にテンプレートを複製\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23_3.jpg?v=1736046248\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003eランキングを表示するコレクションのテーマテンプレートを「ranking」に設定\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23_4.jpg?v=1736046249\" class=\"zoomable-image\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827006820603,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23.png?v=1736046249"},{"product_id":"2023-03-04","title":"Shopifyでアカウント登録画面にもメルマガパーミッションの確認項目を設置する設定例","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのアカウント登録画面にもメルマガパーミッションの確認項目を設置したい時があるのですが、公式でも解説されているようにhidden項目と合わせて設置しておかないとチェックを外して登録したにも関わらず許諾状態になってしまうので注意が必要です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cspan\u003e\u003c\/span\u003e\u003cspan\u003e\u003c\/span\u003e\u003cspan\u003eアカウント作成画面にメルマガ受信チェックボックスを設置する際の注意点\u003c\/span\u003e\n\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-04_1.jpg?v=1736057360\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003carticle class=\"link-card\"\u003e\u003ca href=\"https:\/\/shopify.dev\/docs\/storefronts\/themes\/customer-engagement\/email-consent#customer-registration-form-checkbox\" target=\"_blank\"\u003e\n\u003cdiv\u003e\u003cimg alt=\"Customer registration form checkbox\" src=\"https:\/\/cdn.shopify.com\/assets\/images\/logos\/shopify-bag.png\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"content\"\u003e\n\u003ch2\u003eCustomer registration form checkbox\u003c\/h2\u003e\n\u003cp\u003e\u003c\/p\u003e\n\u003ccite\u003eshopify.dev\u003c\/cite\u003e\n\u003c\/div\u003e\n\u003c\/a\u003e\u003c\/article\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827129503995,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-04.png?v=1736057360"},{"product_id":"2023-03-05","title":"Shopifyでコレクションのソートフィルタ項目を個々に設定可能にする方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのコレクションページにあるソートフィルタですが、競合対策の観点から売上順を非表示にするなどのリクエストを頂くことがあります。その際、直接コードで非表示にしても良いのですが、運用後の方針変更にも対応できるよう、テーマエディタから編集可能にしておくと便利ですね。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003eテーマ「Dawn」8.0.0を使用したカスタマイズ例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05_1.jpg?v=1736057995\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e①main-collection-product-grid.liquidの修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05_2.jpg?v=1736057995\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e②facets.liquidの修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05_3.jpg?v=1736057995\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e③ja.scheme.jsonの修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05_4.jpg?v=1736057995\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827141824763,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05.png?v=1736057995"},{"product_id":"2023-03-13","title":"Shopifyのメタフィールドを使って、コレクションのイメージ画像にモバイル（スマホ）用画像を指定できるようにする方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのコレクションイメージ画像ですが、１つしか指定できないのでPCもSPも基本的には同じものが表示されます。とはいえやはりデバイスごとに最適な画像を表示したくなります。そこでメタフィールドを使って、モバイル用画像を別途指定できるようにしておくことが結構あります。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003eメタフィールドを使ってモバイル用のコレクションイメージを設定する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-13_1.jpg?v=1736059986\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e①ファイルメタフィールドを設定\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-13_2.jpg?v=1736059986\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e②コレクション画像を表示する箇所のコードを編集\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-13_3.jpg?v=1736059986\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827181244667,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-13.png?v=1736059986"},{"product_id":"2023-03-20","title":"【Dawn】Shopifyでアプリを使わずにカート画面に「あといくらで送料無料」を表示するための実装例","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyでアプリを使わずにカート画面に「あといくらで送料無料」を表示するための実装例です。数量変更や商品削除の際、カート画面をリロードせずに合計金額が更新されるテーマもあるので、Liquidよりもjsで動的に変更するようにしておく方が良いですね。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003eテーマ「Dawn」を使用。カートの数量変更によるリアルタイム集計にも対応\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-20_1.jpg?v=1736060948\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eカート画面に「カスタマイズされたLiquid」セクションを追加しコードを入れる\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-20_2.jpg?v=1736060948\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827222434043,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-20.png?v=1736060948"},{"product_id":"2023-03-30","title":"Shopifyのテーマ「Dawn」のスライドショーセクションでスマートフォン用画像を設定する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのテーマ「Dawn」の「スライドショー」セクションですが、ブロックごとに画像を１つだけ指定するタイプなので、トリミングの仕方が多少異なるだけでどのデバイスでも同じものが表示されます。 とはいえやはりスマートフォンでは縦長な画像を表示したくなりますので、その設定例です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003eDawnの「スライドショーセクション」でスマートフォン用画像を設定する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-30_1.jpg?v=1736076672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e①「slideshow.liquid」のschemaを修正、②「ja.schema.json」を修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-30_2.jpg?v=1736076672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e③「slideshow.liquid」の画像を表示する箇所のコードを編集 \u0026amp; 必要に応じてCSSを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-30_3.jpg?v=1736076672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827756323067,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-30.png?v=1736076672"},{"product_id":"2023-03-31","title":"Shopifyで商品情報に表示順優先度を設定しコレクションの表示順を設定する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのコレクションについて優先度を決めて商品の表示順を調整したいというご要望をいただくことがあります。そこで、全自動＆リアルタイムというわけにはいかないのですが、メタフィールドに設定した優先度を元にMatrixifyというアプリを使ってCSVによる一括更新を行うことがあります。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e商品情報に表示順優先度を設定しコレクションの表示順を設定する方法（アプリMatrixifyを用いてデータダウンロード→加工→アップロードによる半自動処理））\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31_1.jpg?v=1736079599\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e①商品メタフィールドに表示順優先度設定項目を作成し、商品ごとに優先度を設定する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31_2.jpg?v=1736079598\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e②Matrixifyを使って対象のコレクションと商品情報をエクスポートする\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31_3.jpg?v=1736079598\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e③ダウンロードしたコレクションと商品情報データを使って、商品順序を変更しアップロード用CSVを作成する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31_4.jpg?v=1736079598\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827869503739,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31.png?v=1736079598"},{"product_id":"2023-04-01","title":"Shopifyのテーマ「Dawn」のアカウントページで住所編集画面の項目順を変更する設定例","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003e\u003cmeta charset=\"utf-8\"\u003eShopifyのアカウントページにある住所編集画面ですが、デフォルトでは違和感のあるレイアウトなので、これを編集する方法です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のアカウントページ：住所編集画面の項目順を変更する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-01_1.jpg?v=1736079917\" class=\"zoomable-image\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827893195003,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-01.png?v=1736079916"},{"product_id":"2023-04-04","title":"Shopifyでページをブログのようにサムネイル付き一覧で表示する設定例","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのページをブログのように一覧で表示したい、というご要望に対して対応した際の設定例です。 ページにはブログのようにメインのイメージ画像を設定する事ができないのでメタフィールドで代用しています。また、全て表示する必要が無いことからその除外処理も入れています。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eページをブログのようにサムネイル付き一覧で表示する設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04_1.jpg?v=1736081682\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e①ページメタフィールドに２つの定義「サムネイル」と「一覧ページから除外する」を追加する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04_2.jpg?v=1736081682\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e②必要に応じてページごとにメタフィールドの内容を設定する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04_3.jpg?v=1736081682\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e③新規ページテンプレートを作成し「カスタムLiquid」セクションを追加してコードを挿入する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04_4.jpg?v=1736081682\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827902501115,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04.png?v=1736081682"},{"product_id":"2023-04-10","title":"Shopifyのテーマ「Dawn」のコレクション２ページ目以降の表示内容を変える方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのコレクション（商品一覧）ページにはタイトルや説明文以外にも独自の項目を色々と盛り込むことができますが、２ページ目以降にも同じ内容が毎回表示されるのは少々使い勝手が悪いですね。そこで２ページ目以降の表示内容を変えたい場合の\u003cmeta charset=\"utf-8\"\u003eテーマ「Dawn」での設定例です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-10_1.jpg?v=1736084036\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827914723579,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-10.png?v=1736084036"},{"product_id":"2023-04-17","title":"Shopifyでコレクションページごとに背景画像を変更する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのメタフィールドを使ってコレクションごとに背景画像を変更する方法です。コレクションとしていますが商品詳細やブログなど他のテンプレートにも応用できます。CSSを変更する予定がない場合は直接コードを編集しても問題ありませんが、こちらはテーマエディタを使った設定例です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-17_1.jpg?v=1736087173\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827941036283,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-17.png?v=1736087172"},{"product_id":"2023-04-20","title":"Shopifyのテーマ「Dawn」のヘッダー検索ボックスに任意の検索ワード候補を表示する設定例","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのサイト内検索ですが、予測変換機能はついてるものの何かしら文字を入れないと候補が表示されません。そこで検索ボックスを開いた際に最初からトレンドや人気の検索ワードを出しておくのもおすすめです。 運用しやすいようテーマエディタで編集可能にしておくための設定例です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eテーマ「Dawn」のヘッダー検索ボックスに任意の検索ワード候補を表示する設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20_1.jpg?v=1736087490\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①：「header.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20_2.jpg?v=1736087491\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②：「header.liquid」の表示側コードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20_3.jpg?v=1736087490\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③：テーマの予測検索機能はオフにしておく\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20_4.jpg?v=1736087490\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827941789947,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20.png?v=1736087490"},{"product_id":"2023-04-23","title":"Shopifyのテーマ「Dawn」のコレクションページに商品タグを表示する設定例","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのコレクションページに商品タグを表示したくなるケースも結構あります。使用するテーマによって設定方法は様々なのですが、こちらは「Dawn」を使った設定例です。アプリが自動でタグ付けすることがあるので、表示対象除外設定も合わせて実装しておくことをオススメしています。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003eテーマ「Dawn」のコレクションページに商品タグを表示する設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23_1.jpg?v=1736088087\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①：「main-collection-product-grid.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23_3.jpg?v=1736088088\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②：「main-collection-product-grid.liquid」と「card-product.liquid」の表示側コードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23_3.jpg?v=1736088088\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③：商品情報にタグを設定、テーマエディタで表示させたく無いタグを設定\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23_4.jpg?v=1736088087\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827946836219,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23.png?v=1736088087"},{"product_id":"2023-04-29","title":"Shopifyのテーマ「Dawn」のお問合せフォームで「送信確認」と「送信完了後に任意のページへ遷移」を実装する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのテーマ「Dawn」に標準で実装されているお問合せフォームですが、少し手を加えて顧客UXを向上させるのもオススメです。 送信前に確認メッセージを表示し、送信完了後に別ページで受付完了の案内を行うことで、顧客に対して適切な対応が行われていることを印象付けることができます。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003eテーマ「Dawn」のお問合せフォームで「送信確認」と「送信完了後に任意のページへ遷移」を実装する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-29_1.jpg?v=1736089609\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法】ページテンプレート「contact」に「カスタムLiquid」セクションを追加しコードを挿入\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-29_2.jpg?v=1736089609\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827972067579,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-29.png?v=1736089609"},{"product_id":"2023-05-02","title":"【Dawn】Shopifyでフッターに「ページのトップに戻る」ボタンを追加する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのテーマでヘッダーやフッターにセクションが追加できるようになりましたが、「ページのトップに戻る」ボタンを追加するのも良いですね。（チャットやメルマガフォームなど、他にもモーダルが表示される場合は、位置設定に気をつける必要があります）\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eフッターに「ページのトップに戻る」ボタンを追加する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-02_1.jpg?v=1736343447\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46835411321083,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-02.png?v=1736343446"},{"product_id":"2023-05-11","title":"【Dawn】Shopifyのテーマ「Dawn」でコレクション検索を実装する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyにはデフォルトでコレクションそのものを検索する機能は提供されていません。高度な検索機能が必要な場合はやはりアプリの使用がオススメですが、そこまでの機能を求めていない場合は、カスタマイズによってタイトルやハンドルを検索出来るようにすることも可能です。その設定例です。\u003c\/span\u003e\u003c\/p\u003e\n\u003ch3\u003e　テーマ「Dawn」でコレクション検索を実装する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_1.jpg?v=1736510524\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【実装方法】「main-list-collections.liquid」に検索フォームや、検索結果表示機能を追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_2.jpg?v=1736510524\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【追加するコードの位置】追加コード①\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_3.png?v=1736510525\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【追加するコードの位置】追加コード②\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_4.png?v=1736510525\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【追加するコードの位置】追加コード③\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_5.png?v=1736510524\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46839463117051,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11.png?v=1736510524"},{"product_id":"2023-05-17","title":"【Dawn】Shopifyのテーマ「Dawn」でコレクションページの途中にコンテンツを表示する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのコレクション（商品一覧）ページですが、ヘッダーとは別に途中でバナーなどのコンテンツを差し込み表示したいというリクエストを頂くことがあります。そこで、テーマ「Dawn」を使った設定例です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」でコレクションページの途中にコンテンツを表示する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17_1.jpg?v=1736594649\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順①】「main-collection-product-grid.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17_2.jpg?v=1736594648\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順②】「main-collection-product-grid.liquid」にコードを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17_3.jpg?v=1736594649\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【運用手順】liquidのコンテンツを設定し、表示位置を調整\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17_4.jpg?v=1736594649\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841250185467,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17.png?v=1736594648"},{"product_id":"2023-05-18","title":"Shopifyでコレクションや検索結果ページで「セール(割引価格を設定した)商品」を絞り込めるようにする方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのコレクションや検索結果ページで「割引（セール）商品」を絞り込めるようにする方法です。割引価格の有無そのものを絞り込み条件として設定することはできないので、通常は「タグ」を使っています。アプリを使えば、割引価格を設定するだけで自動でタグの付与・解除もできます。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eコレクションや検索結果ページで「セール(割引価格を設定している)商品」を絞り込めるようにする方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18_1.jpg?v=1736596824\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順①】販売チャネル「オンラインストア」のメニューから「Shopify Search \u0026amp; Discovery」を設定し絞り込み条件に「タグ（詳細な絞り込み）」を追加する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18_2.jpg?v=1736596825\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順②】対象商品の割引価格を設定し、「セール」などのタグを付与\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18_3.jpg?v=1736596824\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【補足】割引価格を設定したら、自動でタグ付与・削除する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18_4.jpg?v=1736596824\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841255592187,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18.png?v=1736596824"},{"product_id":"2023-05-19","title":"Shopifyのテーマ「Dawn」のスライドショーに設定できる最大枚数を変更する方法（最大50件まで）","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのテーマ「Dawn」のスライドショーは登録件数が最大５件になっていますが、数を増やしたいケースもあるかと思います。slideshow.liquid内のschemaを修正すれば拡張できます。画像はLazy load対応されていますが、要素の増やし過ぎは画面全体が重くなりますのでご注意下さい。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のスライドショーに設定できる最大枚数を変更する方法（最大50件まで）\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-19_1.jpg?v=1736641726\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841872580859,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-19.png?v=1736641726"},{"product_id":"2023-05-20","title":"【Dawn】Shopifyのテーマ「Dawn」のコレクションページに商品バリエーションを表示する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyの一覧画面で商品のバリエーション表示する設定例です。一覧画面にもバリエーション情報を表示しておくことで、訪問者が商品選択しやすくなり購入体験の向上を図ることができます。バリエーションが豊富な商品を扱うストアで効果的です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のコレクションページに商品バリエーションを表示する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-20_1.jpg?v=1736644051\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法】「card-product.liquid」にコードを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-20_2.jpg?v=1736644051\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841905447163,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-20.png?v=1736644051"},{"product_id":"2023-05-22","title":"Shopifyでデフォルトの「検索モーダル」は表示させずに様々な切り口の導線を設置した検索ページに直接遷移させる方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのテーマの多くは検索アイコンをタップするとその場でワード入力を促されます。 ですが、訪問者がより簡単に目的の商品にたどり着けるようにするために、直感的なナビゲーションを提供する検索ページに直接遷移させる方法も有用です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eデフォルトの「検索モーダル」は表示させずに様々な切り口の導線を設置した検索ページに直接遷移させる\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-22_1.jpg?v=1736648521\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841945817339,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-22.png?v=1736648520"},{"product_id":"2023-06-05","title":"【Dawn】ShopifyでInstagramからの訪問者に対して動的にコンテンツを差し替える方法（LPO）","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyにInstagramの投稿を連携するアプリは色々ありますが、Instagramからの流入対策も重要です。 訪問者の方は投稿内容に興味を持ってくれているはずなので、トップページにリンクしている場合、連動してInstagram関連のコンテンツがすぐに目に入るようにしてあげるのも良いですね。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eInstagramからの訪問者に対して動的にコンテンツを差し替える方法（LPO）\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-05_1.jpg?v=1736860369\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法】Instagram関連コンテンツの導線セクションとカスタマイズされたLiquidセクションを追加（カスタマイズされたLiquidセクションにJavascriptコードを挿入）\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-05_2.jpg?v=1736860369\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46847853723899,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-05.png?v=1736860368"},{"product_id":"2023-06-14","title":"【Dawn】Shopifyのテーマ「Dawn」のモバイル用商品詳細ページで、商品写真をヘッダー固定（Sticky）させる方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのテーマ「Dawn」のモバイル用商品詳細ページで、商品写真を固定しながらページをスクロールできるようにする方法です。 ユーザーは商品の解説文を読みながら画像を確認することができるようになります。必要に応じてこの機能をon\/offすることもできます。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cvideo controls=\"controls\" style=\"max-width: 100%; height: auto;\"\u003e\n\u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/1a7b285a384847828db05ed62c3e53b2.mp4\" type=\"video\/mp4\"\u003e\nYour browser does not support our video.\n\u003c\/source\u003e\u003c\/video\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-14_2.png?v=1737042788\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46855175045371,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-14.png?v=1737042788"},{"product_id":"2023-06-15","title":"【Dawn】Shopifyのテーマ「Dawn」でヘッダー・フッターを持たないページを作成する方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyでランディングページを作る際など、デフォルトのヘッダーやフッターが無いページを作成したい時があります。 基本的にはPageFlyなどビルダーアプリをオススメしていますが、アプリを使わずに実装したい時は少々無理矢理ですが、このような方法で非表示にすることがあります。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」でヘッダー・フッターを持たないページを作成する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-15_1.png?v=1737168845\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【手順①】「main-page.liquid」にschemeを、「ja.schema.json」にラベルを追加、【手順②】「main-page.liquid」に以下のコードを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-15_2.png?v=1737168845\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【手順③】「デフォルトのページ」テンプレートをベースにページテンプレートを新規作成、【手順④】新規作成したテンプレートでページセクションの設定で「ヘッダー・フッターを隠す」の項目をオンにする、【手順⑤】ヘッダー・フッターを非表示にしたいページを作成しテーマテンプレートに新規作成したものを設定\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-15_3.png?v=1737168845\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46859242045691,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-15.png?v=1737168844"},{"product_id":"2023-06-18","title":"【Dawn】Shopifyのテーマ「Dawn」でコレクションページのソートをプルダウン→タブ型に変更する設定例","description":"\u003cp\u003eShopifyのコレクションページでは、多くのテーマがプルダウン型のソート機能を提供していますが、これをタブ型に変更したいケースがあるかと思います。通常はLiquidコードを編集してカスタマイズしてしまうのですが、テーマエディタを使って変更を加える場合の設定例です。※「Dawn」限定\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」でコレクションページのソートをプルダウン→タブ型に変更する設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18_1.png?v=1737178285\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法①】コレクションテンプレートの商品グリッドの並べ替えを有効にするをオフにし、カスタマイズされたLiquidセクションを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18_2.png?v=1737178286\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法②】カスタマイズされたLiquidセクションにコードを挿入\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18_3.png?v=1737178285\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【備考】絞り込み機能の有無、レイアウトに関わらず利用可能\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18_4.png?v=1737178285\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46859396907259,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18.png?v=1737178284"},{"product_id":"2023-06-22","title":"【Dawn】Shopifyのテーマ「Dawn」のスライドショーで表示されるページネーションのスタイル画像を変更する方法","description":"\u003cp\u003eマニアックなカスタマイズ事例を一つ。ブランドのトーンに合わせてShopifyのスライドショーなどのページャーアイコンをデフォルト以外の任意のアイコンに変える方法です。テーマによってやり方は異なりますが、SVGを使えば画像ファイルをアップロードせずにコード編集だけで対応できますね。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のスライドショーで表示されるページネーションのスタイル画像を変更する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22_1.jpg?v=1737188373\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①「slideshow.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22_2.jpg?v=1737188373\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②：SVG形式のアイコン画像を作成＆アイコン用のスニペットファイルを追加し、「slideshow.liquid」の表示側コードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22_3.jpg?v=1737188373\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③：テーマエディタでスライドショーセクションを追加し、使用する「ページネーションのスタイル」を選択\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22_4.jpg?v=1737188373\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46859610194171,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22.png?v=1737188372"},{"product_id":"2023-06-24","title":"【Dawn】Shopifyのテーマ「Dawn」のブログ記事一覧ページで１ページあたりの表示数を変更できるようにする方法","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopifyのテーマ「Dawn」の「デフォルトのブログ」テンプレートは、１ページあたりのブログ記事カード表示件数が６件に固定されています。一度に表示される件数を増やしたい場合もあるので、表示件数を任意に設定できるようにするための設定例です。\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のブログ記事一覧ページで１ページあたりの表示数を変更できるようにする方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-24_1.jpg?v=1737195632\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②「main-blog.liquid」のコードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-24_2.png?v=1737195633\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46859712397563,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-24.png?v=1737195632"},{"product_id":"2023-07-02","title":"【Dawn】Shopifyのテーマ「Dawn」の商品ページでページ内リンクを設置できるブロックの設定例","description":"\u003cp\u003eShopifyのテーマ「Dawn」の商品詳細で、ページ内スクロールメニューを設置するための「ブロック」設定例です。掲載内容の充実はとても重要ですがその分閲覧率の低下も懸念されるため、項目を明示しつつ誘導できるページ内ナビは特にスマホの直帰率改善に有用です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」の商品ページでページ内リンクを設置できるブロックの設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cvideo controls=\"controls\" style=\"max-width: 100%; height: auto;\"\u003e\n\u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/a09fa93d9ef741ec974ed91f12997209.mp4\" type=\"video\/mp4\"\u003e\nYour browser does not support our video.\n\u003c\/source\u003e\u003c\/video\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-02_1.png?v=1737729671\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①「main-product.liquid」にschemeと表示用コードを修正（商品情報の新規ブロック作成）\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-02_2.png?v=1737729672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②：商品テンプレートの商品情報セクションに新規作成した「ナビゲーション」ブロックを追加して、各設定項目を指定\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-02_3.png?v=1737729672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46877199794427,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-02.png?v=1737729669"},{"product_id":"2023-07-07","title":"【Dawn】Shopifyのテーマ「Dawn」の商品詳細ページでPC画面では商品説明を先に表示したい場合の設定例","description":"\u003cp\u003eShopifyのテーマ「Dawn」の商品詳細画面は、PC用の画面でも商品説明の表示枠が小さいので、掲載する情報が多くなると少々見づらくなります。そこで、PC画面の時は楽天のように商品説明部分を最初の方に持ってきて、画面幅いっぱいに広げてしまうのも良いですね。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」の商品詳細ページでPC画面では商品説明を先に表示したい場合\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-07_1.jpg?v=1737783106\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順】商品テンプレートの「商品情報」内の「説明」ブロックは非表示または削除しカスタマイズされたLiquidを追加してコードを挿入する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-07_2.jpg?v=1737783106\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46878646599931,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-07.png?v=1737783106"},{"product_id":"2023-07-08","title":"【Dawn】Shopifyのテーマ「Dawn」の特集コレクションセクション＆コレクションテンプレートでモバイルでの列数を３列表示対応にする方法","description":"\u003cp\u003eShopifyのテーマ「Dawn」でモバイル画面の表示列数は標準で１列か２列のどちらかを選択できますが、少し手を加えて３列表示も可能にする方法です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」の特集コレクションセクション＆コレクションテンプレートでモバイルでの列数を３列表示対応にする方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08_1.jpg?v=1737786723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順①：商品グリッドセクション】「main-collection-product-grid.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08_2.png?v=1737786723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順②：特集コレクションセクション】「featured-collection.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08_3.png?v=1737786723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順③】base.cssを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08_4.png?v=1737786723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46878661050619,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08.png?v=1737786582"},{"product_id":"2023-07-11","title":"【Dawn】Shopifyのテーマ「Dawn」の商品詳細ページで画像に設定したaltをキャプションとして表示する方法","description":"\u003cp\u003eShopifyの商品写真には一つひとつaltを指定することができますが、これをテーマ「Dawn」の商品詳細ページで画像のキャプションとして表示する方法です。訪問者の商品理解を促しつつ、SEO効果も期待できます。（画像のaltとキャプションを併用する事はSEOの観点からも特に問題はありません）\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」の商品詳細ページで画像に設定したaltをキャプションとして表示する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11_1.jpg?v=1737789926\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順①】「main-product.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11_2.jpg?v=1737789926\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順②】product-media-gallery.liquid」を修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11_3.jpg?v=1737789926\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順③】必要に応じて商品画像のaltテキストを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11_4.jpg?v=1737789926\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46878686019835,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11.png?v=1737789926"},{"product_id":"2023-07-20","title":"【Dawn】Shopifyのテーマ「Dawn」でログインユーザーに「ようこそ○○様」を表示する設定例","description":"\u003cp\u003e常時ログインしておくことが前提のストアで見かけることが多いかと思いますが、Shopifyでログインしたユーザーに「ようこそ○○様」メッセージをヘッダー等に表示したい場合の設定例です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」でログインユーザーに「ようこそ○○様」を表示する設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-20_1.png?v=1737867723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法】header.liquidとheader-drawer.liquidにコードを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-20_2.png?v=1737867724\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46881028014331,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-20.png?v=1737867723"},{"product_id":"2023-07-21","title":"【Dawn】Shopifyのテーマ「Dawn」で特集コレクションの商品をランダム表示するための設定例","description":"\u003cp\u003eShopifyの「特集コレクション」で商品をランダムに表示するための設定例です。キャッシュが強固なliquidでアクセスするたびに内容が更新されるようにするため、テーマ「Prestige」で採用されているcart attributesを使った手法を参考に実験的に組んでみたものです。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eテーマDawnで特集コレクションの商品をランダム表示するための設定方法\u003c\/h3\u003e\n\u003cvideo controls=\"controls\" style=\"max-width: 100%; height: auto;\"\u003e\n\u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/380fd5c4e5f54a709a957c67f63cb68f.mp4\" type=\"video\/mp4\"\u003e\nYour browser does not support our video.\n\u003c\/source\u003e\u003c\/video\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_1.png?v=1737900416\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①「featured-collection.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_2.png?v=1737900415\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②「featured-collection.liquid」を修正（その１）\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_3.png?v=1737900417\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③「featured-collection.liquid」を修正（その２）、「main-cart-items.liquid」を修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_4.png?v=1737900416\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順④テーマの特集セクションの設定項目で表示するコレクションを選択し、「ランダムで表示する」をオンにする\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_5.png?v=1737900417\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46881788330235,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21.png?v=1737900414"},{"product_id":"2023-07-25","title":"【Dawn】Shopifyのテーマ「Dawn」の告知バーをテーマエディタでデバイスごとに表示・非表示できるようにする設定例","description":"\u003cp\u003e告知バー限定というわけではありませんが、Shopifyでデバイスごとにテーマエディタを使ってセクションの表示・非表示を行えるようにする場合の設定例です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマDawnの告知バーをテーマエディタでデバイスごとに表示・非表示できるようにする設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-25_1.jpg?v=1738392967\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①「announcement-bar.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-25_2.jpg?v=1738392967\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②「announcement-bar.liquid」のコードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-25_3.png?v=1738392967\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46893622886651,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-25.png?v=1738392831"},{"product_id":"2023-07-28","title":"【Dawn】Shopifyのテーマ「Dawn」の告知バーに表示可能なSNSアイコンをモバイルでも表示できるようにするためのCSS設定例","description":"\u003cp\u003eテーマヘッダーの機能も強化され、DawnのVer.も11に上がってデフォルトでSNSアイコンがアナウンスバーに表示されるようになりました。せっかくなのでデスクトップだけでなくモバイルでも表示できるようにするためのCSS設定例です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマDawnの告知バーに表示可能なSNSアイコンをモバイルでも表示できるようにするためのCSS設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cvideo style=\"max-width: 100%; height: auto;\" controls=\"controls\"\u003e\n\u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/f65b3fa4d0824c2e9f758ce75fb2d188.mp4\"\u003e\nYour browser does not support our video.\n\u003c\/source\u003e\u003c\/video\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-28_1.png?v=1738401405\" alt=\"\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順】ヘッダーにカスタマイズされたLiquidを追加してCSSコードを挿入する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-28_2.png?v=1738401404\" alt=\"\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46893693763835,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-28.png?v=1738401404"},{"product_id":"2023-08-04","title":"Shopifyで在庫数が0になった商品をコレクションで非表示にしたい場合の設定方法","description":"\u003cp\u003eShopifyの商品一覧（コレクション）ページで、在庫が0になった商品を非表示にしたいときは、やはり素直に自動コレクションで条件設定するのが良いですね。手動コレクションを使ってコードカスタマイズで対応しようとするとどうしても無理が生じてしまいます。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-04_1.jpg?v=1738933223\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46915655794939,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-04.png?v=1738933222"},{"product_id":"2023-08-13","title":"【Dawn】Shopifyのテーマ「Dawn」で在庫ステータスをコレクションにも表示する方法","description":"\u003cp\u003eShopifyのテーマDawnでは商品詳細ページに在庫ステータスを表示することができますが、それをコレクション（一覧ページ）にも出せるようにする方法です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマDawnで在庫ステータスをコレクションにも表示する方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13_1.png?v=1738939878\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①：「main-collection-product-grid.liquid」に「main-product.liquid」のschemeの一部を流用\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13_2.png?v=1738939877\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②：「main-collection-product-grid.liquid」のコードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13_3.png?v=1738939876\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③：「main-product.liquid」のコードを一部改変したものを、「card-product.liquid」の価格の上に追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13_4.png?v=1738939877\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46915761340667,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13.png?v=1738939875"},{"product_id":"2023-08-19","title":"Shopifyのテーマ「Dawn」のカート画面にSKUを表示する設定例","description":"\u003cp\u003eShopifyのテーマ「Dawn」のカート画面で、商品のSKUを表示させる設定例です。テーマエディタの設定画面で表示をON\/OFFできるようにすることもできますが、表示することが確定しているのであれば、直接コードを書いてしまって良いかと思います。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のカート画面にSKUを表示する設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-19_1.jpg?v=1738995211\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46917281415419,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-19.png?v=1738995211"},{"product_id":"2023-08-20","title":"【Dawn】Shopifyのテーマ「Dawn」でコレクションに商品説明を引用表示するための設定例","description":"\u003cp\u003eShopifyのコレクションページで、商品説明文を商品ごとに表示する設定例です。取り扱い商材によりますが、商品の写真や価格のほかに説明文も掲載することで、お客様が商品選びやすくなるようアシストできます。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマDawnでコレクションに商品説明を引用表示するための設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20_1.png?v=1738996628\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①：「main-collection-product-grid.liquid」にschemeを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20_2.png?v=1738996627\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②：「main-collection-product-grid.liquid」のコードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20_3.png?v=1738996627\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③：「card-product.liquid」のコードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20_4.png?v=1738996627\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46917289509115,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20.png?v=1738996624"},{"product_id":"2023-09-08","title":"【Dawn】Shopifyのテーマ「Dawn」のコレクションページで価格を非表示にする設定例","description":"\u003cp\u003eShopifyのコレクションページには価格を表示せず商品詳細でのみ表示したい、というケースがありました。テーマ「Dawn」にはデフォルトで価格を非表示にする設定は付いていないので、その実装例です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のコレクションページで価格を非表示にする設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-08_1.png?v=1739630054\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①「main-collection-product-grid.liquid」にschemaを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-08_2.jpg?v=1739630735\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②「main-collection-product-grid.liquid」「product-grid.liquid」のコードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-08_3.jpg?v=1739630053\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46931240124667,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-08.png?v=1739630053"},{"product_id":"2023-09-11","title":"【Dawn】Shopifyのテーマ「Dawn」でソーシャルアイコンにLINEアイコンを追加する設定方法","description":"\u003cp\u003eShopifyのテーマDawnのソーシャルアイコンにLINEを追加する設定例です。LINEのアイコン画像にはモノクロが使えないため一つだけ浮いてしまいますが、、Instagramやfacebookのアイコンを合わせてカラーに差し替えてしまっても良いかもしれません。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマDawnでソーシャルアイコンにLINEアイコンを追加する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-11_1.jpg?v=1739674819\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順①「setting_scheme.json」にschemaを、「ja.schema.json」にラベルを追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-11_2.png?v=1739674820\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②「social-icon.liquid」「en.default.json」「footer.liquid」を修正し、「icon-line.svg」を新規追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-11_3.png?v=1739674820\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46932131610875,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-11.png?v=1739674820"},{"product_id":"2023-09-15","title":"Shopifyのコレクションリストページ（\/collections）で掲載するコレクションを任意で並べる方法","description":"\u003cp\u003eShopifyのコレクション一覧（コレクションリスト）は、デフォルトで名前や日付、商品数などに基づいてソートされます。しかし、多くの場合はコレクションを自由な順番で並べたいこともあります。そんなときは「コレクションリスト」セクションを使えば、意図した順番にコレクションを並べて掲載できます。\u003c\/p\u003e\n\u003ch3\u003eコレクションリストページ（\/collections）で掲載するコレクションを任意で並べる方法\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-15_1.png?v=1740147839\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46946956247291,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-15.png?v=1740147838"},{"product_id":"2023-09-18","title":"【Dawn】Shopifyでそれだけで購入されると困る商品の場合にカート画面から先に進ませないようにする設定例","description":"\u003cp\u003eShopifyでギフト包装などを有料商品として扱う場合、それらだけでは購入できないようにしておきたいところです。そこで対象商品にタグを付けることで、通常商品を伴わない場合はカート画面から先に進めないようにする設定例です。（但し直接チェックアウトURLを指定された場合は防げません）\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eそれだけで購入されると困る商品の場合にカート画面から先に進ませないようにする設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-18_1.jpg?v=1740182724\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順①】該当の商品のテンプレート、または全商品テンプレートの購入ボタンの「動的チェックアウト」を外し、商品にタグ（例：単体購入不可）を付与する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-18_2.png?v=1740186738\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順②】カート画面に「カスタマイズされたLiquid」セクションを追加してコードを挿入\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-18_3.png?v=1740186737\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46948199039227,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-18.png?v=1740182724"},{"product_id":"2023-10-01","title":"【Dawn】Shopifyのテーマ「Dawn」のコレクションの商品サムネイルに1枚目・2枚目以外の画像を指定できるようにする設定方法","description":"\u003cp\u003eShopifyのテーマDawnのコレクションページに表示される商品写真は、商品情報に登録した１枚目（マウスオーバー時は２枚目）の画像に固定されていますが、これを任意の画像を指定できるようにする設定方法です。メタフィールドに入力欄を設けているので、商品ごとに指定が可能です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のスライドショーセクションでボタンコンテナが非表示でもリンクは有効にしておきたい場合の設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01_1.png?v=1740285830\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順「slideshow.liquid」のコードを編集する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01_2.png?v=1740285830\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②「contact-form.liquid」のコードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01_3.png?v=1740285830\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③：テーマエディタでの設定\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01_4.png?v=1740285830\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46949955993851,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01.png?v=1740285829"},{"product_id":"2023-10-03","title":"【Dawn】Shopifyのテーマ「Dawn」のお問い合わせフォーム送信完了後に別URLにリダイレクトする設定例","description":"\u003cp\u003eShopifyのテーマ「Dawn」のお問い合わせフォームですが、デフォルトでは送信が成功するとその場でメッセージを表示して完了となります。ただ、計測のためだったり別途フォームの無いメッセージを表示したいなどの目的から、別のページ（URL）に飛ばしたい時があります。その設定例です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のスライドショーセクションでボタンコンテナが非表示でもリンクは有効にしておきたい場合の設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03_1.png?v=1740287965\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順「slideshow.liquid」のコードを編集する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03_2.png?v=1740288146\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②「contact-form.liquid」のコードを修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03_3.png?v=1740287965\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③：テーマエディタでの設定\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03_4.png?v=1740287965\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46949980012795,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03.png?v=1740287964"},{"product_id":"2023-10-04","title":"【Dawn】Shopifyのテーマ「Dawn」のスライドショーセクションでボタンコンテナが非表示でもリンクは有効にしておきたい場合の設定例","description":"\u003cp\u003eShopifyのテーマ「Dawn」のスライドショーセクションですが、リンク先を指定する際はリンクボタンとして画像の上に表示されます。これはこれで導線としてわかりやすくて良いのですが、場合によってはボタンは表示せずに画像全体にリンク先を指定したい時があります。その設定例です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」のスライドショーセクションでボタンコンテナが非表示でもリンクは有効にしておきたい場合の設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-04_1.png?v=1740288711\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順「slideshow.liquid」のコードを編集する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-04_2.png?v=1740288711\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46949995184379,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-04.png?v=1740288710"},{"product_id":"2023-10-10","title":"【Dawn】Shopifyのテーマ「Dawn」でカートの商品を削除する際に確認ダイアログを表示する設定例","description":"\u003cp\u003eShopifyのテーマ「Dawn」ではカートに入っている商品の削除ボタンを押すと、確認メッセージなど表示されず即座にアイテムが取り除かれます。そこで誤って削除されないようにするためダイアログを表示する方法です。（cart.jsを修正するのでテーマバックアップを行なってから実装して下さい）\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」でカートの商品を削除する際に確認ダイアログを表示する設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-10_1.png?v=1740799955\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順：アセット＞「cart.js」のコードを一部修正\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-10_2.png?v=1740799955\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46968864866555,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-10.png?v=1740799954"},{"product_id":"2023-10-13","title":"【Dawn】Shopifyのテーマ「Dawn」で在庫切れの商品に表示されるラベルを商品ごとにメタフィールドで指定できるようにする設定例","description":"\u003cp\u003eShopifyのテーマ「Dawn」で、商品詳細や商品一覧の在庫切れ商品に表示される「売り切れ（テーマのコンテンツ編集から変更可能）」の文字ですが、これを商品ごとに任意の内容に変更するための設定例です。定期的に在庫が補充される商品についてラベルを設定しておくなどの使い方になります。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Dawn」で在庫切れの商品に表示されるラベルを商品ごとにメタフィールドで指定できるようにする設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13_1.png?v=1740809326\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【手順①】商品メタフィールドに売り切れ時の代替表示項目を追加\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13_2.png?v=1740809325\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順②「contact-form.liquid」のコードを編集する（確認用メールアドレス入力フォームの追加）\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13_3.png?v=1740809393\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順③「contact-form.liquid」のコードを編集する（アドレス一致判別用Javascriptの追加）\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13_4.png?v=1740809396\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46969010258171,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13.png?v=1740809325"},{"product_id":"2023-10-15","title":"Shopifyでメニューのテキストを日本語・英語で併記するための設定例","description":"\u003cp\u003eShopifyのメニューで英語と日本語を併記したい場合に、区切り文字で入力しておいてsplitで分解して展開する方法が紹介されていました。新規項目の追加や編集もしやすいので便利ですね。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003carticle class=\"link-card\"\u003e\u003ca href=\"https:\/\/community.shopify.com\/c\/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a\/%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E8%A1%A8%E8%A8%98%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\/td-p\/1283105#threadeddetaildisplaymessageviewwrapper_5\" target=\"_blank\"\u003e\n\u003cdiv\u003e\u003cimg alt=\"グローバルメニューの表記について\" src=\"https:\/\/cdn.shopify.com\/assets\/images\/logos\/shopify-bag.png\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"content\"\u003e\n\u003ch2\u003eグローバルメニューの表記について\u003c\/h2\u003e\n\u003cp\u003e\u003c\/p\u003e\n\u003ccite\u003ecommunity.shopify.com\u003c\/cite\u003e\n\u003c\/div\u003e\n\u003c\/a\u003e\u003c\/article\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eメニューのテキストを日本語・英語で併記するための設定例\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-15_1.png?v=1740811233\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法①】併記したい「英語」と「日本語」を区切り文字で繋いだ形で、メニュー名に設定する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-15_2.png?v=1740811233\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法②】（テーマ「Dawn」での設定例）メニューテキスト（link.title）が表示される全てのメニューファイルを修正する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-15_3.png?v=1740811233\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46969056985339,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-15.png?v=1740811232"}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/collections\/collection-ui-ux.png?v=1743495614","url":"https:\/\/store-dojo.com\/collections\/ui-ux.oembed?page=5","provider":"STORE DOJO","version":"1.0","type":"link"}