Налаштування модуля Глобальні налаштування SEO-магазину

Модуль "Глобальні налаштування SEO-магазину" дозволяє змінювати зовнішній вигляд Інтернет-магазину на OpenCart, {SEO-Магазину} прямо з адмінки. Ви легко можете змінювати елементи дизайну, загальний стиль, колір кнопок, липке меню, оформлення основного меню та інші складові сайту.

Для налаштування модуля необхідно перейти в адміністративну панель сайту і вибрати розділ "Додатки"->"Модулі". В списку модулів вибрати "NeoSeo Глобальні налаштування магазину" (в деяких версіях можливо назва: "NeoSeo Юнистор") і натиснути на кнопку "Редагувати":

Після цього на екрані з'явиться вікно редагування налаштувань модуля:Також, перейти до вікна редагування налаштувань модуля можна, натиснувши на пункт меню "Налаштування оформлення" в адміністративній панелі сайту:

Вкладка "Параметри"

Вкладка "Параметри" дозволяє задати персональні налаштування для зовнішнього вигляду модулів сайту, кнопок, пагінацію, посилань, табів, а також задати загальні налаштування оформлення сайту (колір фону, загальний стиль оформлення, логотип).

Дана вкладка складається з розділів: «Основні параметри", "Налаштування модулів", "Кнопки", "Кнопки наверх", "Налаштування пагінації", "Налаштування посилань", "Налаштування табів".

Розділ «Основні параметри" призначений для налаштування наступних опцій:

• Логотип. Поле, призначене для додавання / редагування логотипу сайту. Для додавання логотипу, натисніть лівою кнопкою миші на зображення логотипу, а потім на кнопку "Редагувати". Поле є багатомовним, тобто дозволяє додати логотип для кожної мовної версії сайту:

• Загальний стиль. Поле, призначене для вибору загального стилю сайту:

При виборі значення flat (плоский дизайн), сайт матиме такий вигляд:

При виборі значення Material design (матеріал дизайн), сайт матиме такий вигляд:

• Основний колір фону. Поле, призначене для вибору кольору фону сайту:

Важливо !!! Не можна використовувати формат кольору rgb, наприклад "rgb (255, 157, 87)". Правильним буде "# ff9d57".

• Фонове зображення. Поле, призначене для вибору зображення, яке буде виступати в якості фону сайту. Для додавання фонового зображення, натисніть лівою кнопкою миші на поле, а потім на кнопку "Редагувати":

Для прикладу, виберемо зображення і встановимо його в якості фону:

В результаті, дане зображення встановлено в якості основного фону:

Якщо в якості фону не потрібно використовувати зображення, залиште це поле порожнім.

• Код шеринга в соціальні мережі. Дана опція дозволяє додати в картку товару кнопки для переходу в соціальні мережі, наприклад, кнопки переходу в twitter, facebook, googleplus. Для прикладу, встановимо кнопки переходу в twitter, facebook, googleplus. Для цього, в даному полі введіть наступний код:

<Div id = "share" class = "share-top"> </ div>

<Script>

$ ( "# Share"). JsSocials ({

showLabel: true,

shareIn: "popup",

shares: [ "twitter", "facebook", "googleplus"]

});

</ Script>

В результаті, в картці товару можливий перехід на обрані соціальні мережі:

• Персональний css. Дане поле необхідно заповнювати в тому випадку, якщо Ви хочете додати свої персональні налаштування для сайту: додати інше стильове оформлення. Для прикладу, на головній сторінці сайту відображається рядок пошуку:

Приховуємо рядок пошуку з головної сторінки. Для цього не потрібно змінювати код шаблону Вашого сайту, досить ввести необхідне стильове оформлення в поле "Персональний css":

В результаті, на головній сторінці сайту, пошуковий рядок не відображається:

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":

Розділ "Налаштування модулів" призначений для налаштування колірного оформлення модулів:

Даний розділ дозволяє налаштувати наступні опції: колір заголовка блоку, міжлітерний, колір рамки блоку, колір заголовків, колір тексту.

Щоб змінити колір модуля виберіть необхідні опції і задайте бажані кольори. Важливо !!! Не можна використовувати формат кольору rgb, наприклад "rgb (255, 157, 87)". Правильним буде "# ff9d57".

