There are a couple of sections in the platform that you can go to access design configurations to make your marketplace tailored to your designs. Please note that this will primarily apply to out of the box Porto themes, however you can use these as a starting point if you would like to develop your own theme based off an already existing demo.

It is advised to have some content already set up. Essentially at this point, you should at least have completed Step 9 and actually onboarded a vendor with dummy products so that you can see how your marketplace looks with data, before configuring the design.


Configuring the theme

Ensure that you have already configured to use Smartwave Porto (or whichever you are using under the Content > Design > Configuration). You can revisit this step here (Step 3).

In our example, we needed some customisations to our design, so we had created a new theme (which is a child theme of the Smartwave Porto theme). Go to Content > Design > Configuration > {Your Theme} > Edit to start configuring the theme settings.

Default Theme

Here you can set up the theme that you need to apply to the marketplace. Generally this should have already been set up in Step 3 unless you are using your own theme.

Design Rule

You can generally skip this step

Other Settings

1. HTML Head

Field Name

Notes

Favicon Icon

Upload the icon to be used for the website. Allowed file types: ico, png, gif, jpg, jpeg, apng. Note that not all browsers support all these formats.

Note - the Favicon is used to display an icon for the top of the web browser/tab.

Default Page Title

Change the title of your header

Page Title Prefix

You can use a suffix and/or prefix with the default title to create a two-or three part title. You can add a vertical bar or colon as a separator between the prefix or suffix and the default title.

Leave empty if not needed.

Page Title Suffix

You can use a suffix and/or prefix with the default title to create a two-or three part title. You can add a vertical bar or colon as a separator between the prefix or suffix and the default title.

Leave empty if not needed.

Default Meta Description

Add or modify meta descriptions to support Search Engine Optimization (SEO) and help steer customers to your store from search results

Default Meta Keywords

Add or modify meta keywords to support Search Engine Optimization (SEO) and help steer customers to your store from search results

Scripts and Style Sheets

This will be included before head closing tag in page HTML. You can enter any custom scripts and style sheets as needed.

Display Demo Store Notice

Keep this set to No.

2. Header

Field Name

Notes

Logo Image

Identifies the path to the logo that appears in the header. Supported file types: PNG, GIF, JPG (JPEG)

Logo Attribute Width

The width of your logo image in pixels.

Logo Attribute Height

The height of your logo image in pixels.

Welcome Text

The welcome message appears in the header of the page and includes the name of customers who are logged in.

Logo Image Alt

The Alt text that is associated with the logo.

3. Footer

Field Name

Notes

Miscellaneous HTML

This will be displayed just before the body closing tag. Here you can add any additional HTML for the footer if required.

Copyright

This is the text used to display copyright information.

Display Report Bugs Link

Set this to No.

4. Search Engine Robots

Field Name

Notes

Default Robots

This can only changed by the parent theme - ensure it is configured correctly when you are going on the Live site, that it is set to INDEX, FOLLOW so that it is crawlable.

Edit custom instruction of robots.txt File

This action will delete your custom instructions and reset robots.txt file to system's default settings. Add your own custom instructions here. Also only editable in the parent theme.

5. Product Image Watermarks

There are 4 types of images that you can apply watermarks to:

  • Base

  • Thumbnail

  • Small

  • Swatch Image

All 4 types will have the following fields (if applicable)

Field Name

Notes

Image

Upload your watermark image

Allowed file types: jpeg, gif, png.

Image Opacity

% amount for the opacity of the image

Image Size

Dimensions (Eg 200x300)

Image Position

Set where and how the image will appear. The options are:

6. Pagination

Field Name

Notes

Pagination Frame

How many links to display at once.

Pagination Frame Skip

If current frame position does not cover utmost pages, it renders the link to current position plus/minus this value.

Anchor Text for Previous

Alternative text for the previous pages link in the pagination menu. If empty, the default arrow image is used.

Anchor Text for Next

Alternative text for the next pages link in the pagination menu. If empty, default arrow image is used.

7. Transactional Emails

Field Name

Notes

Logo Image

Image used for the logo in transactional emails (eg order emails).

Allowed file types: jpg, jpeg, gif, png. To optimize logo for high-resolution displays, upload an image that is 3x normal size and then specify 1x dimensions in the width/height fields below.

Logo Image Alt

The Alt text that is associated with the logo.

Logo Width

Necessary only if an image has been uploaded above. Enter number of pixels, without appending "px".

