Customizing Your Design

7 articles Manfred By Manfred

Typography

Click Fonts in the toolbar to change fonts and sizes for different text elements: - Shopify Heading — the main email heading (e.g. "Order confirmed") - Headings — section headings - Subtitles — labels and smaller secondary headings - Body Text — main content text - Footer — footer text Depending on the text level, you can adjust the font family, size, weight, italic style, uppercase style, or line height. The available fonts are selected for broad email-client compatibility, but an email client can still fall back to a safe system font if it does not support the chosen font. | Global setting: Typography applies to all 52 email templates. Changes go live instantly.

Buttons

Click Buttons in the toolbar to customize all buttons in your emails at once: - Style — Filled, Outline, or Link - Size — Small, Medium, or Large - Width — Auto, Wide, or Full width - Corner Radius — Sharp, Rounded, or Pill-shaped - Colors — Text color, background color, and border color - Typography — Choose a font, size, weight, and optional uppercase styling for buttons Button settings are global. They apply to supported order-status, tracking, payment, and custom buttons across all 52 templates. A section can still define its own button label, URL, alignment, or visibility. | Global setting: Button styles apply to all 52 email templates. Changes go live instantly.

Logo

Click Logo in the toolbar, or click on the logo area in the canvas. Logo image Upload your own logo or select one from your Shopify files. You can also remove the logo and link it to your shop URL. Size & alignment - Logo Size — adjust the width with a percentage slider - Alignment Desktop — Left, Center, or Right - Alignment Mobile — separate alignment for mobile Header layout - Contained — logo inside the email body width - Full — logo spans the full email width Spacing & colors - Vertical Density — controls the spacing above and below the logo - Background Color — the background behind the logo - Accent Bar — optional colored strip above the logo (toggle on/off, adjustable height and color) Global setting: Logo applies to all 52 email templates. Changes go live instantly.

Backgrounds & Styles

Click Colors in the toolbar to open the global color panel. Backgrounds - Outer Background — the area around your email - Inner Background — the main email body - Footer Background — the footer area - Logo Background — the area behind the header logo - Container Background — the background of section containers Text and links Separate color controls are available for the main heading, section headings, subtitles, body text, links, footer text, and footer links. Always keep sufficient contrast between text and its background. Border & Divider - Color — shared color for borders and dividers - Divider Style — none, solid, dashed, or dotted - Divider Thickness Section Container - Container Background — background color for content sections - Corner Radius — rounded or sharp corners | Global setting: Colors apply to all 52 supported templates. Smart Emails declares a light-only color scheme to preserve the merchant-selected palette and prevent a partial dark-mode conversion from creating unreadable text/background combinations.

Complete Guide to Email Sections

Sections are the building blocks of a Smart Emails template. The editor only offers sections that are compatible with the selected Shopify notification, and some notification-specific sections cannot be added manually. Structure and text - Shopify Header — the main notification heading - Intro Text, Staff Intro Text, and Fulfillment Intro Text — context-specific opening content - Text, Custom Message, and Closing Text — editable text areas - Text Columns — multiple text blocks in columns - Spacer and Divider — visual spacing and separation - FAQ — a list of custom questions and answers Orders, products, and totals - Product and Products — basic product information - Products with Pricing — line items, discounts, taxes, shipping, and totals - Products with Refund and Products with Exchange — refund and exchange details - Order Number, Order Notes, Payment Info, Payment Terms, Payment Due Reminder, and Total Due - Address Details, Shipping Details, and Pickup Location These sections display Shopify data only when the notification provides it. Sample data can be enabled in supported panels for preview purposes. Buttons and actions - Order Status Button, Tracking Button, and Pay Now Button - Button — a custom call-to-action with a label and URL - Apple Wallet Button - Shop Links — navigation links to store pages Images and layouts - Image - Image with Text - Image Two Columns - Image Overlay - Mobile App Download Marketing sections - Message Banner - Discounts - Featured Product - Recommended Products - Gift Card - Reorder Marketing sections can be assigned to selected templates and managed through live settings after the primary template has been installed. Gift cards, returns, and account notifications - Gift Card Code, Gift Card Details, and Message to Recipient - Return Label Instructions and Return Declined Reasons - Store Credit Details - Email Address Change and Sales Attribution Changes - Survey Global sections The header logo, Message Banner, Shop Links, and Footer use shared settings. Their visual design is managed from the primary editor, while supported text is stored separately for each language. || Adding, deleting, or reordering a section is a structural change and requires a new primary-language export.

Shop Links

Shop Links provide a compact navigation area in your notification emails. Use them for destinations such as your home page, new products, sale collection, contact page, or returns information. Open Shop Links Click Shop Links in the editor toolbar or select the Shop Links area in the canvas. Configure the content You can: - enable or disable Shop Links - edit the optional heading - configure the available link labels and URLs - control the link styling through the global color and typography settings Use complete https:// URLs and test every link in a real test email. Languages and synchronization The link layout and design come from the primary editor. Link labels can be translated per language. URLs are copied as functional values and are not translated by Google Cloud Translation. If different languages need different destination URLs, open the relevant secondary-language editor and verify the current language-specific settings before publishing. | Shop Links are stored in locale-specific Shopify Metafields and apply across all 52 supported templates that contain the Shop Links block.

Design Save Slots

Smart Emails provides four customer design slots. They are useful for keeping seasonal variations, campaign styles, or a safe copy before applying another preset. What a slot stores A design snapshot includes the global visual settings, such as colors, typography, buttons, footer, Shop Links, Message Banner, marketing settings, spacing, and other preset-controlled design values. Save a design 1. Open the preset and saved-design control in the editor. 2. Select an empty slot. 3. Enter a descriptive name. 4. Save the current design. Manage saved designs For an occupied slot you can: - load the stored design - overwrite it with the current design - rename it - delete it after confirmation Loading a slot replaces the current global design settings. Save the current state in another slot first if you may want to return to it. || A design slot is not a separate Shopify installation. If loading it changes the template structure or base preset, generate and install a fresh primary export.