Porto Configuration - Updating the Design

Porto Configuration - Updating the Design

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.devprovides 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 thisguide on changing your passwordfor the administrator panel.





    • Related Articles

    • Porto Extensions - Mega Menu

      TABLE OF CONTENTS Overview How do I show or hide certain categories? How do I hide categories from both the main navigation and filters? How do I hide categories from only the main navigation and not filters? How do I change the depth of the main ...

    • Event Tickets: Updating Event Ticket Confirmation Email

      This article will guide you through the process of updating the ticket confirmation emails. You will need a basic understanding of HTML to make changes to the email content. There are two email templates that can be changed in regards to tickets: AW ...

    • How to Add/Modify Homepage Slideshow - Porto

      This article covers the basics of adding and modifying the slide contents on your homepage. Please note that this tutorial only applies to Porto Themes actively installed. Your slider(s) on the homepage is powered by a JQuery plugin calledOWL ...

    • Magento 2 - Porto: Add a Product Slider at the Bottom of the Product Landing Page

      This article will guide you through setting up a product slider at the bottom of your product landing pages. Step 1: Creating the Product Slider First, we need to create the product slider. Login to the Magento Admin Panel. Go to Content>Elements> ...

    • How to Add Your Facebook Pixel

      This article will guide you through setting up your Facebook Pixel on Magento 2. This article will cover how to add the Facebook Pixel to all pages and to the order success page for conversions. Step 1: Adding Facebook Pixel to All Pages In the ...