Email Template Editor Guidelines

      Email Template Editor Guidelines


        Article Summary

        Products


        Reviews
        Supported plans

        Premium, Enterprise

        eCommerce Platform

        Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Volusion, Salesforce Commerce Cloud, Custom

        In today’s email marketing world, HTML email is the way to go for producing graphical content for your customers or recipients. 

        HTML email has not kept pace with advances in browsers, so some features that are supported on a webpage do not work in an HTML email.

        When customizing HTML emails with the template editor you will need to keep a few things in mind, general and Yotpo-Specific.

        General

        • Use basic HTML, you can't include JavaScript in emails
        • CSS needs to be inline in the elements themselves (with a workaround shown below)
        • We recommended that you test the design in the common email clients throughout development.

        Yotpo-specific

        Yotpo provides a template engine, and each email is built from multiple files:

        • The layout.liquid file, is the "master" file, it contains the general structure for all emails.
        • styles.css - contains styling for all emails When emails are compiled, the styling is injected inline. Instead of writing your styling in-line on each element you can include the rules here.
        • The files in the 'templates' folder are inserted into the layout file, replacing the {{ content_for_layout }} section.
        Tip:

        When modifying the templates, you don't need to include DOCTYPE, html, body tags, as they are already included in the master layout file.

        • Last are snippets, those are included either in the templates or directly in the layout section.
        Please note:
        The preview is for guidance only. When you customize an email, it may show correctly in the preview; however, we strongly recommend sending a test email frequently to see how your changes are reflected in an actual client.


        If you are not getting an email at all, it's possible that the HTML does not render validly, check the guidelines above.


        Was this article helpful?