Express offer for the development of a fast online store for 7999 UAH details...

Customize the module Global settings SEO-shop

Module “Global settings SEO-shop” allows you to change the appearance of the online store on OpenCart, {SEO Store} directly from the admin panel. You can easily change the design elements, the overall style, color of buttons, sticky menu design the main menu and other components of the website.

To configure the module should go to the admin panel and click on “Extras”->”Modules”. In the list of modules to choose “NeoSeo Global store settings” (in some versions it is possible to name: “the NeoSeo UNISTOR”) and click on “Edit”:

After that, the window for editing module settings will appear on the screen:

Also, you can go to the module settings editing window by clicking on the “Design Settings” menu item in the site’s administrative panel:

Options Tab

The “Settings” tab allows you to set personal settings for the appearance of the site modules, buttons, pagination, links, tabs, as well as set general site design settings (background color, general design style, logo).

This tab consists of the following sections: “Basic Settings”, “Module Settings”, “Buttons”, “Buttons Up”, “Pagination Settings”, “Link Settings”, “Tab Settings”.

The “Basic Settings” section is designed to configure the following options:

  • Logo. A field for adding / editing a site logo. To add a logo, left-click on the logo image, and then on the “Edit” button. The field is multilingual, i.e. allows you to add a logo for each language version of the site:
  • General style. Field for choosing the general style of the site:

If you select flat (flat design), the site will look like this:

If you select the Material design value, the site will look like this:

  • Primary background color. The field used to select the background color of the site:

Important!!! You cannot use the rgb color format, for example, “rgb (255, 157, 87)”. The correct one will be “# ff9d57”.

  • Background image. A field for selecting an image that will act as the background for the site. To add a background image, left-click on the field and then on the “Edit” button:

For example, select an image and set it as the background:

As a result, this image is set as the main background:

If you don’t need to use an image as a background, leave this field blank.

  • Social sharing code. This option allows you to add buttons to the product’s card to go to social networks, for example, go to twitter, facebook, googleplus buttons. For example, set the transition buttons on twitter, facebook, googleplus. To do this, enter the following code in this field:

As a result, in the product card, it is possible to switch to the selected social networks:

Personal css. This field must be filled in if you want to add your personal settings for the site: add a different style. For example, the search bar is displayed on the main page of the site:

Hide the search bar from the main page. To do this, you do not need to change the code template for your site, just enter the necessary style in the “Personal css” field:

As a result, on the main page of the site, the search bar is not displayed:

Important!!! After adding all the changes, click the “Save” button:

The “Module Settings” section is intended for setting the color scheme of the modules:

This section allows you to configure the following options: block header color, block background color, block border color, header color, text color.

To change the color scheme of the module, select the necessary options and set the desired colors. Important!!! You cannot use the rgb color format, for example, “rgb (255, 157, 87)”. The correct one will be “# ff9d57”.

For an example, we will set the following color scheme:

As a result, the module block will have the following form:

Important!!! After adding all the changes, click the “Save” button:

The “Buttons” section is intended for setting the color scheme of the site buttons:

This section allows you to configure the following options: button background color; button text color; hover buttons background color; hover button text color; color of comparison icons, magnifiers, add to favorites.

To change the color scheme of the buttons, select the necessary options and set the desired colors. Important!!! You cannot use the rgb color format, for example, “rgb (255, 157, 87)”. The correct one will be “# ff9d57”.

For an example, we will set the following color scheme:

As a result, the buttons on the site will look like this:

The “Up button” section is for adjusting the color of the “Up” button:

This section allows you to configure the following options: background color of the button up; button text color up; button background color up on hover; button text color up on hover.

To change the color scheme of this button, select the necessary options and set the desired colors. Important!!! You cannot use the rgb color format, for example, “rgb (255, 157, 87)”. The correct one will be “# ff9d57”.

For an example, we will set the following color scheme:

As a result, the “Up” button will look like this:

And the “Up” button on hover will look like this:

Section “Configuring pagination”. This section allows you to configure the color scheme of pagination:

Pagination is the serial numbering of pages, which is usually located at the top or bottom of the site’s pages.

This section allowschoose link background color, link text color, hover link background color, hover link text color, active link background color, active link text color.

To change the color scheme of pagination, select the necessary options and set the desired colors. Important!!! You cannot use the rgb color format, for example, “rgb (255, 157, 87)”. The correct one will be “# ff9d57”.

For an example, we will set the following color scheme:

As a result, pagination on the site will look like this:

Section “Link Settings”. This section allows you to customize the color of links on the site: the color of the text of the links and the color of the text of the links on hover.

To change the color scheme of links, select the necessary options and set the desired colors. Important!!! You cannot use the rgb color format, for example, “rgb (255, 157, 87)”. The correct one will be “# ff9d57”.

For an example, we will set the following color scheme:

As a result, the links on the site will look like this:

Section “Tab Settings”. This section allows you to customize the color scheme of tabs: the background color of the tabs, the color of the text of the tab, the background color of the active tab, the background color of the tabs on hover, the color of the text on the tabs on hover.

To change the color scheme of tabs, select the necessary options and set the desired colors.

Important!!! You cannot use the rgb color format, for example, “rgb (255, 157, 87)”. The correct one will be “# ff9d57”.

For an example, we will set the following color scheme:

As a result, the tabs on the site will look like this:

Hat tab.

The “Cap” tab is designed to work with the top of the web page design layout. This tab contains the following sections: sticky menu, top banner, top menu, main content, main menu.

Sticky Menu Section. A sticky menu is a fixed menu when scrolling through a page. To display it on the site, you need to configure the following options:

Use sticky menu. To display a sticky menu on a site, select “Enabled” in this field:

After that, when scrolling through the pages, a sticky menu will appear in the header of the site:

Type of sticky menu. In the module “NeoSeo Unistor” there is a possibility to choose the type of sticky menu:

The first type - “Search + Phones” displays a search bar in the sticky menu, as well as telephones for communication:

The second type - “Catalog + menu” displays the product catalog in the sticky menu, as well as one of the listed menus (top menu, main menu, information in the basement, support in the basement, personal account), which must be specified in the “Source of menu items” field . For an example, we will display the top menu in the sticky menu:

As a result, the sticky menu will look like this:

Text color. A field designed to select the text color in the sticky menu:

Background color. The field intended for choosing the background color of the sticky menu:

Background image. A field designed to select an image that will act as the background of a sticky menu:

Color icons. The field intended for choosing the color of the icons in the sticky menu:

For example, we indicate the following color scheme of the sticky menu:

As a result, the sticky menu will look like this:

Important!!! After adding all the changes, click the “Save” button:

Section “Top banner”. To display the top banner on the site, you need to configure the following options:

Include top banner. To display the top banner on the site, select “Enabled” in this field:

Banner height. A field used to indicate the height of the top banner. For an example, we will specify value 400:

Background color of the top banner. The field used to select the background color of the top banner. For an example, we will specify a white background color:

Background image. The field used to select the background image of the top banner. The field is multilingual, i.e. allows you to add a banner image for each language version of the site:

Link to the banner. If you need to make a clickable image (that is, so that when you click on the image to redirect to a specific page), enter the necessary link in this field:

Important!!! After adding all the changes, click the “Save” button:

As a result, the site displays the top banner with the specified parameters:

Section “Top Menu”. This section allows you to select the source of menu items in the header of the site, as well as adjust the color scheme of the top menu:

The “Top Menu” section contains the following options:

“Source of menu items”. This option allows you to select one of the proposed options as menu items:

Icon layout for menu items. The option allows you to choose the location of the icons in the selected menu: set them to the right or left of the menu items:

The height of the top menu. A field that allows you to specify the desired height of the top menu:

The height of the text of the top menu. A field that allows you to specify the required font size for the text that appears in the top menu:

The color scheme of the top menu. To change the color scheme of the top menu, select the necessary options and set the desired colors.

Important!!! You cannot use the rgb color format, for example, “rgb (255, 157, 87)”. The correct one will be “# ff9d57”.

Important!!! After adding all the changes, click the “Save” button:

Section “Main Content”. This section allows you to set the necessary design of the main content in the header of the site, as well as configure its content (phone numbers, working hours, frequently used requests):

To design the main content of the website header, you must fill in the fields:

“Block Height”;

“Background color” or “Background image”.

To set up phone numbers and work schedule, fill in the fields “Phone 1”, “Phone 2”, “Phone 3” and “Operating time”.

Important! If you want the mobile operator’s logo to be displayed in front of the phone number, you will need to enter:

For Kyivstar and phone number, i.e. +380 67 67-07-647

For "Life" and phone number.

For "Vodafone" and phone number.

To add a line with frequently used search queries, you need to fill in the corresponding field:

As a result, the added queries will be displayed under the search bar. When you click on a query, it will automatically appear in the search bar.

Important!!! After adding all the changes, click the “Save” button:

Section “Main Menu”. This section allows you to select the source of the items on the main menu of the site, as well as set its necessary design:

The “Main menu” section contains the following options:

“Source of menu items”. This option allows you to select one of the proposed options as menu items:

Type of menu. The option allows you to select the desired type of menu: horizontal menu, vertical menu:

Icon layout for menu items. The option allows you to choose the location of the icons in the selected menu: set them to the right or left of the menu items:

The height of the top menu. A field that allows you to specify the required height of the main menu:

The height of the text of the top menu. A field that allows you to specify the required font size for the text that appears in the top menu:

The design of the main menu. To change the appearance of the main menu, select the necessary options and set the desired parameters.

For example, we indicate the following parameters:

As a result, we get the following view of the main menu:

