Magento 2 Configure Design: HTML Head, Header, Footer, Transactional Emails

It is easy to attract customers if your website and your stores look professional and beautiful by having customized HTML Head, Header, Footer and Transactional Emails. With the out-standing Design Configuration, you will have competitive advantages compared to other market players and hence can increase your sales instantly.

Although changing the design rules of Design Configuration is necessary, this can be a challenging task for those who are not familiar with the process. Hence, we have listed down a 6-step guide on how to configure design in Magento 2.

6 Steps to Configure Design Settings:

• Step 1: Access to Content
• Step 2: Configure the design settings
• Step 3: Change the Default Theme
• Step 4: Change the Theme
• Step 5: Edit Design Configuration
• Step 6: Complete, Click Save Configuration

Step 1: Access to Content

• On the Admin Sidebar, click Content
• Select Design
• Then, select Configuration

Step 2: Configure the design settings

• Decide the store view you want to configure
• From Action column, click Edit

Step 3: Change the Default Theme

• Set Applied Theme to new theme

You can also schedule theme for spcial events, that’s great idea :)

Step 4: Change the Theme

• Click Add New User Agent Rule under Design Rules
• From the Search String column, enter the browser ID for the particular device
• From the Theme Name column, select the theme used for the particular device
• Continue the process until entering the adding device
• Perl Compatible Regular Expression (PCRE) or searching string to match when entering new themes

Step 5: Edit Design Configuration

• Working with different criteria in Other Settings :
  • HTML Head
  • Header
  • Footer
  • Pagination
  • Product Image Watermarks
  • Transactional Emails

Step 6: Complete, Click Save Configuration

Problems you may have during configuration

You may encounter several problems as follows:

• Your changes will be lost if the cache is not cleared or the static content is not deployed
• The logo is uploaded as an unsupported file type
• Incorrectly removing a theme
• The same meta description and title are used on all pages
• The graphics files may not load if the read/write permissions are wrong

Things To Remember

• The system will use the default theme if no theme is suitable. Sometimes, third-party extensions can modify the default theme.

The bottom line

This tutorial shows you 6 steps to set up design for your Magento 2 store in different criteria, from HTML Head, Header, Footer, to Pagination, Product Image Watermarks, and Transactional Emails. Don’t forget to write below if you need more support. And if you are wondering about other theme settings and email configuration guides, check the below posts for more details.

Related posts:

• Sticky Header Component in Magento 2
• How to customize Email Template, Transactional Email in Magento 2
• How To Create Magento 2 Theme Ultimate Guide