Для прикладу, задамо наступні кольорове оформлення:

В результаті, блок модуля буде мати наступний вигляд:

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":

Розділ "Кнопки" призначений для налаштування колірної схеми кнопок сайту:

Даний розділ дозволяє налаштувати наступні опції: колір фону кнопок; колір тексту кнопок; колір фону кнопок при наведенні; колір тексту кнопок при наведенні; колір іконок порівняння, лупи, додавання в обрані.

Щоб змінити колір кнопок виберіть необхідні опції і задайте бажані кольори. Важливо !!! Не можна використовувати формат кольору rgb, наприклад "rgb (255, 157, 87)". Правильним буде "# ff9d57".

Для прикладу, задамо наступне кольорове оформлення:

В результаті, кнопки на сайті будуть мати такий вигляд:

Розділ "Кнопка наверх" призначений для налаштування кольору кнопки "Вгору":

Даний розділ дозволяє налаштувати наступні опції: колір фону кнопки вгору; колір тексту кнопки вгору; колір фону кнопки вгору при наведенні; колір тексту кнопки вгору при наведенні.

Щоб змінити колір даної кнопки, виберіть необхідні опції і задайте бажані кольори. Важливо !!! Не можна використовувати формат кольору rgb, наприклад "rgb (255, 157, 87)". Правильним буде "# ff9d57".

Для прикладу, задамо наступне кольорове оформлення:

В результаті, кнопка "Вгору" буде мати такий вигляд:

А кнопка "Вгору" при наведенні буде виглядати таким чином:

Розділ "Налаштування пагінації". Даний розділ дозволяє налаштувати колірну схему пагінації:

Пагінація - це порядкова нумерація сторінок, яка зазвичай знаходиться вгорі або внизу сторінок сайту.

Даний розділ дозволяє вибрати колір фону посилань, колір тексту посилань, колір фону посилань при наведенні, колір тексту посилань при наведенні, колір фону активного посилання, колір тексту активного посилання.

Щоб змінити колірну схему пагінації, виберіть необхідні опції і задайте бажані кольори. Важливо !!! Не можна використовувати формат кольору rgb, наприклад "rgb (255, 157, 87)". Правильним буде "# ff9d57".

Для прикладу, задамо наступне кольорове оформлення:

В результаті, пагінація на сайті буде мати наступний вигляд:

Розділ "Налаштування посилань". Даний розділ дозволяє налаштувати колір посилань на сайті: колір тексту посилань і колір тексту посилань при наведенні.

Щоб змінити колір посилань, виберіть необхідні опції і задайте бажані кольори. Важливо !!! Не можна використовувати формат кольору rgb, наприклад "rgb (255, 157, 87)". Правильним буде "# ff9d57".

Для прикладу, задамо наступне кольорове оформлення:

Таким чином, посилання на сайті буде мати наступний вигляд:

Розділ "Налаштування табів". Даний розділ дозволяє налаштувати колірну схему табів: колір фону табів, колір тексту таба, колір фону активного таба, колір фону табів при наведенні, колір тексту табів при наведенні.

Щоб змінити колір табів, виберіть необхідні опції і задайте бажані кольори.

Важливо !!! Не можна використовувати формат кольору rgb, наприклад "rgb (255, 157, 87)". Правильним буде "# ff9d57".

Для прикладу, задамо наступне кольорове оформлення:

В результаті, таби на сайті будуть мати наступний вигляд:

4. Вкладка "Шапка".

Вкладка "Шапка" призначена для роботи з верхньою частиною дизайн-макету веб-сторінки. Дана вкладка містить наступні розділи: липке меню, верхній банер, верхнє меню, основний контент, основне меню.

Розділ "Липке меню". Липке меню - це фіксоване меню при прокручуванні сторінки. Для відображення його на сайті необхідно встановити такі опції:

• Використовувати липке меню. Щоб відобразити липке меню на сайті, в даному полі виберіть значення "Включено":

Після цього, при прокручуванні сторінок в шапці сайту з'явиться липке меню:

• Тип липкого меню. У модулі "NeoSeo Юністор" існує можливість вибору типу липкого меню:

Перший тип - "Пошук + телефони" виводить в липке меню рядок пошуку, а також телефони для зв'язку:

