「Concept」サポート

Browser compatibility

This article is about the requirements for best experience across different devices. Desktop browser requirements   Our theme layout, browsing experience, and purchasing actions support the following desktop browsers and releases: Safari - versions 16, 17, 18, or later for...

Read more

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

Concept は、コレクション ページまたは注目のコレクション セクションに表示される製品カードへのカスタム ラベルの追加をサポートしています。 各製品は 1 つ以上のカスタム ラベルで装飾でき、すべてカスタマイズ可能な背景色を共有します。この機能はメタフィールドを利用するため、メタフィールド定義を追加し、目的の製品にラベルを割り当てるだけです。このページでは新しいメタフィールド定義の追加商品のラベルと背景色の設定新しいメタフィールド定義の追加場合によっては、ケースバイケースで製品情報を表示する必要がある場合があります。 Conceptテーマの動的ソース機能を使用すると、メタフィールドを使用してカスタマイズされた製品情報を作成でき、独自の製品仕様に多用途のソリューションを提供できます。このガイドでは、テーマのカスタマイズの可能性を最大限に引き出すための動的なソースとメタフィールドの活用について詳しく説明します。このページでは新しいメタフィールド定義の追加動的ソースを接続して製品にメタフィールド値を割り当てる新しいメタフィールド定義の追加必須前提条件:標準またはカスタムのメタフィールドを適用する前に、メタフィールド定義の追加に関する Shopify のガイドを必ず確認してください。 標準定義の追加カスタム定義の作成注記:この手順は 1 回だけ実行する必要があり、すべての製品に影響します。すでにこれを行っている場合はスキップしてください。メタフィールドはテーマとは独立して機能するため、テーマを更新または再インストールするときにこの手順を再度実行する必要もありません。 「製品特性」メタフィールドを追加するには、次の手順に従います。 Shopify 管理者ダッシュボード> [設定] > [カスタムデータ] 。新しいフィールドを追加するストアの部分を選択します。たとえば、新しいフィールドをProductsに追加します。 製品を選択した後、右上隅にある「定義の追加」ボタンをクリックします。 [製品メタフィールド定義の追加] ボックスで、次のような新しいメタフィールドの詳細を設定します。 名前- Product label名前空間とキー- theme.label説明(オプション) - 「製品を説明する重要な情報を追加します。」という説明行を追加します。コンテンツ タイプの選択- 行テキスト、整数、日付と時刻、ファイルなど、さまざまなコンテンツ タイプがあります。この設定では、 Text を選択します。 [単一行テキスト]を選択し、 [値のリスト]を選択します。値のリストを使用すると、製品に複数のラベルを追加できます。 「保存」をクリックして定義を保存します。これまでに、定義のリストにProduct ラベルが表示されているはずです。...

Read more

Concept release notes

Version 3.0.0 - December 18, 2024 This update brings significant new features, enhanced customization options, and resolves important bugs for an improved user experience. Added We added breadcrumb block to Image With Text Overlay and Images With Text Overlay sections....

Read more

Set up collection icons in Cart drawer section

In Concept, you can customize the icons displayed in Cart drawer like this. This function helps your customers to explore your products via the collection list, especially when their cart is empty. This article provides a step-by-step guide to set...

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 デバイスでは、バッテリー節約モードにより、バッテリーを節約するためにビデオの自動再生が自動的に無効になります。ただし、顧客は再生アイコンをタップするだけでビデオを視聴できます。 バッテリー節約モードユーザーの操作が必要タップするとビデオが再生されますこの情報がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。 "

Read more

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

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

Read more

整理と優先順位付け: テキストの強調表示