Important!!! After adding all the changes, click the “Save” button:

Basement tab.

The basement of the online store (IM) is its lower part, which is displayed on all pages of your IM. Here you can display contact information, personal account of the buyer, information about the support service, etc.

To edit the “Basement” of a site, select the “Basement” tab. The basement of IM is divided into 3 parts: upper, middle and lower.

The upper part of the basement consists of two sections that can be filled with the necessary information, as well as adjust their display:

The middle part of the basement is divided into 3 columns. In each column you can display your text or display the desired menu.

An important nuance is the use of the
tag. Use it if the text needs to be wrapped to the next line. After adding all the changes, click the “Save” button.

At the bottom of the basement, you can add the necessary inscription, links to social networks, as well as display a list of payment systems that IM works with.

To add links to social networks, in the field “Social networks” add the following code:

 

To add a list of payment systems, in the field "Payment systems" add the following code:

 

After adding all the changes, click the “Save” button.

Tab “Contacts”.

The contact page of the online store should contain:

Contact phones (preferably with addressees);

Email address (s) and feedback form;

The physical address of the office and its opening hours;

Map or route, how to get there.

To edit the contact page, go to the “Contacts” tab. It consists of three sections: sections, map and communication form.

Section “Sections”. To add sections to the contact page, go to the “Contacts” tab -> “Sections” and select “Enabled” in the “Show sections” field.

After that, you can enter the necessary data in the section. There are only four of them.

An important nuance is the use of the
tag. Use it if the text needs to be wrapped to the next line. After adding all the changes, click the “Save” button.

Section “Map”. In order to add a card to the contact page, you must in the field “Show cards”Select the necessary card - google or Yandex:

After that, go to https://developers.google.com/maps/documentation/javascript/get-api-key and get the key. Paste this key into the “Google api key” field and fill in the “Latitude” and “Longitude” fields.

As a result, the selected map is displayed on the contact page:

Section “Contact Form”. To add a contact form to the contact page, go to the “Contacts” tab -> ”Contact form” and select “Enabled” in the “Show contact form” field

As a result, the contact form will be available on the contact page:

Important!!! After adding all the changes, click the “Save” button:

Categories tab.

This tab allows you to customize the display of products in categories. To edit these settings, go to the “Categories” tab:

This tab contains the following fields:

Product displays by default. This field is intended for choosing the type of display of goods by default in categories / search / manufacturers, etc. This field contains the values: “Grid”, “List”, “Table”:

If you select “Grid”, the goods will have the following form:

If you select “List”, the goods will look like this:

If you select “Table”, the goods will have the following form:

The number of columns. This field is intended to indicate the number of columns in the product lists:

The second picture on hover. This option allows you to display the second image of the product, when you hover over the image of the product:

Image without mouse over the product

Hover over image

Display subcategories. If the category contains subcategories, then when you select “Publish” in this field, the data of the subcategory will be displayed in the window:

If you select “Hide” in the field, the subcategories will not be displayed on the window:

To indicate the required size of the picture in the subcategory, specify the height and width of the picture in the fields “Picture height of the subcategory”, “Width of the picture of the subcategory”:

Display attributes on a product block. If you select “Enabled” in this field, the product attributes will be displayed in the product block:

The following fields are editable, if you select “Enabled” in the “Display attributes on product block” field and are used to configure the display of product attributes:

Tab “Product”.

The “Products” tab allows you to edit the output settings for products and their characteristics on the page. To edit these settings, go to the “Products” tab:

This tab contains the following fields:

Display the previous and next product in the product card. This option is designed to display the buttons “Previous” and “Next” product in the product card.

Display links to the previous and next product in meta tags. If you select “Publish” in this field, links to the previous and next product will be displayed in meta tags:

Magnification for the main picture. A field for selecting a method for displaying an enlarged image of a product. This field contains the following values: “Hide”, “Near”, “Inside”:

If you select “Near” and hover over the product image, the enlarged image will look like this:

If you select “Inside” and hover over the image of the product, the enlarged image will look like this:

If you select “Hide” and hover over the product image, the enlarged image will not be displayed.

Display the product description in the header. To display the characteristics of the goods in the product card, in this field, mark the necessary characteristics:

As a result, the product card will look like this:

Color status. This field is used to select the text color for product statuses:

Information about delivery. A field intended for adding information that will be displayed in the product card in the “Delivery Information” block. The field is multilingual, i.e. allows you to add information for each language version of the site:

Payment Information. A field intended for adding information that will be displayed in the product card in the “Payment Information” block. The field is multilingual, i.e. allows you to add information for each language version of the site:

Warranty Information. A field intended for adding information that will be displayed in the product card in the “Warranty Information” block. The field is multilingual, i.e. allows you to add information for each language version of the site:

As a result, the product card will have the following form:

Important!!! After adding all the changes, click the “Save” button:

Related products