「Concept」サポート

Concept release notes

How to use Scrollspy Navigation section in Concept theme?

The Scrollspy Navigation (Scrollspy) section creates a sticky navigation bar that helps visitors quickly jump to different parts of your page. As users scroll down, the navigation automatically highlights which section they're currently viewing. This section is perfect for: Long...

Read more

製品ページにアイコン付きのカスタム テキスト ブロックを追加する方法

製品情報セクションの下にアイコン付きのカスタム テキスト ブロックを追加して、配送、保証、その他のセールス ポイントを強調表示できます。 追加するブロックの数に基づいて、レイアウトが自動的に調整されます。 1 ブロック= スタンドアロン スタイル (明るい背景) 2 つ以上のブロック= グループ化されたスタイル (明るい背景 + 暗い背景)ステップバイステップの説明1.テーマエディターに移動します管理画面で、 [オンライン ストア] > [テーマ]に移動します。現在のテーマの「カスタマイズ」をクリックします2. 製品テンプレートに移動します上部のドロップダウンで[製品]を選択し、テキスト ブロックを追加する製品テンプレート (デフォルト製品など) を選択します。 3. テキストブロックを追加する 「製品情報」セクションまで下にスクロールしますテキストブロックを追加したい位置の「+」ボタンをクリックしますブロックリストからテキストを選択します4. テキストブロックをカスタマイズする右側に、選択したブロックの設定が表示されます。アイコン: 組み込みのアイコン (トラック、ロック、タグなど) を選択します。カスタム アイコン: 必要に応じて独自のアイコンをアップロードしますテキスト: カスタム メッセージを入力します (例: 「送料無料と返品」)文字サイズ:お好みのサイズを選択してください(中を推奨) 5.さらにブロックを追加する必要に応じて、多くのテキスト ブロックを追加できます。複数追加すると、レイアウトは自動的に 2...

Read more

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....

Read more

タブ付きメガメニューの作成方法

概要Concept テーマのタブ付きメガ メニューは、インタラクティブなタブ、注目の製品、プロモーション コンテンツを含む製品カテゴリを表示することにより、ユーザー エクスペリエンスを向上させる、高度にカスタマイズ可能なナビゲーション システムです。このガイドでは、ストアのニーズに合わせてセットアップおよびカスタマイズする方法について説明します。 💡注:タブ付きメガ メニューは、 Concept v4.0.0からのみ利用可能です。古いバージョンのテーマを使用している場合は、この記事で簡素化されたメガ メニュー バージョンを確認してください。タブ付きメガメニューの設定方法1.タブ付きメガメニューの追加Shopify 管理パネルに移動します。 [オンライン ストア] > [テーマ]に移動します。 「コンセプト」テーマの「カスタマイズ」をクリックします。左側のサイドバーで、ヘッダーセクションを見つけて選択します。セクションの下で、クリックしてブロックを追加し、 [タブ付きメガ メニュー]を選択します。 2.主な設定を行う [メニュー項目]で、メガ メニューをトリガーするメニュー項目の名前 (「ショップ」など) を入力します。ボタンのラベルを入力します (例: 「すべての製品を表示」)。ボタンを非表示にするには、空白のままにします。ユーザーをコレクションやカテゴリにリダイレクトするなど、必要に応じてボタン リンクを設定します。見出し 1 (例: 「コレクション」) と見出し 2 (例: 「最も人気のある」) を定義してセクションにラベルを付けます。製品ベンダーや価格の表示など、モバイル レイアウトのオプションを切り替えます。 3.メガメニューへのタブの追加最初のスクリーンショットに見られるように、タブ付きメガ メニューは垂直レイアウトで 5...

Read more

メタフィールド経由で 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...

Read more

製品アイコンの設定方法

