Skip to main content
Skip table of contents

X3 Edit the postage theme (X3 EN)

PORTO-THEME

General settings for the structure of the store you make in the Settings Panel, basic settings for the design in the Design Panel. We will start with the main options in the Settings Panel.

THE SETTINGS PANEL

The basic theme settings can be configured in Porto > Porto > Settings Panel.

GENERAL

This is where you decide how wide the store should be displayed in the browser window, whether it should have a box border, whether sharing buttons should be displayed, and more. The width of the website in pixels can be selected in Maximum Page Width.

HEADER / FOOTER

If you want to use a „sticky header” that is visible even when scrolling, you can enable this in the „Header”. There are 20 different types available for the header design. Other header settings include displaying flag icons for multiple language variants of the store or enabling/disabling a login popup for customer accounts.

CONFIGURE STATIC BLOCKS

Static blocks are uniquely referenced using identifiers and created by you. The main internal identifiers are:

  • porto_facebook

  • porto_footer_information

  • porto_footer_content

These three identifiers represent the left three of the four blocks below in the screenshot. You configure a new static block in the backend under Postage > Settings Panel > Add Footer. Here you enter the block title and identifier ("Static Block ID"). The block title is an informative description in the backend, while the identifier is used as an internal reference to call the static block. At the bottom of the view, enter the desired content in the editor.

CATEGORY VIEW / PRODUCT VIEW

In the Settings Panel, these sections set how categories and products are displayed in the selection overviews in the store. For this purpose, you can define the width and height of the preview images and set what additional information (ratings, price, links to the wishlist, or other products) should be displayed.

PRODUCT LABEL

Here you can activate that newly added products to the store are automatically marked with a "NEW" label.

CONTACT US

So that your customers know how and where to contact you, it is possible to specify your company address in this section for a Google Maps view, as well as general contact details, e.g. for display in the footer of the page.

THE DESIGN PANEL

Let's continue with the settings in the Design Panel section. This is not about organizing individual store functions, but about the visual aspect of your website. The basic theme design can be configured in Porto > Porto > Design Panel.

GENERAL

Under Theme Colors, the basic color of your personalized version of the Porto theme is set. It will then be enabled by default for certain text fields, background areas, and other elements.

FONT

In addition to the basic color, you can also specify the font used on your page and its size (Basic Font Size). Set these under Font Family > Google Fonts. In addition, make sure to also specify a basic font type under Basic Font Family, because some Google Fonts are not displayed by all browsers. Such browsers will then fall back on the basic font type set here.

COLOR

In addition to the basic theme color, you can set additional colors for specific page elements here.

Modifiable elements include:

  • Text

  • Links (including hover color)

  • Buttons (text, background, and hover color)

  • Breadcrumbs (text, link, and hover color)

  • Product labels (text and background color)

HEADER / FOOTER / MAIN CONTENT

If the general options for the header and footer in the Settings Panel are not enough for you, you can further modify these modules as well as the main area of the store here. To do this, set the box in the respective area to "Yes". Then the other options will appear.

You can change the header and footer in a similar way to the elements under Color. The Main Content can be given a background color and/or a background image. In the Custom Style text field, you can also enter your own CSS-Code for more in-depth changes, if required.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.