Logo Height

Necessary only if an image has been uploaded above. Enter image height size in pixels without appending "px".

Header Template

Email template chosen based on theme fallback, when the "Default" option is selected.

Footer Template

Email template chosen based on theme fallback, when the "Default" option is selected.


Configuring the Porto - Settings Panel Section

You can configure the initial settings (structure and features) by going to Stores > Settings > Configuration > Porto 3.2.4 > Porto - Settings Panel

Please note that after you have imported a demo, some of these settings may already be set from the demo you installed. You can see the full list of the Porto settings here in the Porto documentation, however you can check below the fields that can be useful to modify (depending on your design).

NOTE: You may need to implement some custom CSS when changing some of these options, to match with the rest of the demo if you are making changes to the default implementation.

NOTE: Each time you make a change here, you may also need to clear the Magento Cache.

General

Field Name

Notes

Maximum Page Width

1140px is default, however you can manage 1280px width for the template (though some elements may not reflect this so it's a good idea to review the site once you've made this change).

Header

Field Name

Notes

Header Types

You can see which header type is used for this demo, however you can also choose a different header type that may be applicable to your marketplace. See the header examples here.

Sticky Header

You can enable Sticky Header to keep the website header at the top of the browser window when a user is scrolling down the page.

Footer

This is generally quite self explanatory. A lot of the fields here reference the Top, Middle or Bottom section of the footer. See below:

Here you can specify different widths to some of the columns, however please note that you will need to ensure it fits correctly. Your demo may already have customised how this would be laid out, but if you make changes to one of the column sizes, it will impact the footer as a whole, so keep that in mind when changing the settings.

Category View & Product View

This would be depending if you wanted to make any additional customisations to the display of the Category and Product View. You can also choose to hide some of the product features (if not used) in the Product grouping too. Each grouping will have a variety of options you can change, however for the most part (unless you already know what you want to change) you can leave these as defaults.

Product Label

Here you can choose to show the "New" and "Sale" labels on the product tiles.

Newsletter Popup

Porto comes with a standard Newsletter Pop Up template which you can also configure. If you have this enabled, you will see the pop up as per below appear on the front end:

NOTE: this is sometimes left disabled during development as it will make it easier to access the site over and over again without having to be prompted.

Field Name

Notes

Enable

You can choose to Enable this on just the Home Page, or on all pages as soon as the user lands on the site. You can also choose to Disable it here.

Delay(miliseconds)

Choose the milliseconds delay before the pop up appears after the page has finished loading. 5000 by default.

The rest of the configurations here are design based.

Contact Us

By default, there is a Contact Page that is added by Porto. You can visit it by going to your /contact on your marketplace URL (eg https://demo.omnyfy.com/contact). This is customisable in this section.

Field Group

Notes

Google Map

Here you can specify Google keys, and the address of your location as well as customising the size/zoom level of the map.

Contact Info

Here you can specify in the "Info Text" the section to the right of the form. You can also set a custom block to appear before the form should you have any additional information / text you would like to add.

Customization Settings

Here you can implement additional styles and custom font installations.

Field Name

Notes

Custom Google Fonts

If your font has an '@import url' function (like Google Fonts), you can add it in this field.

EG: @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");

Custom Style 1 & Custom Style 2

You can use 2 custom boxes to add custom CSS to the page.

EG:
.page { padding: 0; margin: 0; }
.main { font-size: 14px; font-weight:400; }

You can use Custom Style 2 as a spare field to either separate out the types of styles, or for use with multi store - So you can add your global custom styles into this field.

Configuring the Porto - Design Panel Section

You can configure the initial settings (structure and features) by going to Stores > Settings > Configuration > Porto 3.2.4 > Porto - Design Panel

You can see the full list of the Porto settings here - however for the most part, the fields will be quite self explanatory - primarily working with colours customisation

Where Page Wrapper and Main Container are configured, you can choose to customise how the general colours for the page backgrounds and styles are set. The difference with the two, is that with the Main Container, you can set colour options for main container only, compared to page wrapper - it means the main content part except header and footer area from entire page.


As a standard reminder, you will need to clear cache after each change (or after doing bulk changes) in order to see it appear on the front page.

NOTE: If you are applying custom styles via your own theme - please note that depending on how you have customised your own theme, it may not be affected by the changes you set in the configuration as this is working directly with the Porto Theme.

Did this answer your question?