この記事では、製品アイコンを設定する方法を段階的に説明します。 主な手順は以下のとおりです。エントリの作成と追加[メタオブジェクト] Product spec [メタオブジェクト]の作成Product spec管理ダッシュボード>セットアップ アイコン[1] >カスタム データ[2] > メタオブジェクト定義フィールドの下の定義の追加[3] 。 これらをクリックすると、 「メタオブジェクト定義の追加」ウィンドウが表示されます。関数が正しく動作するためには、以下の指示どおりに入力する必要があります (上も含む)。 名前[4] - 入力Product specフィールド[5] - [フィールドの追加]をクリックします。目的は、 Title 、 description 、およびIconという名前の 3 つのフィールドを追加することです。 上の画像に示すように、「単一行テキスト」タイプはタイトルと説明に使用され、「ファイル」はアイコンに使用されます。以下の表に従って、これら 3 つのフィールドを設定します。タイトル説明アイコン名前- Titleを入力します値の種類を 1 つ選択します。 名前- Descriptionを入力します値の種類を 1 つ選択します。 名前- Iconを入力ファイルの種類を 1...

Read more

製品ページで人気のアップグレード (製品バンドル) を設定する方法

導入製品バンドルブロック (デモでは人気アップグレードとも呼ばれます) は、製品ページの製品情報セクションにあるカスタマイズ可能な機能です。これにより、販売者は複数の関連製品を厳選されたセットとして展示および販売できるようになり、アップセルの機会が強化されます。このガイドでは、コンセプト テーマでの製品バンドルブロックのセットアップと構成について説明します。デモ製品であるSoundrollをチェックして、実際の機能を確認してください。 💡注:この機能は次から利用できます。コンセプト v4.0.0のみ。ステップ 1: 製品バンドル ブロックの追加 Shopify 管理画面で、 [オンライン ストア] > [テーマ]に移動します。テーマの「カスタマイズ」をクリックします。製品テンプレートに移動します。セクション リストのサイドバーで、「製品情報」セクションを見つけます。必要な位置で[ブロックの追加]をクリックし、 [製品バンドル]を選択します。ステップ 2: 製品バンドル ブロックの構成ブロックが追加されると、サイドバーにその設定が表示されます。 1. 表示設定見出し: これはバンドル セクションの上に表示されるタイトルです (例: 「人気のアップグレード」)。このテキストは目的に合わせて変更できます。カスタム アイコン: 見出しに視覚的に追加するアイコンを選択します。アイコンの幅: アイコンのサイズを調整します。最初に開いた状態で表示: セクションがデフォルトで展開されるか折りたたまれるかを切り替えます。 2. バンドルの製品の選択ニーズに応じて、このセクションでは製品をセットアップする 3 つの方法があります。 すべての製品にわたって製品をグローバルに設定するこの方法では、すべての商品ページに同じバンドル商品が適用されます。 「製品」フィールドの下にある「選択」ボタンをクリックします。 製品選択メニューが表示されます。バンドルの一部として提供したい関連製品を複数選択しますこの方法で選択された製品は、ストア全体のすべての製品にグローバルに適用されます。 💡注:この方法は、すべての商品ページにアップセル商品の固定セットが必要な場合に便利ですが、個々の商品ごとに動的な商品バンドルを行うことはできません。 メタフィールドを使用して個々の製品に製品を設定するストア全体で同じ製品を使用するという制限を克服するには、メタフィールドを使用して、製品ページごとに一意の製品リストをリンクします。製品を手動で選択する代わりに、メタフィールドを使用して、各製品のバンドル製品を個別に動的に表示できます。 [選択]ボタンの横にあるデータベース...

Read more

ブラウザの互換性

この記事では、さまざまなデバイス間で最高のエクスペリエンスを実現するための要件について概説します。デスクトップブラウザの要件テーマのレイアウト、閲覧エクスペリエンス、および購入アクションは、次のデスクトップ ブラウザーおよびバージョンと互換性があります。 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 モバイル-...

Read more

製品にカスタムラベルを追加できますか?

BeYours テーマを使用してカスタム商品ラベルを Shopify ストアに追加することは、特別オファー、新着商品、またはユニークな機能を強調する優れた方法です。このガイドでは、プロセスを段階的に説明します。 メタフィールドのセットアップカスタムラベルを追加する前に、Shopify 管理パネルで必要なメタフィールドを設定する必要があります。 Shopify 管理パネルへのアクセスShopify 管理パネルにログインします「設定」>「カスタムデータ」に移動します製品ラベルのメタフィールドの作成カスタムデータ設定で「製品」を選択します 「定義の追加」をクリックします次の詳細を入力します。名前:「製品ラベル」名前空間とキー: 「theme.label」説明: [コンテンツ タイプの選択] をクリックし、[テキスト] を選択します。テキスト形式:「単一行テキスト」 「値のリストを受け入れる」にチェックを入れます「保存」をクリックします製品ラベルの色メタフィールドの作成もう一度「定義の追加」をクリックします次の詳細を入力します。名前:「製品ラベルの色」名前空間とキー: 「theme.label_color」説明: 「コンテンツタイプ」をクリックし、「カラー」を選択します。 「保存」をクリックします製品へのラベルの貼り付けメタフィールドの設定が完了したので、商品へのラベルの適用を開始できます。製品の編集Shopify 管理パネルの「製品」に移動しますラベルを追加したい商品を選択してくださいラベルと背景色の追加[製品ラベル] フィールドを見つけて、希望のラベル テキスト (例: 「新製品」、「セール」、「ベストセラー」) を入力します。 「製品ラベルの色」フィールドを見つけて、好みの背景色を選択します。 「保存」をクリックして変更を適用します。 ラベルのプレビュー新しいラベルがどのように表示されるかを確認するには:ストアのフロントエンドにアクセスしてください編集した製品に移動します選択した背景色でカスタム ラベルが製品カードに表示されるはずです。 トラブルシューティングラベルが表示されない場合:変更を保存したことを確認してくださいConcept テーマの最新バージョンを使用していることを確認してくださいブラウザのキャッシュをクリアしてページを更新してくださいこれらの手順に従うことで、コンセプト テーマを使用してカスタム商品ラベルを Shopify ストアに追加することができました。さらに支援が必要ですコンセプト テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp...

Read more

「Concept リリースノート」

バージョン 5.2.0 - 2025年12月2日 このアップデートには、商品プレゼンテーション、モバイルインタラクション、全体的なテーマ機能の改善が含まれています。以下は、追加された内容と修正された内容の概要です: 追加 2番目の画像を表示したり、複数の画像をスライドしたりすることを含む、商品カードの両方のホバー動作をサポートする設定を追加しました。 スワイプジェスチャーよりも目に見えるボタンを好む人のために、モバイルドロワービューに閉じるボタンを表示する設定を追加しました。 現在のバリアントが利用できないか売り切れの場合に、在庫のあるバリアントを自動的に選択する機能を追加しました。 パンくずリストで商品タイトルを切り替えるサポートを追加しました。 商品タイトルの行を制限し、テキストが最大値を超えた場合に「...」を表示するサポートを追加しました。 コラージュセクションで12カラムのグリッドシステムのサポートを追加しました。 商品ページの人気商品にバリアントドロップダウン選択を追加しました。 タブ付きメガメニューに表示される商品の最大数を制御する設定を追加しました。 修正 選択された数量が利用可能な在庫を超えた場合にカートドロワーでカートカウントが正しくない問題を修正しました。 Show On Model機能がビデオメディアタイプをサポートしていなかった問題を修正しました。 サブコレクションとShow On Model機能がモバイルデバイスで表示されなかった問題を修正しました。 商品またはブログの説明のiframeビデオがモバイルでレスポンシブでなかった問題を修正しました。 モーション軽減が有効になっている場合、フィルタリング後に商品カードが表示されないモバイルの問題を修正しました。 バージョン 5.1.0 - 2025年10月21日 このアップデートは、使いやすさの向上、パフォーマンスの安定性、および視覚的コントロールの強化に焦点を当てています。以下は、このバージョンの完全な変更履歴です。 追加 ストーリーテリングのフローを強化し、視覚的な進捗状況の追跡を提供するために、新しいScrollspy Navigationセクションを追加しました。 製品の追加情報を表示するために、商品ページにバッジのサポートを追加しました。 修正 モバイルでポートフォリオセクションの列が正しく配置されない表示バグを修正しました。 Freescrollレイアウトで単一の商品画像を使用すると画像が重複する問題を修正しました。 コレクションタイトルが長い場合のコレクション一覧ページでのコレクション数の配置が正しくない問題を修正しました。 テキストハイライト効果を使用した際のスクロールバナーでの予期しないスペーシングを修正しました。 タブ付きメガメニュー内の商品カード画像が過度に大きくなる問題を修正しました。 タブ付きメガメニュー内の見出しレイアウトの破損を修正しました。...