広告が混雑している状況では、読者の注意を引くことが難しい場合があります。コンセプトテーマのハイライト テキスト機能を使用すると、重要なメッセージを戦略的に強調し、視聴者の注目を最適な効果に導くことができます。この機能は、以下の表にいくつかの例を示すように、さまざまな強調表示オプションによって容易になります。なし大胆な太字と斜体派手な下線スケッチの下線波線の下線この記事は、ハイライトされた機能の構成について説明しています。この機能は、リッチ テキスト セクション、ショップ ザ ルック セクション、注目のコレクション セクション、見出しブロック、テキスト ブロックなど、Web サイト全体のさまざまなテキスト セクションおよびブロックにシームレスに統合されています。セクションとブロックの両方で、同様の強調表示されたテキスト機能の設定が提供されますが、理解しておくべき重要なニュアンスがいくつかあります。テキストの入力と書式設定:強調表示する前に、専用領域にテキストを入力します。ここで、太字や斜体などの基本的な書式設定をセクションや個々の単語に適用できます。 ハイライトされたテキストの設定:特定の単語を強調表示するには、エディターの [斜体] ボタンを使用して単語を斜体で囲みます。 ハイライトオプション:ハイライトすると、次の 2 つのオプション セットにアクセスできます。ハイライトされたテキスト-テキストの色、テキストの背景カバー、派手な下線タイプ、通常の下線タイプ、ステンシル テキスト、さらには手書きの落書きなど、さまざまなスタイルから選択します。この例では、「サウンド」という単語が「テキストの背景カバー」によって強調表示されています。 ハイライトされた落書き-手書きの落書きを選択すると、このグループの追加オプションがアクティブになります。このグループでは、 [基本下線] 、 [スケッチ下線] 、 [波線下線] 、および[波線下線 2]などのオプションを使用して手描き効果をカスタマイズできます。この例では、「soun」という単語が「基本下線」で強調表示されています。 最後に、 「保存」をクリックして設定を終了します。この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。

Read more

1 つのオプションに複数の画像を関連付けることはできますか?

" Shopify では商品オプションに写真を追加できるため、顧客は各選択肢がどのようなものかを確認できます。ただし、Shopify の規制により、1 つのオプション値に 1 つの画像のみを関連付けることができます。では、問題は、複数の画像を 1 つのオプションにどのように関連付けるかということです。 Conceptに答えがあり、 1 つのオプション値に対して特定の画像を指定できます。この機能は特に色のオプションに適していますが、他の目的にも完全に使用できます。 このページでは要件オプションを選択してください画像のALTタグを編集する独自の代替テキストを設定 (または保持)要件この記事は、 Conceptテーマでのセットアップについて説明します。バリアントを選択した後は、[他のバリアントのメディアを非表示にする] をオフにする必要があります。このオプションは、ネイティブの Shopify 動作と互換性があり、1 つの画像のみを 1 つのオプション値に関連付けます。 Conceptでは、このオプションは次のセクションで使用できます。注目の製品セクション。製品情報セクション (製品ページ内)必要なオプションを選択してください管理画面で製品を確認し、画像を分類するオプションを選択します。以下の例では、 Colorを選択することにしました。 Flow Harmony製品には、ゴールド トーン、ブラック、チェスナット、ネイビー、クリムゾン シャドウの色があり、ユーザーがオプションを選択したときにのみそれぞれの画像を表示したいと考えています。 画像のALTタグを編集するalt タグを編集して、画像が属する「オプション名とオプション値」を指定する必要があります。画像上にカーソルを置き、6 つの点のボタンをクリックして画像の情報を開きます [代替テキストの追加] をクリックします。 選択したオプション名をオプション値と組み合わせて使用​​します。ここでの構文は非常に重要であり、次の順序で指定する必要があります。 # (ハッシュタグ文字) option-name (小文字、すべてのスペースをハイフンに置き換えます) _ (アンダースコア文字)...

Read more

私の製品にカウントダウンタイマーを追加できますか?

Concept を使用すると、製品ページにカウントダウン タイマーを組み込んで、割引期限が切れるまでの残り時間を視覚的にマークできます。これらのタイマーは緊迫感を効果的に与え、顧客に迅速な行動を促し、割引がなくなる前にチャンスをつかむよう促します。 この機能はメタフィールドに基づいて動作します。したがって、メタフィールド定義を追加し、必要な製品のカウントダウンを設定するだけです。このページではカウントダウン資格メタフィールド定義の追加製品のカウントダウンを設定するカウントダウンを表示するカウントダウン資格カウントダウンタイマーは、商品が低価格で販売されている場合にのみ機能します。したがって、カウントダウンを追加する前に、商品の価格比較を設定していることを確認してください。そうしないと、カウントダウンが無効になります。メタフィールド定義の追加特定の製品にカウントダウン (メタフィールド値) を追加する前に、この情報に必要なメタフィールド定義を追加する必要があります。注記この手順は 1 回だけ実行する必要があり、すべての製品に影響します。すでにこれを行っている場合はスキップしてください。メタフィールドはテーマとは独立して機能するため、テーマを更新または再インストールするときにこの手順を再度実行する必要もありません。 Shopify 管理画面> [設定] > [メタフィールド] > [製品]から。 [定義の追加] をクリックします。 [製品メタフィールド定義の追加] ボックスで、次のような新しいメタフィールドの詳細を設定します。名前- Product countdown名前空間とキー- theme.countdown説明(オプション) - 「製品を説明する重要な情報を追加します。」という説明行を追加します。コンテンツ タイプの選択- 行テキスト、整数、日付と時刻、ファイルなど、さまざまなコンテンツ タイプがあります。この設定では、 [日付と時刻]を選択します。 [日付と時刻]を選択します。これを選択すると、カウントダウンの正確な時間を指定できるようになります。 「保存」をクリックして定義を保存します。これまでに、定義リストに製品カウントダウンが表示されているはずです。 カウントダウンの設定管理者の[製品]内で、カウントダウンを追加する製品に移動します。 [メタフィールド]まで下にスクロールし、 [すべて表示]をクリックして製品のメタフィールド値を開きます。 ここで製品のカウントダウンが表示されるはずです。 有効期限を設定するには、 「製品カウントダウン」フィールドをクリックします。ここでは 2 つの入力が表示されます。1 つは日付用、もう 1...

