「Concept」サポート

How to setup color swatches?

Whenever you Enable color swatches, Concept theme give you two options for displaying Color swatches: Custom image and Variant image. Please review the table below to comprehend this article more easily. Color swatch displaying Disable color swatches Custom images Variant images...

Read more

Featured Product Section Guide

The Featured product section allows you to highlight one specific product on any supported template, such as the homepage, landing pages, or custom pages. It works like a compact product page section. You can show product media, product title, price,...

Read more

How to Set Up Gift Wrapping in Concept version 5.0.0 and later

In Concept, you can offer a Gift wrapping service directly in the cart. The gift wrapping option can appear in both the Cart drawer and the Cart page, depending on your cart settings and storefront layout. Since the version 5.0.0,...

Read more

How to Set Up Product Bundle / Popular Upgrades in product page Concept theme

Since Concept v4.0.0, the theme includes a Product bundle block. On our demos, this block may also be called Popular upgrades. The Product bundle block is available inside the Product information section on product pages. It allows merchants to display...

Read more

How to setup color swatches CONCEPT theme

Color swatches help customers see product color options visually instead of reading color names only. In Concept, color swatches can be used in multiple places: Product page variant picker Product cards on collection, search, featured collection, recommendations, and recently viewed...

Read more

Scrollspy Navigation Section

A long landing page often contains multiple content sections, such as an introduction, product details, ingredients, reviews, FAQs, or a size guide. In this case, customers may need an easier way to jump between sections without manually scrolling through the...

Read more

Setup Show On Model Feature

Product images are usually displayed as clean product-only images on collection and search result pages. However, in some cases, you may want customers to see how a product looks on a model or in a lifestyle image without replacing the...

Read more

Compare products

How to Set Up Product Comparison in Concept Since Version 5.0.0, Concept includes the Product Comparison section. This section allows customers to compare multiple products side-by-side, making it easier for them to review product differences and choose the best option....

Read more

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

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

Read more

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