デザインのカスタマイズ

7 記事 Manfred による Manfred

タイポグラフィ

ツールバーの「フォント」をクリックすると、さまざまなテキスト要素のフォントとサイズを変更できます。 - Shopifyの見出し — メールのメイン見出し(例:「注文確定」) - 見出し — セクションの見出し - 字幕 — ラベルと小さな副見出し - 本文 — メインコンテンツテキスト - フッター — フッターテキスト テキストレベルに応じて、フォントの種類、サイズ、太さ、イタリック体、大文字体、行間などを調整できます。利用可能なフォントは幅広いメールクライアントとの互換性を考慮して選定されていますが、選択したフォントがサポートされていない場合は、メールクライアントが安全なシステムフォントに自動的に切り替わります。 | グローバル設定:タイポグラフィは52種類のメールテンプレートすべてに適用されます。変更は即座に反映されます。

ボタン

ツールバーの「ボタン」をクリックすると、メール内のすべてのボタンを一度にカスタマイズできます。 - スタイル — 塗りつぶし、アウトライン、またはリンク - サイズ — S、M、またはL - 幅 — 自動、ワイド、またはフル幅 - 角の半径 — 鋭角、丸みを帯びた形状、またはピル型 - 色 — テキストの色、背景色、枠線の色 - タイポグラフィ — ボタンのフォント、サイズ、太さ、およびオプションで大文字のスタイルを選択します。 ボタンの設定はグローバルです。これらの設定は、サポートされている注文ステータス、追跡、支払い、およびカスタムボタンに適用され、52種類のテンプレートすべてに適用されます。ただし、各セクションでは、独自のボタンラベル、URL、配置、または表示設定を定義できます。 | グローバル設定:ボタンのスタイルは、52種類すべてのメールテンプレートに適用されます。変更は即座に反映されます。

ロゴ

ツールバーの 「ロゴ」 をクリックするか、キャンバス上のロゴ領域をクリックしてください。 ロゴ画像 独自のロゴをアップロードするか、Shopifyのファイルから選択してください。ロゴを削除して、ショップのURLにリンクすることもできます。 サイズと配置 - ロゴサイズ — パーセンテージスライダーで幅を調整します - 配置デスクトップ — 左、中央、または右 - モバイル端末のアライメント — モバイル端末専用のアライメント ヘッダーレイアウト - メール本文の幅に 含まれる ロゴ - フルサイズ — ロゴがメールの幅全体に広がります 間隔と色 - 垂直密度 — ロゴの上下の間隔を制御します - 背景色 — ロゴの背景色 - アクセントバー — ロゴの上部に表示されるオプションのカラーストリップ(オン/オフ切り替え、高さと色の調整が可能) | グローバル設定:ロゴは52種類のメールテンプレートすべてに適用されます。変更は即座に反映されます。

背景とスタイル

ツールバーの「色」をクリックすると、グローバルカラーパネルが開きます。 背景 - 外側の背景 — メールの周囲の領域 - 内部背景 — メール本文 - フッターの背景 — フッター領域 - ロゴの背景 — ヘッダーロゴの背後の領域 - コンテナの背景 — セクションコンテナの背景 テキストとリンク メイン見出し、セクション見出し、サブタイトル、本文、リンク、フッターテキスト、フッターリンクごとに、個別の色設定が可能です。テキストと背景の間には、常に十分なコントラストを確保してください。 境界線と区切り線 - 色 — 境界線と区切り線に共通する色 - 区切り線のスタイル — なし、実線、破線、点線 - 仕切り板の厚さ セクションコンテナ - コンテナの背景 — コンテンツセクションの背景色 - コーナー半径 — 丸みを帯びた角または鋭角な角 | グローバル設定: 色はサポートされている全52種類のテンプレートに適用されます。Smart Emailsは、販売者が選択したカラーパレットを維持し、部分的なダークモード変換によってテキストと背景の組み合わせが判読不能になるのを防ぐため、明るい色のみの配色を宣言します。

メールセクションの完全ガイド