Read more

Concept テーマの画像サイズガイドライン

" Conceptでは、画像サイズに厳密なルールはなく、任意のサイズを選択できます。ただし、最適な表示のために、この記事ではサイトに完璧に表示される画像サイズを推奨します。このページでは さまざまなセクションとブロックの画像サイズConceptで最適な結果を達成するには、以下の表で詳しく説明されているように、さまざまなセクションにさまざまな画像サイズを使用することをお勧めします。画像の場所画像サイズヘッダーグループプロモーションイメージプロモーション画像はメガメニューセクションにあります。 デスクトップとモバイルデバイスの両方に推奨される画像サイズは、選択したアスペクト比によって異なります。画像に適応- 画像の比率を維持します正方形- 少なくとも 2000 x 2000 ピクセルポートレート- 少なくとも 2000 x 2500 ピクセル風景- 少なくとも 2400 x 1600 ピクセルワイド- 少なくとも 2400 x 1350 ピクセルオーバーレイグループニュースレターのポップアップ画像デスクトップとモバイルブラウザの両方の推奨サイズ: 1080 x 1080 ピクセル。テンプレートグループコラージュのブログ投稿ブログ投稿の注目の画像を設定するには、 Shopify 管理ダッシュボードで[オンライン ストア] > [ブログ投稿]に移動します。次に、投稿をクリックし、右側の列で[注目の画像]ボックスを見つけて画像を追加します。 デスクトップとモバイルブラウザの両方で推奨されるサイズ: 1600 x 900 ピクセル。カウントダウンタイマー推奨サイズ:デスクトップブラウザ: 2200...

Read more

「製品の詳細」セクションで主要な製品の仕様を強調表示します。

製品情報を効果的に提示する能力は、電子商取引の生命線です。しかし、商人は、豊かさが過負荷に変わるというもどかしいパラドックスに直面することがよくあります。厳格なレイアウト、無味乾燥なプレゼンテーション、雪崩のように情報が押し寄せると、製品の魅力がかき消され、顧客は当惑し、関心を失ってしまいます。これらの障害に対処するために、 Conceptテーマは、製品コミュニケーションを合理化し、最適化するように設計された強力なツールである製品詳細セクションを提供します。このセクションでは、販売業者が仕様に焦点を当てて、明確かつ簡潔な製品説明を作成できるようにします。 このチュートリアルでは、「製品の詳細」セクションを段階的に構成する方法を示します。 A. この機能はどこにありますかD. 製品詳細セクションの設定A. この機能はどこにありますかテーマ エディターを使用して製品ページで、テンプレートセクション グループの下に製品の詳細セクションを作成します。 この構成セクションでは、さまざまなカスタマイズ オプションが提供され、簡単にナビゲーションできるように 3 つの個別のブロック (説明、折りたたみ可能な行、および仕様ブロック) にまとめられています。 B. 製品詳細の設定セクションの設定ブロックの設定1. セクションの設定「製品の詳細」セクションの設定セクション設定説明製品詳細最初の折りたたみ可能な行を開く最初の折りたたみ可能な行を開くことができます。 仕様の見出しテキストを入力します見出し見出しセクションのタイトル。 見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。小見出し見出しの小見出しは見出しの上に配置されます。説明見出しの説明テキストは見出しの下に配置されます。ハイライトされたテキストハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。文字の色文字の背景色派手な下線通常の下線ステンシルテキスト手描きの落書きハイライトされた落書き強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。この設定では、テキストを強調表示する 5 つの方法が提供されます。丸基本的な下線スケッチの下線波線の下線波線の下線 2色必要に応じて、次のセクションの色をカスタマイズできます。文章背景背景のグラデーションハイライトハイライトグラデーションボタンのテキストボタンの背景ボタンの背景のグラデーションセクション上部パディングと下部パディングを0px...

