Overview

Having a well-designed website is crucial to attracting customers to your online store. The Porto theme has a dedicated design panel that allows you to brand many aspects of your store while also providing a section for custom stylings for more extensive customization.



Porto's Design Panel

The design panel allows you to stylize many core aspects of the user experience, such as the general font, link, and button colors, and also common sections such as the header, footer, and main navigation menu.


Where do I find the design panel?

Step-by-step guide

  1. In the Magento admin panel, navigate to Stores > Configuration.
  2. Open the Porto section and then click Porto - Design Panel.


Porto's Custom Styles

There will be times where you need to setup a styling that is not in the design panel. There may be a styling already setup  customized for your store or you may need to create your own. This is where Porto's Custom Styles come in. The Custom Styles allow you to add unique design changes through the admin interface. These design changes do need to be formatted according to what is called Cascading Style Sheets (CSS). For more information about CSS, web.dev provides a series of learning modules here: https://web.dev/learn/css/


Where can I setup custom stylings?

Step-by-step guide

  1. In the Magento admin panel, navigate to Stores > Configuration.
  2. Open the Porto section and click Porto - Settings Panel.
  3. Scroll down and open Customization Settings. There you will see Custom Style 1 and Custom Style 2.

Both Custom Style 1 and Custom Style 2 are used on the site. In most cases, Custom Style 1 includes the theme's default CSS and Custom Style 2 includes additional customizations for your store. Feel free to make adjustments to both. If you want to add a new style, we recommend putting it at the bottom of the Custom Style 2 textbox.


Related articles

If you're having trouble logging in then please visit and follow this guide on changing your password for the administrator panel.