「Concept」サポート
Setup Product Bundle section in Concept
This tutorial walks you through setting up the Product Bundle section in the Concept theme—a flexible way to group and promote products together for upselling or bundling purposes. 💡 Note: This feature is available starting from Concept v2.0.0. Steps 1....
概要Concept テーマのタブ付きメガ メニューは、インタラクティブなタブ、注目の製品、プロモーション コンテンツを含む製品カテゴリを表示することにより、ユーザー エクスペリエンスを向上させる、高度にカスタマイズ可能なナビゲーション システムです。このガイドでは、ストアのニーズに合わせてセットアップおよびカスタマイズする方法について説明します。 💡注:タブ付きメガ メニューは、 Concept v4.0.0からのみ利用可能です。古いバージョンのテーマを使用している場合は、この記事で簡素化されたメガ メニュー バージョンを確認してください。タブ付きメガメニューの設定方法1.タブ付きメガメニューの追加Shopify 管理パネルに移動します。 [オンライン ストア] > [テーマ]に移動します。 「コンセプト」テーマの「カスタマイズ」をクリックします。左側のサイドバーで、ヘッダーセクションを見つけて選択します。セクションの下で、クリックしてブロックを追加し、 [タブ付きメガ メニュー]を選択します。 2.主な設定を行う [メニュー項目]で、メガ メニューをトリガーするメニュー項目の名前 (「ショップ」など) を入力します。ボタンのラベルを入力します (例: 「すべての製品を表示」)。ボタンを非表示にするには、空白のままにします。ユーザーをコレクションやカテゴリにリダイレクトするなど、必要に応じてボタン リンクを設定します。見出し 1 (例: 「コレクション」) と見出し 2 (例: 「最も人気のある」) を定義してセクションにラベルを付けます。製品ベンダーや価格の表示など、モバイル レイアウトのオプションを切り替えます。 3.メガメニューへのタブの追加最初のスクリーンショットに見られるように、タブ付きメガ メニューは垂直レイアウトで 5...
メタフィールド経由で 1 つのオプションに関連付けられた複数の画像をセットアップする
Shopifyでは、商品オプションに画像を追加して、顧客にそれぞれの選択肢のイメージを示すことができます。ただし、Shopifyの構造上、オプションごとにリンクできる画像は1つだけです。 では、質問は、複数の画像を 1 つのバリエーション (色やサイズなどのオプションの組み合わせ) に関連付けるにはどうすればよいかということです。答えはConceptにあります。そこでは、メタフィールドを使用して 1 つのバリエーションに特定の画像を指定できます。 💡注:この機能はConcept v4.1.0以降でのみご利用いただけます。古いバージョンのテーマをご利用の場合は、まずテーマを更新する必要があるかもしれません。この機能を設定するには、次の 2 つの主な手順に従います。 1. バリアント用のメタフィールド「ギャングメディア」を作成する管理ダッシュボード>設定>カスタム データ>バリアント>定義の追加。 これらをクリックすると、バリアント メタフィールド定義の追加ウィンドウが表示されます。 関数が正しく動作するには、以下の指示通りに入力する必要があります。名前- Gang media名前空間とキー- theme.gang_mediaタイプを選択>ファイルタイプを選択し、リストエントリを選択この手順を設定すると、次の設定でメタフィールド製品アイコンが表示されます。 2. 商品のバリエーションにメタフィールド「ギャングメディア」を設定する管理ダッシュボード>製品>希望の製品を選択します。この例では、「Flow Harmony」製品を使用します。 「商品設定」で、下にスクロールして「バリエーション」を選択します。「Flow Harmony」のゴールドトーンバリエーションの場合は、 [ゴールドトーン]をクリックして、このオプションに複数の画像を設定します。 メタフィールドまで下にスクロールし、ギャングメディアの下のファイルを選択を選択します。 注記: [ファイルを選択]をクリックすると、すべての画像ファイルが表示されます。これは製品のメディアライブラリを選択した場合にのみ機能します。この場合、「Flow Harmony」メディアライブラリを指します。 「Flow Hamony」メディアをフィルタリングするには、次の手順に従ってください。製品を選択 > Flow Harmonyと入力> Flow Harmony 製品を正確に選択します。 すると、Flow...
この記事では、製品アイコンを設定する方法を段階的に説明します。 主な手順は以下のとおりです。エントリの作成と追加[メタオブジェクト] Product spec [メタオブジェクト]の作成Product spec管理ダッシュボード>セットアップ アイコン[1] >カスタム データ[2] > メタオブジェクト定義フィールドの下の定義の追加[3] 。 これらをクリックすると、 「メタオブジェクト定義の追加」ウィンドウが表示されます。関数が正しく動作するためには、以下の指示どおりに入力する必要があります (上も含む)。 名前[4] - 入力Product specフィールド[5] - [フィールドの追加]をクリックします。目的は、 Title 、 description 、およびIconという名前の 3 つのフィールドを追加することです。 上の画像に示すように、「単一行テキスト」タイプはタイトルと説明に使用され、「ファイル」はアイコンに使用されます。以下の表に従って、これら 3 つのフィールドを設定します。タイトル説明アイコン名前- Titleを入力します値の種類を 1 つ選択します。 名前- Descriptionを入力します値の種類を 1 つ選択します。 名前- Iconを入力ファイルの種類を 1...
この記事では、さまざまなデバイス間で最高のエクスペリエンスを実現するための要件について概説します。デスクトップブラウザの要件テーマのレイアウト、閲覧エクスペリエンス、および購入アクションは、次のデスクトップ ブラウザーおよびバージョンと互換性があります。 Safari - Mac のバージョン 16、17、18 以降。 Chrome - Mac および PC のバージョン 129、130、131 以降。 Firefox - Mac および PC 用のバージョン 131、132、133 以降。 Edge - PC のバージョン 130、131 以降。モバイルブラウザの要件テーマのレイアウト、閲覧エクスペリエンス、および購入アクションは、次のモバイル ブラウザーおよびバージョンと互換性があります。 Mobile Safari - iOS のバージョン 17、18 以降。 Chrome モバイル-...
BeYours テーマを使用してカスタム商品ラベルを Shopify ストアに追加することは、特別オファー、新着商品、またはユニークな機能を強調する優れた方法です。このガイドでは、プロセスを段階的に説明します。 メタフィールドのセットアップカスタムラベルを追加する前に、Shopify 管理パネルで必要なメタフィールドを設定する必要があります。 Shopify 管理パネルへのアクセスShopify 管理パネルにログインします「設定」>「カスタムデータ」に移動します製品ラベルのメタフィールドの作成カスタムデータ設定で「製品」を選択します 「定義の追加」をクリックします次の詳細を入力します。名前:「製品ラベル」名前空間とキー: 「theme.label」説明: [コンテンツ タイプの選択] をクリックし、[テキスト] を選択します。テキスト形式:「単一行テキスト」 「値のリストを受け入れる」にチェックを入れます「保存」をクリックします製品ラベルの色メタフィールドの作成もう一度「定義の追加」をクリックします次の詳細を入力します。名前:「製品ラベルの色」名前空間とキー: 「theme.label_color」説明: 「コンテンツタイプ」をクリックし、「カラー」を選択します。 「保存」をクリックします製品へのラベルの貼り付けメタフィールドの設定が完了したので、商品へのラベルの適用を開始できます。製品の編集Shopify 管理パネルの「製品」に移動しますラベルを追加したい商品を選択してくださいラベルと背景色の追加[製品ラベル] フィールドを見つけて、希望のラベル テキスト (例: 「新製品」、「セール」、「ベストセラー」) を入力します。 「製品ラベルの色」フィールドを見つけて、好みの背景色を選択します。 「保存」をクリックして変更を適用します。 ラベルのプレビュー新しいラベルがどのように表示されるかを確認するには:ストアのフロントエンドにアクセスしてください編集した製品に移動します選択した背景色でカスタム ラベルが製品カードに表示されるはずです。 トラブルシューティングラベルが表示されない場合:変更を保存したことを確認してくださいConcept テーマの最新バージョンを使用していることを確認してくださいブラウザのキャッシュをクリアしてページを更新してくださいこれらの手順に従うことで、コンセプト テーマを使用してカスタム商品ラベルを Shopify ストアに追加することができました。さらに支援が必要ですコンセプト テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp...
バージョン 6.0.0 - 2026年7月7日 このメジャーリリースは速度に重点を置いています — バリエーションの瞬時切り替え、モバイルでの高速読み込み、再構築された JavaScript 基盤、さらに新しい「検索タイプ」と「音声検索」オプションを備えた再設計された検索体験、そしてバリエーション画像・スウォッチ・メディア再生に関する多数の修正が含まれます。 内部では、信頼性と速度のためにテーマの JavaScript が再構築されました — これがバージョンが 6.0.0 に上がった理由です。更新後もストアの見た目と動作は変わりません。新しい設定はすべて、現在の動作に合わせて初期設定されています。開発者がテーマにカスタムコードを追加している場合は、更新後に簡単なテストを行うことをおすすめします。 追加 新しい「テーマフォントを事前読み込み」設定を追加 — ページ上部が画像や動画の場合はオフにすると、ヒーローメディアが最初に読み込まれます。現在の動作を維持するため、初期設定でオンになっています。 バリエーションの瞬時切り替えを追加 — バリエーションのデータと画像が事前に読み込まれ、新しい写真の準備が整うまでギャラリーは現在の写真を表示し続けます(空白の点滅がなくなりました)。 モバイルでのページの高速読み込みを追加 — 折り目より下の画像や動画が読み込み中にヒーローと競合しなくなり、データセーバーまたは 2G を使用している訪問者には動画がスキップされます。 新しい「検索タイプ」設定を追加(ドロワー / インライン / ページ — カートタイプと同じように動作します)。インラインはヘッダー内に候補のドロップダウン付き検索バーを表示します。ページは /search ページへ直接リンクします。現在の動作を維持するため、初期設定はドロワーです。 新しい「音声検索」機能を追加 — 買い物客が話して検索できるマイクボタンです。対応していないブラウザ(例:Firefox)や、マイクへのアクセスが拒否された場合には自動的に非表示になります。初期設定では無効です。...
Conceptでは、このようにカートドロワーに表示されるアイコンをカスタマイズできます。この機能は、特にカートが空の場合に、顧客がコレクション リストを通じて製品を探索するのに役立ちます。 この記事では、各コレクションのアイコンを設定するためのステップバイステップのガイドを提供します。手順: まず、「アイコン」メタフィールドを作成します。管理者ダッシュボード>設定>カスタム データ>コレクション>定義の追加。 このメタフィールドの設定ウィンドウが表示されます。 正確に次のように設定します。名前- Iconネームスペースとキー- theme.iconタイプを選択し、 [ファイル] を選択して、 [1 つのファイル] を選択します。 たとえば、次の画像はサンプル設定を示しています。私たちの例と正確に一致するように記入してください。 次に、 「保存」をクリックして「アイコン」メタフィールドの作成を完了します。次に、必要なコレクションにメタフィールド値を設定します。管理ダッシュボード>製品>コレクション> 目的のコレクションを選択します。この例では、 Seating を選択します。 Seating コレクションで、 [Metafields]まで下にスクロールし、 [Icon]を選択します。 表示したいアイコン画像を選択します。 「保存」をクリックして終了します。第三に、選択したコレクションをカート引き出しセクションに表示します。 [テーマ設定] > [オーバーレイ] グループで > [カート ドロワー]を選択し、セクション設定の[空のカートの推奨事項]まで下にスクロールし、 [コレクションの選択] を選択します。 この例では、手順 2 でアイコン メタフィールドを設定した[座席]を選択します。 注:アイコンが設定されている限り、任意のコレクションを選択できます。そうでない場合は、アイコンなしで表示されます。最後に、他のコレクションのアイコンをさらに追加するには、追加のコレクションごとにステップ...
Shopify は、ストアで使用できる何百もの無料フォントを提供しています。ただし、ブランド ガイドラインに合わせるためにカスタム フォントを使用する必要がありますが、Shopify ではサポートされていません。テーマに追加することはできます。フォントカスタム前フォントカスタム後 以下の 2 つの方法のいずれかを使用して、コンセプト テーマのフォントをカスタマイズできます。 Liquid コードを編集する(強く推奨)これを達成するための 9 ステップのガイドは次のとおりです。まずフォントを利用できるようにする必要があります。一部のフォントにはライセンスがあるため、使用するために適切に購入するようにしてください。当社のサポート チームは、必要なフォントの入手を担当しません。次に、追加するフォント スタイルごとに、 .woffと.woff2形式の 2 つのファイルを用意します。これは、追加したフォントがすべての種類のブラウザで読み取れることを確認するためです。 十分なファイルがあれば、 [管理者ダッシュボード] > [コンテンツ] 1 > [ファイル] 2 > [アップロード] 3からアップロードします。 アップロードしたすべてのフォント ファイルの右側には、コピー行為のためのファイル リンクを提供するチェーン ボタンがあります。 次に、管理者ダッシュボードに戻り、 [オンライン ストア] 1 > [テーマ] 2をクリックし、コンセプト...
Concept は、次のように記事タグの色のカスタマイズをサポートしています。 この設定ではメタフィールドを利用するため、メタフィールド定義を追加し、記事に色を割り当てるだけです。このページでは2 つの新しいメタフィールドの追加記事のメタフィールド値の割り当て必須前提条件:標準またはカスタムのメタフィールドを適用する前に、メタフィールド定義の追加に関する Shopify のガイドを必ず確認してください。 標準定義の追加カスタム定義の作成注記:この手順は 1 回だけ実行する必要があり、すべての記事に影響します。すでにこれを行っている場合はスキップしてください。メタフィールドはテーマとは独立して機能するため、テーマを更新または再インストールするときにこの手順を再度実行する必要もありません。 2 つの新しいメタフィールドの追加このパートでは、タグの色とタグの背景という2 つの新しいメタフィールドを作成する手順を説明します。 Shopify 管理者ダッシュボード> [設定]で。 [カスタム データ] > [ブログ投稿]をクリックします。 以下の表に概説されている手順に従ってください。左側の列は、タグの色の作成の詳細を示します。右側の列はタグの背景に焦点を当てています。各メタフィールドを作成した後は、必ず「保存」をクリックしてください。タグの色タグの背景ブログ投稿を選択した後、右上隅にある[定義の追加]ボタンをクリックします。 ブログ投稿を選択した後、右上隅にある[定義の追加]ボタンをクリックします。 「ブログ投稿メタフィールドの追加」定義で、以下を含むタグの色メタフィールドの詳細を設定します。名前- Tag color名前空間とキー- theme.tag_colorコンテンツ タイプを選択し、 [色]と[1 つの値]を選択します。 「ブログ投稿メタフィールドの追加」定義で、以下を含むタグ背景メタフィールドの詳細を設定します。名前- Tag background名前空間とキー- theme.tag_backgroundコンテンツ タイプを選択し、 [色]と[1 つの値]を選択します。 「保存」をクリックして定義を保存します。 「保存」をクリックして定義を保存します。これら 2 つのメタフィールドを作成すると、定義リストにタグの色とタグの背景が表示されるようになります。 記事のメタフィールド値の割り当て管理パネルから、ブログ投稿に移動します。ラベルを追加する記事を選択します。この例では、「ステレオ...
トラブルシューティング: ビデオ バナーがモバイルで機能しない
ほとんどの iOS および Android デバイスでは、バッテリー節約モードにより、バッテリーを節約するためにビデオの自動再生が自動的に無効になります。ただし、顧客は再生アイコンをタップするだけでビデオを視聴できます。 バッテリー節約モードユーザーの操作が必要タップするとビデオが再生されますさらに支援が必要ですコンセプト テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp コミュニティに参加し、最新情報、ニュース、お知らせを入手してください。
コレクションページでのスクロールテキスト背景アニメーションの設定
このガイドでは、コレクション ページにテキストのスクロール領域を挿入するための手順を段階的に説明します。実際の動作を確認するには、以下のビデオをご覧ください。 この機能はメタフィールドを介して利用されるため、このガイドは 2 つの主要な部分で構成されています。パート 1 - 必要なメタフィールドを作成するパート 2 - テキストの設定1. 必要なメタフィールドを作成しますまず、「 Marquee 」という名前の新しいメタフィールドを作成します。このメタフィールドはすべてのコレクションに表示されます。管理者ダッシュボードで、[設定] > [カスタム データ] > [コレクション] > [定義の追加] を選択します。 この新しいメタフィールドを設定するには、次の正確な手順に従ってください。名前- Marquee名前空間とキー- theme.marquee タイプを選択し、 [単一行テキスト]を選択してから、 [1 つの値] を選択します。 上記の手順を完了すると、「Marquee」という名前の新しいメタフィールドが作成されます。 このマーキー メタフィールドは、リストされたコレクション メタフィールドの中から見つけることができます。 2. テキストの設定「マーキー」メタフィールドにテキストを追加します。このテキストはコレクション ページに表示されます。たとえば、「ワイヤレス ヘッドフォン」コレクションを例として使用してみましょう。管理者ダッシュボード> [製品] >...
広告が混雑している状況では、読者の注意を引くことが難しい場合があります。コンセプトテーマのハイライト テキスト機能を使用すると、重要なメッセージを戦略的に強調し、視聴者の注目を最適な効果に導くことができます。この機能は、以下の表にいくつかの例を示すように、さまざまな強調表示オプションによって容易になります。なし大胆な太字と斜体派手な下線スケッチの下線波線の下線この記事は、ハイライトされた機能の構成について説明しています。この機能は、リッチ テキスト セクション、ショップ ザ ルック セクション、注目のコレクション セクション、見出しブロック、テキスト ブロックなど、Web サイト全体のさまざまなテキスト セクションおよびブロックにシームレスに統合されています。セクションとブロックの両方で、同様の強調表示されたテキスト機能の設定が提供されますが、理解しておくべき重要なニュアンスがいくつかあります。テキストの入力と書式設定:強調表示する前に、専用領域にテキストを入力します。ここで、太字や斜体などの基本的な書式設定をセクションや個々の単語に適用できます。 ハイライトされたテキストの設定:特定の単語を強調表示するには、エディターの [斜体] ボタンを使用して単語を斜体で囲みます。 ハイライトオプション:ハイライトすると、次の 2 つのオプション セットにアクセスできます。ハイライトされたテキスト-テキストの色、テキストの背景カバー、派手な下線タイプ、通常の下線タイプ、ステンシル テキスト、さらには手書きの落書きなど、さまざまなスタイルから選択します。この例では、「サウンド」という単語が「テキストの背景カバー」によって強調表示されています。 ハイライトされた落書き-手書きの落書きを選択すると、このグループの追加オプションがアクティブになります。このグループでは、 [基本下線] 、 [スケッチ下線] 、 [波線下線] 、および[波線下線 2]などのオプションを使用して手描き効果をカスタマイズできます。この例では、「soun」という単語が「基本下線」で強調表示されています。 最後に、 「保存」をクリックして設定を終了します。この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。さらに支援が必要ですコンセプト テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp コミュニティに参加し、最新情報、ニュース、お知らせを入手してください。
Concept を使用すると、製品ページにカウントダウン タイマーを組み込んで、割引期限が切れるまでの残り時間を視覚的にマークできます。これらのタイマーは緊迫感を効果的に与え、顧客に迅速な行動を促し、割引がなくなる前にチャンスをつかむよう促します。 この機能はメタフィールドに基づいて動作します。したがって、メタフィールド定義を追加し、必要な製品のカウントダウンを設定するだけです。このページではカウントダウン資格メタフィールド定義の追加製品のカウントダウンを設定するカウントダウンを表示するカウントダウン資格カウントダウンタイマーは、商品が低価格で販売されている場合にのみ機能します。したがって、カウントダウンを追加する前に、商品の価格比較を設定していることを確認してください。そうしないと、カウントダウンが無効になります。メタフィールド定義の追加特定の製品にカウントダウン (メタフィールド値) を追加する前に、この情報に必要なメタフィールド定義を追加する必要があります。注記この手順は 1 回だけ実行する必要があり、すべての製品に影響します。すでにこれを行っている場合はスキップしてください。メタフィールドはテーマとは独立して機能するため、テーマを更新または再インストールするときにこの手順を再度実行する必要もありません。 Shopify 管理画面> [設定] > [メタフィールド] > [製品]から。 [定義の追加] をクリックします。 [製品メタフィールド定義の追加] ボックスで、次のような新しいメタフィールドの詳細を設定します。名前- Product countdown名前空間とキー- theme.countdown説明(オプション) - 「製品を説明する重要な情報を追加します。」という説明行を追加します。コンテンツ タイプの選択- 行テキスト、整数、日付と時刻、ファイルなど、さまざまなコンテンツ タイプがあります。この設定では、 [日付と時刻]を選択します。 [日付と時刻]を選択します。これを選択すると、カウントダウンの正確な時間を指定できるようになります。 「保存」をクリックして定義を保存します。これまでに、定義リストに製品カウントダウンが表示されているはずです。 カウントダウンの設定管理者の[製品]内で、カウントダウンを追加する製品に移動します。 [メタフィールド]まで下にスクロールし、 [すべて表示]をクリックして製品のメタフィールド値を開きます。 ここで製品のカウントダウンが表示されるはずです。 有効期限を設定するには、 「製品カウントダウン」フィールドをクリックします。ここでは 2 つの入力が表示されます。1 つは日付用、もう 1...
Conceptでは、画像サイズに厳密なルールはなく、任意のサイズを選択できます。ただし、最適な表示のために、この記事ではサイトに完璧に表示される画像サイズを推奨します。このページではさまざまなセクションとブロックの画像サイズConceptで最適な結果を達成するには、以下の表で詳しく説明されているように、さまざまなセクションにさまざまな画像サイズを使用することをお勧めします。画像の場所画像サイズヘッダーグループプロモーションイメージプロモーション画像はメガメニューセクションにあります。デスクトップとモバイルデバイスの両方に推奨される画像サイズは、選択したアスペクト比によって異なります。画像に適応- 画像の比率を維持します正方形- 少なくとも 2000 x 2000 ピクセルポートレート- 少なくとも 2000 x 2500 ピクセル風景- 少なくとも 2400 x 1600 ピクセルワイド- 少なくとも 2400 x 1350 ピクセルオーバーレイグループニュースレターのポップアップ画像デスクトップとモバイルブラウザの両方の推奨サイズ: 1080 x 1080 ピクセル。テンプレートグループコラージュのブログ投稿ブログ投稿の注目の画像を設定するには、 Shopify 管理ダッシュボードで[オンライン ストア] > [ブログ投稿]に移動します。次に、投稿をクリックし、右側の列で[注目の画像]ボックスを見つけて画像を追加します。 デスクトップとモバイルブラウザの両方で推奨されるサイズ: 1600 x 900 ピクセル。カウントダウンタイマー推奨サイズ:デスクトップブラウザ: 2200 x 1000 ピクセル。モバイルブラウザ:...
