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.
theme-options-zemez-image-magento

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.

theme-options-zemez-image-magento
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:
theme-options-zemez-image-magento

  • 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:
theme-options-zemez-image-magento

  • 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

theme-options-zemez-image-magento

  • 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.

theme-options-zemez-image-magento

Let’s review the options available:

Uncheck Use Website to change the Color Scheme settings.

Color scheme status
theme-options-zemez-image-magento

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

theme-options-zemez-image-magento

  • 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.
Contenttheme-options-zemez-image-magento
  • 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!

theme-options-zemez-image-magento

  • 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

theme-options-zemez-image-magento
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.
theme-options-zemez-image-magento

Grid View

theme-options-zemez-image-magento

  • 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

theme-options-zemez-image-magento

  • 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]

theme-options-zemez-image-magento

Product Page

You see three tabs: General, Tabs section, Gallery settings.
theme-options-zemez-image-magento

General

theme-options-zemez-image-magento

  • Show stock — show product stock status. [1]
  • Show sku — show product sku. [2]
  • Show compare — show a compare button. [3]
  • Show wishlist — show a wishlist button. [4]
  • Show email to friend — show a button email to friend. [5]
  • Show reviews — show a reviews section. [6]
  • Show product short description — show short description section. [7]

theme-options-zemez-image-magento

  • Show related products — show related products on a product page. [8]
  • Related products count — specify the number of related products.
  • Related image width — related image width in pixels.
  • Related image height — related image height in pixels.
  • Show related checkbox — show checkbox “Add to Cart” on relate product.You can add few products in a cart if you select product. Configurable products do not support the Show related checkbox option.
  • Show upsell products — show upsell products section. [9]
  • Upsell products count — specify the number of upsell products.
  • Upsell image width — upsell image width in pixels.
  • Upsell image height — upsell image height in pixels.

theme-options-zemez-image-magento

Tabs sections

theme-options-zemez-image-magento

  • Show description — show a description tab.
  • Description tab title — input tab title for description tab. [10]
  • Show additional — show an additional information tab.
  • Additional tab title — set the tab title for additional tab. [11]
  • Show reviews — show a reviews tab.
  • Reviews tab title — input tab title for reviews tab. [12]

theme-options-zemez-image-magento

Gallery settings

Allows you to alter images size on the product pages.
theme-options-zemez-image-magento

  • Image width — thumbnail image width in pixels.
  • Image height — thumbnail image height in pixels.

Header

In Header tab you have one Social links section.

Social links

theme-options-zemez-image-magento
You can add link to your social network using Font Icon or Image icon.

Image icon

For adding URL with image, you need add social url, width of icon, alternative text to image and upload image.
theme-options-zemez-image-magento

Font Icon

For adding URL with FontIcon, you need add icon CSS Class, social url, set font size and line height
theme-options-zemez-image-magento

Footer

theme-options-zemez-image-magento
In footer you can add social link and set the position.

Image icon

For adding URL with image, you need add social url, width of icon, alternative text to image and upload image.
theme-options-zemez-image-magento

Font Icon

For adding URL with Font Icon, you need add icon CSS Class, social url, set font size and line height.
theme-options-zemez-image-magento

Sidebar

theme-options-zemez-image-magento

  • Show Wishlist — show/hide Wishlist block.
  • Show Compare — show/hide Compare block.
  • Show Recently Viewed Products — show/hide Recently Viewed block. Make sure, that the widget was created.
  • Show Recently Compared Products — show/hide Recently Compared block. Make sure, that the widget was created.
  • Show My Order — show/hide My Orders block.