Wizard import

If you want to import the demo contents and setup, you will be able to do that in just a few clicks.

After installing and activating Proteo, go to Appearance > Proteo theme and from the skin you prefer, click on the Import button.

Import demo content

Import start

This will start the wizard, where you can choose whether to create a child theme, install the recommended plugins, select the skin you prefer to import

Select the skin

Start customizing

Now, you site looks exactly as the one on our demo. You can start editing and customizing it!

Product catalog


WooCommerce Product catalog

General options

Choose how to display categories, subcategories, products, and how to sort them.

Product catalog general options

Shop page display:

      • Show products
      • Show categories
      • Show categories and products

Category display:

      • Show products
      • Show subcategories
      • Show subcategories and products

Default product sorting:

Select here the default sorting for products displayed on your archive pages. Users will however be able to select a different sorting manually from the dropdown menu in the top right corner.

    • Default (custom ordering + name)
    • Popularity (sales)
    • Average rating
    • Sort by most recent
    • Sort by price (asc)
    • Sort by price (desc)

Sort by dropdown


Products per row: you can select from 2 to 6 products per row.

Rows per page: you can select from 2 up to 8 rows per page.

In the following screenshot, for example, there are 5 products per row and a maximum of 2 rows per page.

Rows and columns

Space between products (px): you can select the space (in px) between products horizontally and vertically.

Display options

Product catalog display optionsProduct catalog display options


Enable border: yes/no

Border width (px): select borders width (top, bottom, left, right) in px

Border radius (px): select border radius in px

Border color: choose the color of the border

Product hover effect:

      • None
      • Glow: contrast is enhanced to make the image look brighter
      • Zoom: the image will be slightly enlarged on mouse-hoverzoom effect
    • Alternative image: it will automatically pick the first image in the product gallery
      Product alternative image
    • Glow + alternative image: it will load the alternative image and apply the glow effect on it.

Product TITLE font size: default value set to 14px

Product TITLE font color

Product PRICE font size: default 14px

Product PRICE font color

Add to Cart options

Product catalog Add to cart options

Add to cart style:

      • Textual link
      • Button style 1
      • Button style 2

To customize the two available button styles of the theme, please, refer to Theme options > Miscellaneous > Buttons. You can find out more on this page.

Add to cart font size: default 14px

Add to cart position on archive pages (Shop, category, and tag pages)

      • Classic: it will be displayed below the product image
      • On image hover: it will be displayed above the product image on mouseover

Show “View details” link: this is the button that opens the product detail page. If set to NO, the full image will be clickable, if set to YES, you will be able to choose the style of this link.

“View details” style:

      • Textual link
      • Ghost button

View details

Shop page sidebar

Shop page

From this menu you can choose whether the Shop page will have a sidebar or not and where to show it, on the right or left.

If you enable the sidebar, you will be able to pick one of your sidebars.

To configure the sidebars of your theme, please, go to Theme > Appearance > Widgets.

Product taxonomy page


Sidebar position in product taxonomy pages

From this panel, you can choose a specific sidebar layout and pick one of your available sidebars to show on all product taxonomy pages, like attributes, brands etc.

You can override these settings, and for example show a custom sidebar or no sidebar at all, from the product page. Please, refer to this page for more details.

Product images

Product images

Main image width: this is the width of the main image on the product page. The theme will automatically regenerate images of the right size without cropping the images. You can resize them at any time.

Thumbnail width: this is the width of the product image on archive pages like Shop page, category pages etc.

Thumbnail cropping:

  • 1:1
  • Custom: you can enter your own ratio here
  • Uncropped: images will use their original ratio



From this page, you can customize some of the standard checkout fields:

  • Company name field
  • Address line 2 field
  • Phone field

And choose whether to make them:

  • Hidden
  • Optional
  • Required

Additionally, you can Highlight required fields with an asterisk

And set custom pages of your website as links for the:

  • Privacy Policy page
  • Terms and Conditions page

Frontend checkout

Site background image

In the Miscellaneous menu you will be able to choose the Site background image.

Site background image

Here you can add an image that will be displayed as background for your entire site.

In the Preset, you can choose how to display it:

  • Default
  • Fill screen
  • Fit to screen
  • Repeat
  • Custom

Based on the preset chosen, you will also be able to choose:

  • Image position
  • Image size:
    • Original
    • Fill screen
    • Fit to screen
  • Repeat background image
  • Scroll with page

Block editor colors

Replace the default color swatches of the Gutenberg block editor with your custom colors. In this way when you create a new page using Gutenberg you will find these colors and you can easily apply them to the page elements.

Block editor colors


Here you can enable the breadcrumbs, i.e. the navigational links that will show on products, posts and pages.




In this menu you will find two sections.

1. Global layout options

Configure here:

  • site content spacing in pixels and
  • choose whether to use a full width layout, no matter which resolution your screen has.

2. Page title options

  • Layout:
    • Inside page content
    • Outside page content
  • Alignment:
    • Left
    • Center
    • Right
  • Spacing (px)