The HTML coding pattern for the mail editor in the SHOPLINE admin panel refers to using HTML code to create and edit email content. This enables you to precisely manage the appearance and actions of emails to meet specific design and feature requirements.

 

In This Article

• Feature Access
• Feature Description
• HTML Syntax Description

 

---

 

Feature Access

From your SHOPLINE admin panel, click Settings > Notifications to access the notification module.

On the Notifications module page, click the name of any notification scenario to enter the mail editor.

In the mail editor, click Switch to the new version in the upper right corner to go to the new version of the mail editor.

In the new version of the mail editor, select any component from the left-side sidebar menu. In the lower right corner of the details page, click the Coding pattern switch to switch between the Coding pattern and Visual mode.

---

 

Feature Description

Default Visual Mode

By default, the mail editor is in Visual mode. You can directly edit the email by modifying the visual configuration of components.

Coding Pattern

When you click the Coding pattern button at the bottom of the component, the Coding pattern appears.

 

Once switched, you can edit the email.

• If you click Reset, the email content changes to the system’s preset HTML code, with a prompt of “Reset Succeeded”.
  
  
  
  
• If you click Zoom, a larger HTML code input box appears.
  • In this input box, you can directly enter the HTML code, then click Confirm to save the HTML and return to the mail editor page. If you click Cancel, the larger HTML code input box collapses and you return to the mail editor page.
    
    
    
    

 

---

 

HTML Syntax Description

• This section only explains some common built-in syntax.
  • For more information about the HTML and Handlebars syntax, please refer to the following links:
  • HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
  • Handlebars: https://handlebarsjs.com/
    
    
• Built-in variables
  • Component variables
    • section.setting.xxx: Value configured for the control.
    • section.id: Current component identifier.
    • ...
      
      
  • Other variables
    • rtlConf: RTL adaptation configuration.
    • presetData: Preset default data.
    • metafields: Requested data.
    • ...
      
      
• Built-in helpers
  • For more information, please refer to https://github.com/helpers/handlebars-helpers
    • t: Multilingual setting.
    • assign: Define variables.
    • img_size: Obtain the size of the image.
    • ....