セクションは、スマートメールテンプレートの構成要素です。エディターでは、選択したShopify通知と互換性のあるセクションのみが提供され、一部の通知固有のセクションは手動で追加できません。 構成とテキスト - Shopifyヘッダー — メインの通知見出し - イントロテキスト、スタッフ紹介テキスト、履行イントロテキスト — 状況に応じたオープニングコンテンツ - テキスト、カスタムメッセージ、締めくくりのテキスト — 編集可能なテキストエリア - テキスト列 — 複数のテキストブロックを列状に配置 - スペーサーとディバイダー — 視覚的な間隔と分離 - よくある質問 — よくある質問とその回答一覧 注文、商品、合計金額 - 製品と製品 — 基本的な製品情報 - 価格表示のある商品 — 明細項目、割引、税金、送料、合計金額 - 返金対象商品および交換対象商品 — 返金および交換の詳細 - 注文番号、注文メモ、支払い情報、支払い条件、支払期日リマインダー、合計金額 - 住所の詳細、配送の詳細、および集荷場所 これらのセクションには、通知にShopifyデータが含まれている場合にのみデータが表示されます。サンプルデータは、プレビュー目的で対応パネルで有効にできます。 ボタンとアクション - 注文状況ボタン、追跡ボタン、今すぐ支払うボタン - ボタン — ラベルとURLを含むカスタムコールトゥアクション - Appleウォレットボタン - ショップリンク — ストアページへのナビゲーションリンク 画像とレイアウト - 画像 - 画像とテキスト - 画像2列 - 画像オーバーレイ - モバイルアプリのダウンロード マーケティングセクション - メッセージバナー - 割引 - おすすめ商品 - おすすめ商品 - ギフトカード - 再注文 マーケティングセクションは、選択したテンプレートに割り当て、メインテンプレートのインストール後、ライブ設定を通じて管理できます。 ギフトカード、返品、アカウント通知 - ギフトカードコード、ギフトカードの詳細、受取人へのメッセージ - 返品ラベルの記入方法および返品拒否理由 - ストアクレジットの詳細 - メールアドレスの変更と売上貢献度の変更 - 調査 グローバルセクション ヘッダーロゴ、メッセージバナー、ショップリンク、フッターは共通の設定を使用します。これらの視覚的なデザインはメインエディターで管理されますが、サポートされるテキストは言語ごとに個別に保存されます。 || セクションの追加、削除、または並べ替えは構造的な変更であり、新しい主要言語のエクスポートが必要です。

ショップリンク

ショップリンクは、通知メールにコンパクトなナビゲーションエリアを提供します。ホームページ、新商品、セール情報、お問い合わせページ、返品情報などのリンク先としてご利用ください。 ショップリンクを開く エディターツールバーの「ショップリンク」をクリックするか、キャンバスの「ショップリンク」エリアを選択してください。 コンテンツを設定する あなたはできる: - ショップリンクを有効または無効にする - オプションの見出しを編集する - 利用可能なリンクラベルとURLを設定する - グローバルな色とタイポグラフィの設定を通じて、リンクのスタイルを制御します。 https://形式の完全なURLを使用し、実際のテストメールで全てのリンクをテストしてください。 言語と同期 リンクのレイアウトとデザインは、メインエディタによって生成されます。リンクラベルは言語ごとに翻訳できます。URLは関数値としてコピーされ、Google Cloud Translationによる翻訳は行われません。 言語ごとに異なる宛先URLが必要な場合は、該当する第二言語エディタを開き、公開前に現在の言語固有の設定を確認してください。 | ショップリンクは、地域固有のShopifyメタフィールドに保存され、ショップリンクブロックを含むサポートされている52種類のテンプレートすべてに適用されます。

デザインセーブスロット

Smart Emailsには、顧客向けのデザインスロットが4つ用意されています。これらは、季節ごとのバリエーション、キャンペーンスタイル、または別のプリセットを適用する前の安全策として役立ちます。 スロットストアは何 デザインスナップショットには、色、タイポグラフィ、ボタン、フッター、ショップリンク、メッセージバナー、マーケティング設定、間隔、その他のプリセット制御デザイン値など、グローバルな視覚設定が含まれます。 デザインを保存する 1. エディターでプリセットと保存済みデザインのコントロールを開きます。 2. 空いているスロットを選択してください。 3. 分かりやすい名前を入力してください。 4. 現在のデザインを保存します。 保存したデザインを管理する 使用中のスロットの場合、以下のことが可能です。 - 保存されているデザインを読み込む - 現在のデザインで上書きします - 名前を変更する - 確認後削除 スロットを読み込むと、現在のグローバルデザイン設定が上書きされます。後で元の状態に戻したい場合は、まず現在の状態を別のスロットに保存してください。 || デザインスロットは、独立したShopifyのインストールではありません。読み込みによってテンプレート構造や基本プリセットが変更される場合は、新しいプライマリエクスポートを生成してインストールしてください。