Magento 2.1.x. How to Manage Theme Options Extension

Here you can find the instructions on how to manage Theme Options extension.

Access the Module Settings

1. In order to customize the module, click the Stores > Settings > Configuration.

2. Then choose the TEMPLATEMONSTER > Theme Options in the left side menu and you’ll move to the module settings interface.

⚑ 2.1. Click on the Store View: Default Config.

2.2. Select a Store View you want to modify from the option dropdown.

2.3. Confirm the scope switching in the pop-up window. Press “OK” to confirm.

After that, you will see a new tab. The Theme color settings tab under the General one.

➤ The Tab structure is as follows:

General

Let’s review the options available:

Logo Settings

For Image Logo Type:

Use Logo Type — choose type of the logo (image logo).
Logo Image — you can upload your logo image [Allowed file types: png, gif, jpg, jpeg, svg].
Logo Image Width — set a Logo image width in pixels.
Logo Image Height — set a Logo image height in pixels.
Logo image alt text — set a Logo image alternative text.

For Text Logo Type:

Use Logo Type — select type of logo (text logo).
Logo Text — enter text for logo.
Logo Font Size — enter font size for logo text in pixels. Example: 48.
Logo Line Height — enter line height for logo text in pixels. Example: 48.
Logo Font Color — set color for logo text in the hex format. You can select a color from the Color Palette.
Use slogan — Enable/Disable slogan. (If you enable this option, additional options became available.)
Slogan Text — enter text for slogan.
Slogan Font Size — enter font size for slogan text in pixels. Example: 28.
Slogan Line Height — enter line height for slogan text in pixels. Example: 28.
Slogan Font Color — set color for slogan text in hex format.
Slogan Position — select slogan position relative to the logo.

SEO

Welcome text – you can change default welcome text.
Favicon icon – allowed file types: ico, png, gif, jpg, jpeg, apng, svg. Not all browsers support all these formats!
Site title – set a title site on homepage.
Default description – you can input default description for your store.
Default keywords – input keywords for your store.
Copyright – input your copyright. The text will be displayed as copyright message in the footer.

Theme color settings

Please note: for display Theme color settings and apply color scheme you need select your website (1). If you want to edit each color individually, you need to choose store (2).
All colors set in HEX format: #xxxxxx.

Let’s review the options available:

Uncheck Use Website to change the Color Scheme settings.

Color scheme status

Color scheme status — enable/disable color scheme.
Color scheme — choose color scheme for site.

Header

Header background color — the header background color in hex format. You can select a color from the Color Picker.
Header background image — Enable/Disable header background image.
Background image — upload the header background image file. Allowed file types: ICO, PNG, GIF, JPG, JPEG, APNG, SVG. Not all browsers support all these formats!
Background position — set the header background image position.
Background repeat — set the header background image repeat.
Background size — set the header background image size.
Background attachment — set the header background image attachment.

Content

Primary color — the primary color in hex format.
Secondary color — set the secondary color in hex format. You can select a color from the Color Palette.
Body background color — body background color in hex format.
Body background image — Enable/Disable body background image.
Background position — upload the body background image file. Allowed file types: ICO, PNG, GIF, JPG, JPEG, APNG, SVG. Not all browsers support all these formats!

Background repeat — choose how background image will be repeated: Repeat, No Repeat, Repeat X, Repeat Y.

Background size — choose your background image size: Auto, Cover, Contain.

Background attachment — body background image attachment: Scroll (scroll with content), Fixed (no scroll with content).

Footer

Footer background color — choose the color for your footer. You can select a color from the Color Palette.
Footer background image — enable/disable the footer background image.
Footer color — set the footer color in hex format.
Footer link color — set the footer color in hex format.
Footer link hover color — the footer link hover color in hex format.
Footer title color — footer title color in hex format.
Footer bottom background color — the footer bottom background color in hex format.

Typography

Settings for the Typography tab are the following:

Primary font family — set primary font family name. Make sure, that specified font is included.
Secondary font family — set secondary font family name.
Primary font size — set primary font size [number with units e.g. 16px, 1.2em etc.]
Primary line height — set primary line height [number with units e.g. 16px, 1.2em etc.]

Category Page

Settings for Category page in a list/grid view.

Grid View

Number of columns — specify number of product listing columns in grid view.
Choose hover type — select type of product hover on product listing.
Image width — product image width in pixels.
Image height — product image height in pixels.
Use aspect ratio — using image aspect ratio.
Show swatches — show swatches block in listing. [1]
Show compare — select if you want to show a compare button. [2]
Show wishlist — select if you want to show a wishlist button. [3]
Show reviews — select if you want to show a reviews section. [4]
Show product description — select if you want to show a product description section. [5]

List View

Image width — product image width in pixels.
Image height — product image height in pixels.
Use aspect ratio — image aspect ratio.
Show swatches — select if you want to show a swatches block. [1]
Show compare — select if you want to show a compare button. [2]
Show wishlist — select if you want to show a wishlist button. [3]
Show reviews — select if you want to show a reviews section. [4]
Show product description — select if you want to show a product description section. [5]

Product Page

You see three tabs: General, Tabs section, Gallery settings.