「Be Yours」サポート
Setup Header Sidebar in Be Yours
This article details the step-by-step setup of the Header Sidebar section, a tool for displaying deals or promotions for specific events and holidays, such as the up-coming season. < 💡 Note: This feature is available from Be Yours v8.2.0 only....
バージョン 8.3.3 - 2025年6月30日 このアップデートは、テーマエディターへのアクセスを妨げる重要な問題を解決します。 バージョン 8.3.2 - 2025年6月13日 このアップデートは、最新のテーマストアの再設計要件に合わせて、テーマのファイル構造を再編成します。 バージョン8.3.1 - 2025年5月14日このアップデートでは、いくつかの小さなバグが修正され、デバイス間のパフォーマンスがよりスムーズになり、互換性が向上します。修理済み特定の古いデバイスでコレクション カードの見出しが上部に押し出され、判読できなくなる問題を修正しました。設定で空白のままにしてもラベルが表示されたままになる、画像比較セクションの問題を解決しました。モバイル デバイスでヘッダー サイドバーを閉じることができず、画面全体が応答しなくなる問題を修正しました。バージョン 8.3.0 - 2025 年 5 月 13 日このアップデートでは、パフォーマンス、ユーザーエクスペリエンス、コンテンツの柔軟性に重点を置いた強力な機能強化が提供されます。新しいビジュアル機能、拡張されたメディアサポート、そして複数のセクションにわたる機能向上のための修正が導入されています。追加したスライドショーセクションにビデオのサポートを追加しました。ポップアップ内に表示されるオプションのカスタム画像と説明を含む、マルチカラム セクションにビデオ サポートが追加されました。注目のコレクション セクションにドラッグ機能の切り替えオプションを追加しました。いくつかの新しいハイライト スタイルを含む、複数のセクションにわたるハイライト テキストのサポートが導入されました。カート ドロワーの更新をトリガーする JavaScript ベースの機能を実装し、サードパーティ アプリケーションとの互換性が向上しました。その他の修正と改善一貫性と読みやすさを考慮して、グローバルハイライトカラーを改良しました。メニューのハイライト ロジックを更新しました。スライドショー セクションでのスワイプ ジェスチャの応答性が向上しました。サードパーティ アプリとの競合を防ぐため、「loading」キーフレームの名前を「by-loading」に変更しました。更新された Cookie API 標準に従って、Cookie...
バリアントは、製品にさまざまなオプションを作成する優れた方法です。ただし、製品バージョンごとに個別のページが必要な場合でも、それらを元の製品に接続し直す必要がある場合があります。 詳細については、デモを参照してください。 Be Yoursでは、メタフィールドを使用してさまざまな製品をリンクできます。このチュートリアルでは、メタフィールドを使用して兄弟製品スウォッチを作成する方法を段階的に説明します。 新しいコレクションを作成する1.1 コレクションを作成する管理者ダッシュボードで「コレクション」セクションを見つけ、 「コレクションの作成」をクリックします。 Titleでコレクションに名前を付け、テーマ テンプレートを選択します。 この例では、 The endless summerというコレクションを作成し、それをテーマ テンプレートのDefault コレクションに割り当てる方法を示します。 「保存」をクリックして終了します。 1.2.新しい製品を作成し、各製品を指定されたコレクションに統合しますバリエーションごとに個別の商品ページを確立するには、Shopify 管理パネル内でバリエーションごとに個別の商品エントリを作成する必要があります。その後、これらの新しく作成された製品エントリは、指定されたコレクション内に集約される必要があります。管理者ダッシュボード> [製品] > [製品の追加]をクリックします。 総合的な製品情報を入力するための専用ウィンドウが表示されます。詳細については、ここをクリックしてください。製品の詳細。 製品のバリエーションを同じコレクションに割り当てることで、1 つのコレクションに統一します。 「保存」をクリックして終了します。例えば: 3 つの値オプションを持つ製品がある場合は、値ごとに 1 つずつ、合計3 つの製品を作成します。ベイトップセネカ ブラトップシンチシームレス ブラトップ私たちはこれらの新製品を作成し (下の表をご覧ください)、それらをThe Endless Summerコレクションに割り当てました。ベイトップセネカ ブラトップシンチシームレス ブラトップ 合計 5 つの異なる製品エントリを含むコレクションの構築が完了しました。...
顧客はバリアントの混乱にうんざりしていませんか? Be Yours 7.1.0 のオプション テーブルをあなたのヒーローにしましょう。 ここをクリックしてデモをご覧くださいこの視覚的に魅力的で整理されたインターフェイスにより、製品オプションを簡単に比較できるため、顧客は自信を持って完璧な製品を見つけることができます。顧客は製品選択プロセスの明瞭さと容易さに魅了され、コンバージョン率とブランドロイヤルティの向上を体験してください。このページでは要件Be Yours バージョン 7.1.0 が必要です。またはそれ以降。ステップ次の簡単な手順に従って、オプション テーブルセクションをオンにして設定します。 Shopify 管理者ダッシュボードで、 [オンライン ストア] > [テーマ]をクリックします。 [テーマ] ページで、 [Be Yours]テーマを選択し、テーマの[カスタマイズ] ボタンをクリックします。 ホーム ページ(または他のページ テンプレート) > [テンプレートセクション] グループ > [セクションの追加] > [オプション テーブル] をクリックします。 このオプション テーブルセクションは、以下の画像に示すように、プレースホルダーの日付とともに Web サイトの目立つように表示されます。最大 5...
オプション表で製品比較が簡単に!このユーザーフレンドリーなインターフェイスは、簡単に比較できる明確なビジュアルを提供し、顧客の信頼を高め、コンバージョンを増加させる可能性があります。 ここをクリックしてデモに移動してくださいメタフィールドは、店舗の組織に影響を与える製品オプションとは異なり、比較基準に優れた柔軟性を提供します。メタオブジェクトにより、製品情報が適切に構造化されます。たとえば、化粧品店がテーブルを使用して成分をわかりやすく表示していると想像してください。メタオブジェクトはこのデータを保存できるほか、上記のデモで見られるように、より直感的なユーザー エクスペリエンスを実現するために画像やアイコンを追加することもできます。このアプローチによりセットアップが合理化され、製品範囲全体での一貫性が確保されます。要件Be Yours バージョン 7.2.0 が必要です。以降。ステップまず、メタオブジェクトを設定します。新しいメタオブジェクトの作成管理者ダッシュボード> [設定] > [カスタム データ] > [メタオブジェクト定義] で定義を追加します。 メタオブジェクト ウィンドウでは、3 つの特定のフィールドに入力する必要があります。以下の指示に注意深く従ってください。 注:この例は「成分」メタオブジェクトを持つ化粧品に焦点を当てていますが、特定の製品情報に合わせて「名前」と「説明」をカスタマイズできます。名称[1] - Common ingredients説明[2] - Common ingredients フィールドを追加[3] -単一行テキストとファイルを選択します単一行テキスト: 3 つの必須アクションを完了します。 関数が正しく動作するには、名前[1]フィールドにLabelという単語を正確に入力する必要があります。これを表示名として使用するを有効にします[2] 。必要に応じて、必須フィールド[3]を有効にします。ファイル: 2 つの必須アクションを完了します。 関数が正しく動作するには、名前[1]フィールドにIconという単語を正確に入力する必要があります。 [特定のファイルの種類を受け入れる]で、 [画像[2]のみ] を選択します。次に、 「保存」をクリックしてメタオブジェクトの作成を完了します。メタオブジェクトを作成すると、それがリストに表示されます。 メタオブジェクトのエントリを追加管理者ダッシュボード>コンテンツ1 >メタオブジェクト2 >共通成分3を選択...
Be Yours バージョン 7.1.0以降を使用している場合、この情報はあなたに関係します。オンライン小売環境では、色見本は貴重なデジタル ツールとして機能します。特定の製品で利用可能な色のオプションのスペクトルを視覚的に表現することで、顧客の選択を容易にします。色見本なし色見本を有効にする カラースウォッチのセットアップまず、色見本を有効にします製品情報1セクション >バリアント ピッカー2ブロック >カラー スウォッチ3を有効にする 次に、トリガーの設定以下の画像の[1]として、「カラー」をトリガーとして使用します。 [テーマメニュー] > [デフォルトのテーマコンテンツの編集] に移動し、検索バーに「 triggerと入力します。 [Products] > Color Swatch Triggerの下にあります。 この例では、トリガーをColorに設定します。このトリガーは、製品のオプション名の実際の名前と一致するようにカスタマイズできることに注意してください。テーマメニューからトリガー製品内のオプション名 このステップでは、製品のカラー オプション (黒、白など) から値を自動的に取得し、製品ページに設定します。 (下の画像を参照)ページ内製品からの価値 最後に、スウォッチ選択の表示スウォッチを表示するには 2 つのスタイルがあります。バリエーション画像この設定により、色見本は製品のカラー オプションに割り当てられたアバター画像を反映します。 製品の色の値色見本の表示中 次に、 「保存」をクリックして終了します。カスタム スウォッチは次の順序で表示されます。 まず、システムは [テーマ設定] 経由で [構成ボックス] をスキャンします。...
この記事では、コレクション ページでサブコレクションを設定する方法を説明します。 1. まず、 [オンライン ストア] > [ナビゲーション]に移動し、新しいメニューを作成する必要があります。このメニューでは、必要に応じて独自のコレクションの構造を作成します。たとえば、これはデモで作成したものです。 このメニューのすべてのメニュー項目はコレクションにリンクされている必要があることに注意してください。 2. テーマエディター内で、コレクションページに移動します。 [サブコレクション]セクションで、[メニュー] 設定で作成したメニューを選択します。 それだけです。これでサブコレクションが表示されるはずです。さらに支援が必要ですBeYours テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp コミュニティに参加し、最新情報、ニュース、お知らせを入手してください。
オプション テーブルの設定には 2 つのオプションが使用できます。ニーズに最も適したものを選択してください。簡単セットアップ (バージョン 7.1.0 以降):基本的なオプション テーブルには製品設定を使用します。 手順については、ここをクリックしてください。セットアップと一貫性の合理化 (バージョン 7.2.0 以降)メタオブジェクトとメタフィールドを活用して、製品全体で効率的なセットアップと一貫した情報を実現します。 手順については、ここをクリックしてください。さらに支援が必要ですBe Yours テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp コミュニティに参加し、最新情報、ニュース、お知らせを入手してください。
Be Yours のカスタム JavaScript イベント リスナーとトリガー
Be Yours 6.0.0からは、カスタム Javascript イベント リスナーとトリガーを使用できるようになりました。テーマをカスタマイズするときは、カスタム スクリプトを実行したり、3 番目のアプリを統合したりするために、いくつかのイベントにフックすることができます。サポートされているイベントの JavaScript パターンを提供します。 トリガーページがロードされましたカートドロワーの更新をトリガーする製品が Ajax カートに追加されました商品をカートに追加できませんでしたクイックビューモーダルが開きますクイックビューモーダルがロードされましたバリエーションの選択が変更されましたコレクションページが再レンダリングされますトリガーページがロードされましたHTML ドキュメントは完全に解析され、すべての遅延スクリプトがdocument.addEventListener('page:loaded', function() { // Page has loaded and theme assets are ready });カートが更新されました数量の変更後にカート オブジェクトを更新するには、次の JavaScript パターンを使用します。 document.addEventListener('cart:updated', function(evt) { console.log(evt.detail.cart); });製品が Ajax カートに追加されましたdocument.addEventListener('ajaxProduct:added', function(evt) { console.log(evt.detail.product); });商品をカートに追加できませんでしたdocument.addEventListener('ajaxProduct:error',...
Shopify は、ストアで使用できる何百もの無料フォントを提供しています。ただし、ブランド ガイドラインに合わせるためにカスタム フォントを使用する必要がありますが、Shopify ではサポートされていません。テーマに追加することはできます。その方法については次のガイドを参照してください。まずフォントを利用できるようにする必要があります。一部のフォントにはライセンスがあるため、使用するために適切に購入するようにしてください。当社のサポート チームは、必要なフォントの入手を担当しません。次に、追加するフォント スタイルごとに、 .woffと.woff2形式の 2 つのファイルを用意します。これは、追加したフォントがすべての種類のブラウザで読み取れることを確認するためです。 十分なファイルがあれば、テーマ設定のファイルフォルダーにアップロードします。 アップロードしたすべてのフォント ファイルの右側には、コピー行為のためのファイル リンクを提供するチェーン ボタンがあります。 次に、管理者ダッシュボードに戻り、 [オンライン ストア] > [テーマ]をクリックし、[Be Yours テーマ] を選択してさらに編集します。 [...] > [コードの編集]をクリックします。 開いた編集コード ウィンドウで、左側の列のフォルダーSnippetsに移動します。このフォルダーで、「css-variables.liquid」ファイルをクリックして、新しいフォントのカスタム コードを追加します。 ファイルを開くファイル「css-variables.liquid」で、タブ スタイルの下にコードを追加します。これはテキスト{%-style -%}の下にあります。コードは次のように追加されます。 @font-face { font-family: "MyFontHeading"; src: url(' add your...
Shopifyの翻訳アプリによって引き起こされるメガメニューエラーを修正
Shopify の翻訳アプリをインストールした後に既存のメガメニューが機能しない場合は、この問題を解決するためにいくつかの高度な手順を実行する必要があります。この記事ではそれを解決する方法を紹介します。このページではメガメニューが機能しない理由修正方法メガメニューが機能しない理由Be Yours テーマでは、メガ メニューを構成するときにメニュー項目フィールドにテキストを追加する必要があります。メニュー項目のテキストが追加されるたびに、関連するハンドルがバックエンドで作成されます。メニュー項目とハンドルを比較した結果、テーマはメガ メニューを識別してトリガーします。 Shopify の翻訳アプリをインストールする場合、コンテンツに加えて、ハンドルは同じまま、アプリは設定内のメニュー項目の翻訳も行う場合があります。そのため、競合が発生し、メガ メニューが非アクティブになります。修正方法このエラーを解決するには、次の手順を実行します。 Shopify 管理ダッシュボードで、左側のナビゲーション バーにある[アプリ]タブをクリックします。次に、インストールされているアプリを検索し、アプリ「Translate & Adapt」をクリックします。 アプリの開いている構成パネルで、メガ メニューで問題が発生している言語を選択します。たとえば、ウェブサイトの原言語は英語で、韓国語を含む 3 つの翻訳言語が用意されています。訪問者が韓国語で Web サイトを閲覧すると、メガ メニューが機能しません。したがって、修正する韓国語を選択します。 次に、以下のテーマセクションに移動してクリックします。 開いた翻訳ウィンドウで、左側のナビゲーションから[ヘッダー]を選択します。ここでは、すべてのヘッダー コンポーネントのすべての翻訳が表示され、すべてのメニュー タイトル行を見つけて、翻訳を元のテキストと同じに変更します。たとえば、「Jelwelry」というメニュー タイトルがあるので、それが同じままであり、韓国語の列で翻訳されないように注意してください。他のメニュータイトルについても同様に確認してください。 最後に、 「保存」をクリックしますさらに支援が必要ですBeYours テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp コミュニティに参加し、最新情報、ニュース、お知らせを入手してください。
こんにちは、Shopify ストアオーナーの皆さん!あなたのオンライン ショップにもう少し華やかさを加えてみませんか?気の利いた商品ラベル、つまり「セール!」と叫ぶラベルについて話しましょう。これらの小さな人たちは、顧客がお買い得品や新鮮な商品をすぐに見つけられるようにして、販売に驚異的な効果をもたらします。今日は、BeYours Shopify テーマでこれらの目を引くバッジを追加および削除する方法について詳しく説明します。信じてください、それはあなたが思っているよりも簡単です! 割引を強調するセールバッジが表示された Shopify 製品ページセールバッジの追加: ステップバイステップガイドさて、腕まくりをして、製品にセールバッジを付けましょう。その方法は次のとおりです。 1. 製品への道を見つけるまず最初に、製品を見てみましょう。ラップトップを起動し、Shopify 管理ダッシュボードにログインします。左側を見てください - そのメニューが見えますか? 「製品」をクリックします。 左側のナビゲーション メニューの [製品] オプションが強調表示されている Shopify 管理インターフェイス2. スター製品を選ぶ次に、飾りたい製品を選択しましょう。製品リストをスクロールし、セールバッジを獲得しているラッキーアイテムをクリックします。 特定の製品が強調表示されている Shopify 製品リスト ページ3. 価格セクションを徹底的に調査する魔法が起こる場所を見つけてみましょう:製品ページで、「価格」セクションが見つかるまで下にスクロールします。 「価格」セクションが強調表示された Shopify 製品詳細ページ4. 元の価格を設定する顧客にどのような特典が得られるかを示してみましょう。 「価格で比較」フィールドを見つけて、元の価格を入力します。 「価格で比較」フィールドが強調表示され、価格が入力された Shopify 製品価格セクション5. 魅力的なセール価格を追加するここからがエキサイティングな部分です。 「価格」フィールドに、新しいより低い販売価格を入力します。 「価格」フィールドが強調表示され、割引価格が入力された Shopify 製品価格セクション。...
すべての商品やページに同じテンプレートを使用するのではなく、サイトが退屈にならないようにさまざまなテンプレートでストアを紹介したいと考えていますが、その方法がまだわかりませんか?心配はいりません。この記事では、新しいテンプレートを作成し、これらのテンプレートに商品やページを割り当てる方法を段階的に説明します。このページでは新しい製品テンプレートを作成する新しいページテンプレートを作成する新しい製品テンプレートを作成するShopify 管理者ダッシュボードで、 [オンライン ストア] > [テーマ]をクリックします。 [テーマ] ページで、 [Be Yours]テーマを選択し、テーマの[カスタマイズ]ボタンをクリックします。 次に、上部のナビゲーション バーをクリックし、 [テンプレート内の製品]タブを選択します。 製品用に作成されたすべてのテンプレートがここにリストされます。新しい製品テンプレートを作成するには、下部にある[テンプレートの作成]ボタンをクリックします。 次に、新しいテンプレートの名前を入力します。 [Based on]フィールドで、新しいテンプレートに最も似ている既存のテンプレートの 1 つを選択します。選択したテンプレートは、簡単にカスタマイズできるように複製されます。 好みに応じてセクションまたはブロックを使用して新しいテンプレートのカスタマイズを開始します。たとえば、デフォルトの製品に基づいて「product-with-image-banner」という新しいテンプレートを作成し、上部に「イメージ バナー」セクションを追加します。次に、 「保存」ボタンをクリックして、新しいテンプレートのデザインを完成させます。新しいテンプレートを作成した後、Shopify 管理者ダッシュボードに戻り、 [製品] タブを選択して、このテンプレートに製品を割り当てる必要があります。次に、割り当てる製品をクリックし、製品の設定ウィンドウで、右側の列の[オンライン ストア] > [テーマ テンプレート]に移動し、ドロップダウン リストで新しく作成したテンプレート (product-with-image- です) を選択します。例ではバナー)。最後に、 「保存」をクリックします。 その結果、新しいテンプレートが選択した製品に正常に割り当てられます。このテンプレートを割り当てる他の製品に対しても同じことを行います。製品を紹介するために、さまざまな要素を含むテンプレートを必要なだけ作成できます。 注:製品を特定のテンプレートに割り当てない場合、デフォルトの製品テンプレートが自動的に製品に適用されます。上記のステップ 7 のテーマ テンプレート ドロップダウン...
あなたのストアは期間限定の販売促進を実施しており、Web 訪問者の注意をこのオファーに誘導できるように、ミリ秒単位のカウントダウン タイマーを表示したいと考えています。 Be Yoursテーマを使用すると、わずか数ステップでこの動的なカウントダウン タイマーを設定できます。この記事を通じて、Be Yours テーマ エディターでこの設定を完了する方法について詳しく学びましょう。 高度なカウントダウン タイマーを段階的に設定するShopify 管理者ダッシュボードで、 [オンライン ストア] > [テーマ]をクリックします。 [テーマ]ページで、 Beyoursテーマを選択し、テーマのボタン[カスタマイズ]をクリックします。 次に、カウントダウン タイマーを追加するページに移動します。たとえば、ホームページに追加します。このタイプのセクションをすばやく見つけるには、ホームページの左側のメニューを下にスクロールし、セクションの追加ボタンをクリックして、検索バーに「カウントダウン タイマー」というテキストを挿入します。 カウントダウン タイマーセクションを追加した後、画像、レイアウト、コンテンツの位置、デスクトップとモバイルでの配置などの選択を含むいくつかの設定を開始できます。また、必要に応じてブロックを追加したり、タイトル テキストやテキストを変更したりすることもできます。セクションのボタン設定。 残りの日数、時間、分、秒、ミリ秒を含むカウントダウン タイマーを表示するには、 [カウントダウン タイマー]セクションでブロック[カウントダウン]を設定する必要があります。特に、[終了日]フィールドに「 {yyyy-mm-dd}T{時間:分:秒.ミリ秒}{タイムゾーン} 」の形式でデータを追加する必要があります。たとえば、取引は2022 年 12 月 31 日の午後 11:59:59.456 (タイムゾーンUTC+7 )まで利用可能です。追加されたデータは「 2022-12-31T23:59:59.456+07:00 」となるはずです。カウントダウンの秒とミリ秒を気にしない場合は、時間の部分59.456を00.000に置き換えることができます。...
Be Yoursテーマでは、コレクションの説明がデフォルトで製品グリッドの一番上に表示されます。コレクションの製品グリッドの下に移動するなど、その位置を変更したい場合は、2 つの方法で非常に簡単に操作できます。以下の手順を参照してください。このページでは方法 1 - コレクション バナー セクションを移動する方法 2 - カスタム リキッド セクションを使用する方法 1 - コレクション バナー セクションを移動するShopify 管理者ダッシュボードで、 [オンライン ストア] > [テーマ]をクリックします。 [テーマ] ページで、 [Be Yours]テーマを選択し、テーマの[カスタマイズ]ボタンをクリックします。 上部のナビゲーション バーをクリックし、 [コレクション] > [デフォルト コレクション]を選択します。 左側のメニューから、コレクション バナーセクションをクリックして、目的の位置にドラッグします。たとえば、これを「Product Grid」セクションの下に移動します。 次に、すべてのコレクション バナー コンポーネント (コレクションの画像と説明)...