Smart Emails
en
Language
en English de German ar Arabic bg Bulgarian cs Czech da Danish el Greek es Spanish et Estonian fi Finnish fr French hi Hindi hr Croatian hu Hungarian id Indonesian it Italian ja Japanese ko Korean lt Lithuanian lv Latvian nl Dutch no no pl Polish pt Portuguese ro Romanian ru Russian sk Slovak sl Slovenian sv Swedish th Thai tr Turkish vi Vietnamese zh_CN Chinese (China)

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.

Customizing buttons

Select Buttons in the toolbar to customize all buttons in your emails at once. The icon choices in each row are ordered from left to right: - Button style — Solid fill, border only, or text link - Button size — Small, medium, or large - Button width — Automatic or wide - Corner style — Square, rounded corners, or pill-shaped - Corner radius — Fine-tune rounded corners when the middle corner style is selected - Buttons font — Choose a font, size, weight, and optional uppercase styling - Colors — Set the text, background, and border colors for the available styles The settings under Buttons are global. They control the visual design of supported button sections across all 52 templates, including Order Status Button, Tracking Button, Pay Now Button, and Button. A section can still define a different label, URL, alignment, or visibility for an individual button. Do I need to configure every button individually? No. Use the global Buttons panel once for a consistent visual design. Edit a specific button only when its label, URL, alignment, or visibility should differ. Global setting: The design selected under Buttons applies 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. Important: 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. 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. Important: 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.