Read more

検索ページ: セクションとブロック

デフォルトでは、テンプレート グループには 2 つのセクションが含まれています。検索結果最近見た[セクションの追加]リストには、さらに最大 36 個のセクションを追加できます。 1. 検索結果検索結果セクションの設定セクション設定設定説明検索結果ページごとの商品検索後にページに表示される商品数を6件から50件に変更します。デスクトップ上の列の数デスクトップブラウザに表示される列数をカスタマイズします: 2 列または4 列。モバイルの列数モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。フィルタリングと並べ替えフィルタリングを有効にするSearch & Discovery アプリを使用してフィルターをカスタマイズします。 もっと詳しく知る。フィルターを表示できるようにします。フィルターを折りたたむユーザーがフィルター オプションを非表示または表示できるようにします。デスクトップフィルターレイアウトもっと詳しく知る。顧客はナビゲーション設定のフィルターに基づいて検索結果をフィルターできるようになります。色見本を有効にするセットアップ手順を表示します。色見本を表示できるようにします。並べ替えを有効にする顧客は以下に基づいて検索結果を並べ替えることができます。価格、低価格から高- 製品を最低価格から最高価格まで表示します。価格、高値から低値- 製品を最高価格から最低価格まで表示します。ブログポストカードタグを表示管理ブログ投稿のタグを画像付きで表示します。カテゴリを表示カテゴリのリストを表示します(例:製品、コンテンツ... )上映日ブログ投稿の公開日を表示します。コメント数を表示公開されたコメントの総数を表示します。著者を表示ブログ投稿の作成者を表示します。見出し見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。セクション上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。セクション区切り線を表示このセクションの上に行区切りを表示します。セクションを全幅にするコンテナを全幅にします。断面を丸くする上の 2 つの角に丸いエッジを適用します。 カスタムCSSこのセクションにカスタム CSS を追加します。利用可能なブロック:プロモーションブロック1.5...

Read more

パスワードページ: セクションとブロック

オンライン ストアでパスワード保護が有効になっており、顧客が Web サイトにアクセスしようとすると、パスワード ページが表示されます。このページには 3 つの主要なセクション グループがあります。パスワード ヘッダー、テンプレート、およびパスワード フッター。それぞれのセクションには複数のセクションが含まれています。ブロックを使用してセクションを追加できます。この記事では、デフォルトのパスワード ページのすべてのセクションとブロックの概要を説明します。このページではパスワードヘッダーテンプレートグループパスワードフッター1. パスワードヘッダーこのページのヘッダーには、パスワード ヘッダー セクションのみが含まれます。パスワードヘッダーセクションの設定テーマ設定でロゴを編集します。セクション設定設定説明透明ヘッダー最初の位置にセクションを追加して、スライドショーやテキストオーバーレイ付きの画像などの透明なヘッダーを許可します。文字の色テキストの色。ボタンのテキストボタンのテキストの色。ボタンの背景ボタンの背景色。背景のグラデーション背景のグラデーションカラー。ポップアップこれらの設定はポップアップ ウィンドウを制御します。文章テキストの色。背景背景色。ボタンのテキストボタンのテキストの色。ボタンの背景ボタンの背景色。ボタンの背景のグラデーションボタンの背景のグラデーション。かぶせるオーバーレイの色。セクション上部のパディングセクションの上部内部空間の高さを決定します。 0px ~ 120px の範囲で、算術的に 4px ずつ増加します。底部のパディングセクションの下部内部空間の高さを決定します。 0px ~ 120px の範囲で、算術的に 4px ずつ増加します。 カスタムCSSこのセクションにカスタム CSS を追加します。このセクションにはブロックを追加できません。 2. テンプレートグループこのページのテンプレートには、デフォルトでは電子メール サインアップ バナー セクションのみが含まれています。 [セクションの追加]リストには、さらに最大 30 個のセクションを追加できます。電子メールサインアップバナーセクションの設定セクション設定設定説明メール登録バナー購読者は、「承認されたマーケティング」顧客リストに自動的に追加されます。もっと詳しく知る。透明なヘッダーを許可する透明なヘッダーを許可します。この設定は、このセクションが最初のセクションである場合にのみ適用されます。透明なフッターを許可する透明なヘッダーを許可します。この設定は、このセクションが最後のセクションである場合にのみ適用されます。画像セクションの背景画像を選択/アップロードします。デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。画像に適応- 画像の元のアスペクト比を維持します。 400ピクセル...

Read more