カスタムコード要素

この記事では、 カスタムコード 要素とそれを活用して高度なストアカスタマイズを行う方法 GemPages エディター V7.

カスタムコード要素について

GemPages Editor V7のカスタムコード要素を使用すると、独自のコードを追加することができます。 HTML, CSS, JavaScriptを, 液体ページにコードを直接組み込むことができます。これは強力な要素であり、次のようなことが可能になります。

簡単にカスタマイズ: 通常の GemPages 要素ではサポートされていない独自のデザイン要素やインタラクティブ機能を追加します。
簡単に サードパーティのアプリを統合する: 複雑なコーディングなしで、外部アプリ、ウィジェット、トラッキングコード、スクリプトを Shopify ストアに埋め込みます。
ブーストストアの機能: カスタムの動作とインタラクションを追加して、顧客にとってのストアの見た目と操作性を改善します。

カスタムコード要素を挿入するには、次の簡単な手順に従います。

ステップ1： アクセス GemPagesダッシュボードをクリックし、対象のページを選択してエディターを開きます。

ステップ 2: ドラッグ＆ドロップ カスタムコード 左サイドバーの要素の下にある 高機能 セクションを目的の領域に移動します。

要素をクリックすると、設定が表示されます。設定タブの三脚と 高機能 タブには何も表示されないことに注意してください。

その設定タブでは、カスタムコード要素の動作とページ上での表示方法を設定できます。各セクションの動作は以下のとおりです。

「+追加…」ボタンをクリックします。コードエディタダイアログが表示され、入力できるようになります。 HTML/リキッド, CSSまたは JavaScriptを スニペットコード。

完了したら、 Save

注意： HTMLタブでは、 サードパーティのインストールコード コンテンツを表示します。

経歴セクションでは、用意されているパレットから色を選択したり、背景画像を挿入したりすることで、外観を変更するオプションがあります。

色圏

要素の背景に適用する単色またはグラデーションカラーを選択します。以下のことが可能です。

画像

必要に応じてこのオプションを使用して背景画像を追加します。

詳しくはこちら 「+ 追加…」 画像セクションで背景画像をアップロードまたは選択します。

画像を追加すると、高度な設定オプションが利用できるようになります。

ソース: 画像の URL を表示するか、メディアギャラリーから選択できます。
規模: ブロック内で画像を拡大縮小する方法を選択します (例: カバー、包含、自動)。
役職: 焦点を設定します（中央、左上、右下など）。
繰り返す: 画像を繰り返すかどうか、またどのように繰り返すかを定義します (繰り返しなし、繰り返し、X/Y の繰り返し)。
アタッチメント: 画像のスクロール動作を設定します (スクロールまたは固定)。
LCP（Largest Contentful Paint）を最適化する：Rパフォーマンスのためにこの画像を優先するようにブラウザに推奨する場合は、 プリロード = はい iこの要素が折り目より上に読み込まれる場合。

エディターで簡単に識別できるように要素の名前を変更します。これは、複雑なレイアウトや複数のセクションがあるページで特に便利です。

このパラメータを使用すると、ページ上での要素の配置方法を決定できます。選択できるオプションは、左揃え、中央揃え、右揃えの 3 つです。

より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.

注意： 要素を使用するだけでなく、ページ上の既存のGemPages要素にカスタムコードを追加することもできます。この代替アプローチにより、その要素のコードを最初から書き直す必要がなくなり、時間を節約できます。

ステップ1： カスタムコードを適用するGemPages要素を見つけて右クリックし、 「カスタムコード」.

ステップ2： 適切なタブを見つけてください CSS の三脚と スクリプトをクリックし、ダイアログにコードスニペットを挿入します。「Save終わったら「」を押してください。

追加したカスタムコードが不要になった場合は、次の 2 つの方法で削除できます。

ステップ1： エディターで、削除するカスタムコード要素をクリックします。

ステップ2： 上部のバーにあるゴミ箱アイコン（削除）を押すか、要素を右クリックして選択します。削除.

ステップ1： カスタムコードが追加された要素を右クリック→選択 カスタムコード

ステップ2： CSS、スクリプトフィールド内のコードを削除します。

ステップ3： 詳しくはこちら Save.