Другий тип - "Каталог + меню" виводить в липке меню каталог товарів, а також одне з перерахованих меню (верхнє меню, головне меню, інформація в підвалі, підтримка в підвалі, особистий кабінет), які необхідно вказати в полі "Джерело пунктів меню". Для прикладу, виведемо в липкому меню верхнє меню:

В результаті, липке меню буде мати наступний вигляд:

• Колір тексту. Поле, призначене для вибору кольору тексту в липкому меню:
• Колір фону. Поле, призначене для вибору кольору фону липкого меню:
• Фонове зображення. Поле, призначене для вибору зображення, яке буде виступати в якості фону липкого меню:
• Колір іконок. Поле, призначене для вибору кольору іконок в липкому меню:

Для прикладу, зазначимо наступне колірне оформлення липкого меню:

В результаті, липке меню буде мати наступний вигляд:

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":

Розділ "Верхній банер". Для відображення на сайті верхнього банера необхідно встановити такі опції:

• Включити верхній банер. Щоб відобразити верхній банер на сайті, в даному полі виберіть значення "Включено":
• Висота банера. Поле, призначене для вказівки висоти верхнього банера. Для прикладу, зазначимо значення 400:
• Колір фону верхнього банера. Поле, призначене для вибору кольору фону верхнього банера. Для прикладу, зазначимо білий колір фону:
• Фонове зображення. Поле, призначене для вибору фонового зображення верхнього банера. Поле є багатомовним, тобто дозволяє додати зображення банера для кожної мовної версії сайту:
• Посилання на банер. Якщо необхідно зробити зображення клікабельним (тобто, щоб при натисканні на зображення відбувалося перенаправлення на певну сторінку) введіть необхідне посилання в цьому полі:

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":

В результаті, на сайті відображається верхній банер із заданими параметрами:

Розділ "Верхнє меню". Даний розділ дозволяє вибрати джерело пунктів меню в шапці сайту, а також налаштувати колірне оформлення верхнього меню:

Розділ "Верхнє меню" містить наступні опції:

• "Джерело пунктів меню". Дана опція дозволяє вибрати в якості пунктів меню один із запропонованих варіантів:
• Розташування іконок для пунктів меню. Опція дозволяє вибрати розташування іконок в обраному меню: встановити їх справа або зліва від пунктів меню:
• Висота верхнього меню. Поле, що дозволяють вказати необхідну висоту верхнього меню:
• Висота тексту верхнього меню. Поле, що дозволяють вказати необхідний розмір шрифту для тексту, який відображається у верхньому меню:
• Колірна схема верхнього меню. Щоб змінити колір верхнього меню, виберіть необхідні опції і задайте бажані кольори.

​

Важливо !!! Не можна використовувати формат кольору rgb, наприклад "rgb (255, 157, 87)". Правильним буде "# ff9d57".

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":

Розділ "Основний контент". Даний розділ дозволяє задати необхідне оформлення основного контенту в шапці сайту, а також налаштувати його вміст (номера телефонів, час роботи, часто використовувані запити):

Для оформлення основного контенту шапки сайту, необхідно заповнити поля:

• "Висота блоку";
• "Колір фону" або "Фонове зображення".

Для налаштування номерів телефонів і графіка роботи заповніть поля «Телефон 1», «Телефон 2», «Телефон 3» і «Час роботи».

Важливо! Якщо Ви хочете, щоб перед номером телефону відображався логотип оператора мобільного зв'язку, Вам необхідно буде ввести:

Для «Київстар» <i class = "phone-kyivstar"> </ i> і номер телефону, тобто <I class = "phone-kyivstar"> </ i> +380 67 67-07-647

Для «Life» <i class = "phone-life"> </ i> і номер телефону.

Для «Vodafone» <i class = "phone-vodafone"> </ i> і номер телефону.

Для додавання рядка з часто використовуваними запитами пошуку необхідно заповнити відповідне поле:

В результаті під рядком пошуку відобразяться додані запити. При натисканні на запит, він автоматично відобразиться в рядку пошуку.

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":

Розділ "Основне меню". Даний розділ дозволяє вибрати джерело пунктів основного меню сайту, а також задати його необхідне оформлення:

Розділ "Основне меню" містить наступні опції:

• "Джерело пунктів меню". Дана опція дозволяє вибрати в якості пунктів меню один із запропонованих варіантів:
• Тип меню. Опція дозволяє вибрати необхідний тип меню: горизонтальне меню, вертикальне меню:
• Розташування іконок для пунктів меню. Опція дозволяє вибрати розташування іконок в обраному меню: встановити їх справа або зліва від пунктів меню:
• Висота верхнього меню. Поле, що дозволяє вказати необхідну висоту основного меню:
• Висота тексту верхнього меню. Поле, що дозволяє вказати необхідний розмір шрифту для тексту, який відображається у верхньому меню:
• Оформлення основного меню. Для зміни зовнішнього вигляду основного меню, виберіть необхідні опції і задайте бажані параметри.

​

Для прикладу, зазначимо наступні параметри:

В результаті отримуємо такий вигляд основного меню:

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":

Вкладка "Підвал".

Підвал інтернет-магазину (ІМ) - це його нижня частина, яка відображається на всіх сторінках Вашого ІМ. Тут Ви можете вивести контактну інформацію, особистий кабінет покупця, інформацію про службу підтримки і т.д.

Для редагування "Подвалу" сайту необхідно вибрати вкладку "Підвал". Підвал ІМ підрозділяється на 3 частини: верхня, середня і нижня.

Верхня частина підвалу складається з двох секцій, які можна заповнити необхідною інформацією, а також налаштувати їх відображення:

Середня частина підвалу розділена на 3 колонки. У кожному стовпчику можна вивести Ваш текст або відобразити необхідне меню.

Важливим нюансом є використання тега <br>. Використовуйте його, якщо в тексті необхідно зробити перенесення на наступний рядок. Після додавання всіх змін необхідно натиснути кнопку "Зберегти".

У нижній частині підвалу можливо додати необхідний напис, посилання на соціальні мережі, а також вивести список платіжних систем, з якими працює ІМ.

Для додавання посилань на соціальні мережі, в поле "Соціальні мережі" додайте наступний код:

<Div class = "socials">

<a href="#" class="vk"> <i class = "fa fa-vk" aria-hidden = "true"> </ i> </a>

<a href="#" class="fk"> <i class = "fa fa-facebook" aria-hidden = "true"> </ i> </a>

<a href="#" class="yt"> <i class = "fa fa-youtube-square" aria-hidden = "true"> </ i> </a>

<a href="#" class="tw"> <i class = "fa fa-twitter" aria-hidden = "true"> </ i> </a>

</ Div>

Для додавання списку платіжних систем, в поле "Платіжні системи" додайте наступний код:

<Div class = "payments">

<a href="#" class="visa"> </a>

<a href="#" class="master"> </a>

<a href="#" class="webmoney"> </a>

<a href="#" class="cash"> </a>

<a href="#" class="qiwi"> </a>

</ Div>

Після додавання всіх змін необхідно натиснути кнопку "Зберегти".

6. Вкладка "Контакти".

Сторінка контактів Інтернет-магазину повинна містити:

• Контактні телефони (бажано із зазначенням адресатів);
• Email-адреса (адреси) та форму зворотного зв'язку;
• Фізична адреса офісу та час його роботи;
• Карту або маршрут, як дістатися.

Для редагування сторінки контактів необхідно перейти у вкладку "Контакти". Вона складається з трьох розділів: секції, карта і форма зв'язку.

Розділ "Секції". Для додавання секцій на сторінку контактів необхідно перейти по вкладці "Контакти" -> "Секції" і в полі "Показувати секції" вибрати значення "Включено".

Після цього можна вводити необхідні дані в секції. Їх всього чотири.

Важливим нюансом є використання тега <br>. Використовуйте його, якщо в тексті необхідно зробити перенесення на наступний рядок. Після додавання всіх змін необхідно натиснути кнопку "Зберегти".

Розділ "Карта". Для того, щоб додати карту на сторінку контактів необхідно в полі "Показувати карти" вибрати необхідну карту - Google або Яндекс:

Після цього перейдіть за посиланням https://developers.google.com/maps/documentation/javascript/get-api-key і отримаєте ключ. Даний ключ вставте в поле "Google api key" та заповніть поля "Широта" і "Довгота".

В результаті, на сторінці контактів відображається вибрана карта:

Розділ "Форма зв'язку". Для додавання форми зв'язку на сторінку контактів необхідно перейти у вкладку "Контакти" -> "Форма зв'язку" і в полі "Показувати форму зв'язку" вибрати значення "Включено"

В результаті, на сторінці контактів буде доступна форма зв'язку:

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":

7.Вкладка "Категорії".

Дана вкладка дозволяє налаштувати відображення товарів в категоріях. Для редагування даних налаштувань необхідно перейти у вкладку "Категорії":

Дана вкладка містить наступні поля:

• Відображення товарів за замовчуванням. Дане поле призначене для вибору типу вікна товарів за замовчуванням в категоріях / пошуку / виробниках і т. Д .. Дане поле містить значення: "Сітка", "Список", "Таблиця":

При виборі значення "Сітка", товари будуть мати наступний вигляд:

При виборі значення "Список", товари будуть мати наступний вигляд:

При виборі значення "Таблиця", товари будуть мати наступний вигляд:

• Кількість колонок. Дане поле призначене для вказівки кількості колонок в списках товарів:
• Друга картинка при наведенні. Дана опція дозволяє відображати другу картинку товару, при наведенні покажчика миші на зображення товару:

​Картинка без наведення покажчика миші на товар        Картинка при наведенні покажчика миші на товар

 

Відображати підкатегорії. Якщо категорія містить підкатегорії, то при виборі в даному полі значення "Опублікувати", дані підкатегорії будуть виведені на вітрину:

При виборі в полі значення "Приховати", підкатегорії не показуються на вітрині:

Для вказівки необхідного розміру картинки підкатегорії, вкажіть висоту і ширину картинки в полях "Висота картинки підкатегорії", "Ширина картинки підкатегорії":

Відображати атрибути на блоці товару. При виборі в даному полі значення "Включено", атрибути товару будуть виведені в блоці товару:

Наступні поля доступні для редагування, при виборі значення "Включено" в поле "Відображати атрибути на блоці товару" і призначені для налаштування виводу атрибутів товару:

8.Вкладка "Товар".

Вкладка "Товари" дозволяє редагувати налаштування виводу товарів та їх характеристик на сторінці. Для редагування даних налаштувань необхідно перейти у вкладку "Товари":

Дана вкладка містить наступні поля:

• Виводити попередній і наступний товар в картці продукту. Дана опція призначена для виведення в картці товару кнопок "Попередній" і "Наступний" товар.
• Виводити посилання на попередній і наступний товар в мета-тегах. При виборі в даному полі значення "Опублікувати", в мета-тегах будуть виведені посилання на попередній і наступний товар:
• Збільшення для головної картинки. Поле, призначене для вибору способу відображення збільшеного зображення товару. Дане поле містить такі значення: "Приховати", "Поруч", "Всередині":

При виборі значення "Поруч" і наведенні на зображення товару, збільшена картинка буде виглядати наступним чином:

При виборі значення "Всередині" і наведенні на зображення товару, збільшена картинка буде виглядати наступним чином:

При виборі значення "Приховати" і наведенні на зображення товару, збільшена картинка не буде відображатися.

• Виводити характеристика товару в заголовку. Для виведення характеристик товару в картку товару, в даному полі відзначте необхідні характеристики:

В результаті, картка товару буде мати такий вигляд:

• Колір статусу. Дане поле призначене для вибору кольору тексту для статусів товарів:
• Інформація про доставку. Поле, призначене для додавання інформації, яка буде виведена в картці товару, в блоці "Інформація про доставку". Поле є багатомовним, тобто дозволяє додати інформацію для кожної мовної версії сайту:
• Інформація про оплату. Поле, призначене для додавання інформації, яка буде виведена в картці товару, в блоці "Інформація про оплату". Поле є багатомовним, тобто дозволяє додати інформацію для кожної мовної версії сайту:
• Інформація про гарантії. Поле, призначене для додавання інформації, яка буде виведена в картці товару, в блоці "Інформація про гарантії". Поле є багатомовним, тобто дозволяє додати інформацію для кожної мовної версії сайту:

В результаті, картка товару буде мати наступний вигляд:

Важливо !!! Після додавання всіх змін необхідно натиснути кнопку "Зберегти":