Order detail

Posted on by Lavender Vu

The Order detail element helps you easily display fully the details of orders with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.

 

A. Content

– Template: There are 3 templates of order detail to choose including:

  • Default

  • Vertical text

  • Horizontal text

– Translate text: Type text you want to display on the email. For both Horizontal text and Vertical text templates, just enter text for “Quantity”. With Default Temple, they are: Product, Quantity, Price.

– Option: Tick in the boxes if you want to:

  • Show SKU
  • Remove product link
  • Use order download table

 

B. Style 

  • If Template is “Default”
    • Column ratio: Control the width of the last column by adding the value without unit (percentage).
    • Text: Change appearance of text by change value in Font size, Color and Line height.
    • Class & id: Specify a class and/or ID for the component. Each component can have only one ID, but you can assign multiple classes, just separate them with spaces.
    • Padding: Type space between the border of  and the content inside it.
    • Background: Set Image and color for order detail background if it is necessary.
  • If Template is “Horizontal text” or “Vertical text”
    • Order items: Adjust the background color, image width (px), border width and border color, and the vertical distance between product items to create a clean and readable product list.
    • Product name: Control how product names appear by setting the font size, font weight, font family, text color, and line height.
    • Price: Customize the look of product prices using font size, font weight, font family, text color, and line height.
    • Quantity: Style the quantity field with options for font size, font weight, font family, text color, and line height to match your overall email design.
    • Class & id: Specify a class and/or ID for the component. Each component can have only one ID, but you can assign multiple classes, just separate them with spaces.
    • Padding: Type space between the border of  and the content inside it.
    • Background: Set Image and color for order detail background if it is necessary