Read more

カートドロワーセクションにコレクションアイコンを設定する

Conceptでは、このようにカートドロワーに表示されるアイコンをカスタマイズできます。この機能は、特にカートが空の場合に、顧客がコレクション リストを通じて製品を探索するのに役立ちます。 この記事では、各コレクションのアイコンを設定するためのステップバイステップのガイドを提供します。手順: まず、「アイコン」メタフィールドを作成します。管理者ダッシュボード>設定>カスタム データ>コレクション>定義の追加。 このメタフィールドの設定ウィンドウが表示されます。 正確に次のように設定します。名前- Iconネームスペースとキー- theme.iconタイプを選択し、 [ファイル] を選択して、 [1 つのファイル] を選択します。 たとえば、次の画像はサンプル設定を示しています。私たちの例と正確に一致するように記入してください。 次に、 「保存」をクリックして「アイコン」メタフィールドの作成を完了します。次に、必要なコレクションにメタフィールド値を設定します。管理ダッシュボード>製品>コレクション> 目的のコレクションを選択します。この例では、 Seating を選択します。 Seating コレクションで、 [Metafields]まで下にスクロールし、 [Icon]を選択します。 表示したいアイコン画像を選択します。 「保存」をクリックして終了します。第三に、選択したコレクションをカート引き出しセクションに表示します。 [テーマ設定] > [オーバーレイ] グループで > [カート ドロワー]を選択し、セクション設定の[空のカートの推奨事項]まで下にスクロールし、 [コレクションの選択] を選択します。 この例では、手順 2 でアイコン メタフィールドを設定した[座席]を選択します。 注:アイコンが設定されている限り、任意のコレクションを選択できます。そうでない場合は、アイコンなしで表示されます。最後に、他のコレクションのアイコンをさらに追加するには、追加のコレクションごとにステップ...

Read more

Concept テーマにカスタム フォントを追加する

Shopify は、ストアで使用できる何百もの無料フォントを提供しています。ただし、ブランド ガイドラインに合わせるためにカスタム フォントを使用する必要がありますが、Shopify ではサポートされていません。テーマに追加することはできます。フォントカスタム前フォントカスタム後 以下の 2 つの方法のいずれかを使用して、コンセプト テーマのフォントをカスタマイズできます。 Liquid コードを編集する(強く推奨)これを達成するための 9 ステップのガイドは次のとおりです。まずフォントを利用できるようにする必要があります。一部のフォントにはライセンスがあるため、使用するために適切に購入するようにしてください。当社のサポート チームは、必要なフォントの入手を担当しません。次に、追加するフォント スタイルごとに、 .woffと.woff2形式の 2 つのファイルを用意します。これは、追加したフォントがすべての種類のブラウザで読み取れることを確認するためです。 十分なファイルがあれば、 [管理者ダッシュボード] > [コンテンツ] 1 > [ファイル] 2 > [アップロード] 3からアップロードします。 アップロードしたすべてのフォント ファイルの右側には、コピー行為のためのファイル リンクを提供するチェーン ボタンがあります。 次に、管理者ダッシュボードに戻り、 [オンライン ストア] 1 > [テーマ] 2をクリックし、コンセプト...

Read more

記事にカスタムラベルを追加するにはどうすればよいですか?

Concept は、次のように記事タグの色のカスタマイズをサポートしています。 この設定ではメタフィールドを利用するため、メタフィールド定義を追加し、記事に色を割り当てるだけです。このページでは2 つの新しいメタフィールドの追加記事のメタフィールド値の割り当て必須前提条件:標準またはカスタムのメタフィールドを適用する前に、メタフィールド定義の追加に関する Shopify のガイドを必ず確認してください。 標準定義の追加カスタム定義の作成注記:この手順は 1 回だけ実行する必要があり、すべての記事に影響します。すでにこれを行っている場合はスキップしてください。メタフィールドはテーマとは独立して機能するため、テーマを更新または再インストールするときにこの手順を再度実行する必要もありません。 2 つの新しいメタフィールドの追加このパートでは、タグの色とタグの背景という2 つの新しいメタフィールドを作成する手順を説明します。 Shopify 管理者ダッシュボード> [設定]で。 [カスタム データ] > [ブログ投稿]をクリックします。 以下の表に概説されている手順に従ってください。左側の列は、タグの色の作成の詳細を示します。右側の列はタグの背景に焦点を当てています。各メタフィールドを作成した後は、必ず「保存」をクリックしてください。タグの色タグの背景ブログ投稿を選択した後、右上隅にある[定義の追加]ボタンをクリックします。 ブログ投稿を選択した後、右上隅にある[定義の追加]ボタンをクリックします。 「ブログ投稿メタフィールドの追加」定義で、以下を含むタグの色メタフィールドの詳細を設定します。名前- Tag color名前空間とキー- theme.tag_colorコンテンツ タイプを選択し、 [色]と[1 つの値]を選択します。 「ブログ投稿メタフィールドの追加」定義で、以下を含むタグ背景メタフィールドの詳細を設定します。名前- Tag background名前空間とキー- theme.tag_backgroundコンテンツ タイプを選択し、 [色]と[1 つの値]を選択します。 「保存」をクリックして定義を保存します。 「保存」をクリックして定義を保存します。これら 2 つのメタフィールドを作成すると、定義リストにタグの色とタグの背景が表示されるようになります。 記事のメタフィールド値の割り当て管理パネルから、ブログ投稿に移動します。ラベルを追加する記事を選択します。この例では、「ステレオ...

Read more

トラブルシューティング: ビデオ バナーがモバイルで機能しない

ほとんどの iOS および Android デバイスでは、バッテリー節約モードにより、バッテリーを節約するためにビデオの自動再生が自動的に無効になります。ただし、顧客は再生アイコンをタップするだけでビデオを視聴できます。 バッテリー節約モードユーザーの操作が必要タップするとビデオが再生されますさらに支援が必要ですコンセプト テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp コミュニティに参加し、最新情報、ニュース、お知らせを入手してください。

Read more

コレクションページでのスクロールテキスト背景アニメーションの設定

このガイドでは、コレクション ページにテキストのスクロール領域を挿入するための手順を段階的に説明します。実際の動作を確認するには、以下のビデオをご覧ください。 この機能はメタフィールドを介して利用されるため、このガイドは 2 つの主要な部分で構成されています。パート 1 - 必要なメタフィールドを作成するパート 2 - テキストの設定1. 必要なメタフィールドを作成しますまず、「 Marquee 」という名前の新しいメタフィールドを作成します。このメタフィールドはすべてのコレクションに表示されます。管理者ダッシュボードで、[設定] > [カスタム データ] > [コレクション] > [定義の追加] を選択します。 この新しいメタフィールドを設定するには、次の正確な手順に従ってください。名前- Marquee名前空間とキー- theme.marquee タイプを選択し、 [単一行テキスト]を選択してから、 [1 つの値] を選択します。 上記の手順を完了すると、「Marquee」という名前の新しいメタフィールドが作成されます。 このマーキー メタフィールドは、リストされたコレクション メタフィールドの中から見つけることができます。 2. テキストの設定「マーキー」メタフィールドにテキストを追加します。このテキストはコレクション ページに表示されます。たとえば、「ワイヤレス ヘッドフォン」コレクションを例として使用してみましょう。管理者ダッシュボード> [製品] >...

Read more