Edit/Design Templates With CSS & HTML

When launching businesses on Magento platform, marketers often face difficulty when sending invoices to customers since these invoices are often not well-organized and lack information about sellers and the deals. Therefore, Mageplaza PDF invoice extension is introduced with the aim to help shop admins handle this problem and even provide customers better shopping experiences without putting much effort. Beside default templates, with this extension, users are enabled to design their own templates for emails sending to buyers.

What are CSS and HTML?

HTML, standing for HyperText Markup Language, is used in creating a web page. This language contributes to making of a website via numerous elements presented by tags. These tags represent for different parts in main content of the landing page such as heading, paragraph, table, and so on. In other words, HTML tags are responsible for the content of a website.

CSS, which stands for Cascading Style Sheets, is applied to manage how HTML tags look like to make a website or online media. It means that, CSS contributes to the layout and appearance of a web page while HTML tags contain all content of this landing page. Therefore, CSS and HTML have a supplementary relationship with each other.

In Mageplaza PDF extension, CSS and HTML support each other to complete templates for PDF files created before sending to customers about their purchases. In other words, what the email looks like and what it contains all depend on user’s configurations for it.

PDF Invoice for Magento 2

Impress your customers with professional PDF invoices that match your store's branding

(32 reviews)

Check it out!

How to use CSS and HTML?

Once having Mageplaza PDF Invoice extension, users can freely edit default templates or create new ones to apply for their stores. To start configuring templates, admins can go to Admin Panel > Mageplaza > PDF Invoice > Manage Templates. On the display page, there are two separate options provided which are Edit or Add New Template. Depending on admins’ intentions, they can choose to edit old templates or generate new ones and click on the relevant function button.

If admins want to edit old templates, after selecting Edit button, they can start making adjustments. On the display page, the HTML field can be easily found out along with Variables list and Preview function. Here shop owners can recode HTML field or make some changes to make the content suitable with stores. After that, they can move to Template style to have a closer look at the layout of that billing document. To ensure they make correct adjustments, users can use the Preview button to take a look at how the invoice looks like before saving configuration

In case store owners expect to design a personalized template for their business, after choosing Add New Template, they are offered two choices. The first one is loading old templates then making changes to create a new one; and the other is generating an absolutely new template themselves. No matter which option is chosen, admins still have to fill in HTML and Template style or CSS field. Similar to editing process, when generating new templates users are enabled to insert variables from a provided list and take advantage of Preview button to ensure they make an appropriate template.

Additionally, to help business doers, especially newbies configure HTML and CSS more easily, on the top of HTML field, there are two links to CSS and HTML instructions and notes. Learn more about CSS and HTML.

In conclusion, Mageplaza PDF extension is created to provide greatest support to online merchants in increasing customers’ retention. In addition to edit and add new templates, this extension also allows both buyers and consumers to print their billing documents in a large number of copies. If you want to know more about this function, refer here: