Бесплатный адаптивный шаблон Fashion One для магазина одежды

Шаблоны InSales /

Завершил работу над своим первым публичным шаблоном для системы InSales — Fashion One. Это идеальный дизайн для стильного магазина женской одежды, но, в принципе, можно адаптировать и под другие тематики.

Новое в версии 2.0

  • Исправлены найденные баги и недоработки
  • Улучшена совместимость с мобильными устройствами
  • Добавлена возможность настройки шаблона через кнопку «Настройка темы». Изменить шаблон под свои нужды стало ещё проще
  • Общая оптимизация шаблона, теперь загружается ещё быстрее
  • Улучшенная страница оформления заказа/личного кабинета/регистрации

Особенности шаблона

  • Адаптивный, хорошо смотрится на планшете, телефоне и компьютере
  • Основан на Bootstrap 3. Фреймворк с богатым функционалом, многие вещи можно сделать изучив документацию, без правок css
  • Стильный слайдер
  • Измененная страница личного кабинета. Адаптирована под внешний вид сайта
  • Современный внешний вид. Чистый и минималистичный
  • CloudZoom. Своеобразный эффект лупы при наведении на картинку товара
  • HTML5 и CSS3

Возможности


Главная страница
  • Большой баннер-слайдер
  • Блок логотипов брендов на главной
  • Вывод популярных и актуальных товаров
  • Дополнительное меню в футере
Основные возможности
  • Поиск по сайту
  • Форма обратной связи
  • Google карта в контактах
  • Точный процент скидок для товаров
  • Форма входа в личный кабинет
Товар
  • Выбор модификаций товаров
  • Поле для количества товаров
  • Дополнительные фотографии товара
  • Эффект лупы при просмотре фотографии товара
  • Вывод свойств товара, если они заданы
  • Отзывы на товар
Блоги
  • Вывод превью-картинки для статьи
  • Комментарии к статьям

Скриншоты

СтатьяГлавная страницаСтраница товараКаталогКонтактыКорзинаОформление заказа

Посмотреть DEMO шаблона Fashion One

Скачать

С нашего сайта

Инструкция

Как установить шаблон в InSales

Техническая поддержка

По любым возникшим у вас вопросам можете обращаться в комментариях, буду стараться оказать оперативную помощь в решении проблем. Для пользователей которые заинтересованны в более серьезном изменении шаблона, но не очень сильны в верстке — обращайтесь, обсудим этот вопрос лично.

46 комментариев

garmyshev
Понравился шаблон. Установил. Спасибо.
Есть вопросы: на слайдере не могу поставить ссылку. Куда нужно прописывать ссылку — не могу понять. Подскажите начинающему)))
garmyshev
И еще как изменить цвет шрифта на слайдерах? А то фон белый и белый и серый шрифты не читаются…
wonder
Это все делается в коде шаблона, в настройки не вынесено
garmyshev
В настройках шаблона слайдер? Я там копался, но не нашел в коде нигде этих настроек. Может быть подскажете где именно в коде они находятся?
wonder
Цвет шрифта меняется в файле style.css.liquid
Слайдер меняется в сниппете slider
garmyshev
Я так понимаю, что ссылка вставляется в слайдер здесь
Шаблон для InSales
но как я не пробовал вставить сюда url — так ничего и не вышло.

А в файле style так и не нашел настроек цвета для шрифтов 3 и 4 слайдера… может подскажете, где они в коде находятся…
wonder
Не правильный файл стилей назвал. Шрифт меняется в файле:
ei-slider.css

Касаемо ссылок. Вот примерный код:
zork2000
Доброго времени суток! Пытаюсь разобраться с вашим симпатичным шаблоном.
Подскажите как добавить категории в главное верхнее меню (закрепились толко главная и каталог)
wonder
Вам нужно создать новое меню с названием header-menu и после этого сможете добавлять туда новые пункты, которые будут отображаться в меню.

Вот как это выглядит:
zork2000
Спасибо Евгений, очень просто и доходчиво объяснили. Возникла следующая трудность. Не могу понять как разбить корневую папку «каталог», которая отображается в главном меню, на несколько отдельных папок которые будет отображаться в место нее (женское белье, мужское белье и тд. в место «каталог»)
wonder
Первое что нужно сделать — удалить кнопку «Каталог». Делается это удалением следующего кода в сниппете navigation:


Затем есть 2 варианта как добавить новое меню:
1) Добавить через пункт «Меню и страницы», в блоке header-menu. Однако тогда меню будет без подпунктов
2) Добавить прямо к коде сниппета navigation. В таком случае можно сделать многоуровневое, но понадобятся знания html.
garmyshev
Евгений, а можете ли Вы помочь в доработке сайта? Как связаться в личку? А то в этом хорошем шаблоне есть, что доработать, что-то могу сделать сам, а вот где-то понадобится помощь профессионала. Адрес моей почты есть в аккаунте.
wonder
Доработки по сайту могу выполнить на платной основе. Отписать задачу можете на почту:
i@ekovalenko.ru
zork2000
В этом шаблоне не отображается нижнее меню. По аналоги пытался сделать нижнее меню изменив название на footer-menu, но чудо не произошло. Подскажите как сделать его видимым.
wonder
Вот такие названия нужно указать для футера:
footer-myaccount (Мой аккаунт)
footer-extra (Дополнительно)
footer-faq (FAQ)
footer-category (Категории)
footer-info (Информация)
ruslanio33
Здравствуйте а как сделать страницу Контакты как у вас в описании темы, с формой обратной связи?
wonder
Здравствуйте!

Посмотрите у вас есть шаблон страницы контактов в дизайне?

Вот так он выглядит:
ruslanio33
С этим вроде разобрался, зато теперь не могу понять как постаивть свои изображения в слайдер? подскажите пожалуйста
wonder
Это делается путем редактирования html кода шаблона:
gda2090
Евгений, добрый день!
Подскажите пожалуйста как добавить товары в разделы «Популярное» и «Актуальное»
комментарий был удален
wonder
Здравствуйте!

Вам нужно создать 2 категории, с адресом:
frontpage — отвечает за вывод в блоке «актуальное»
popular — отвечает за вывод в блоке «популярное»

Вот как это выглядит в шаблоне:


gda2090
Отлично, большое спасибо за оперативность :)
gda2090
Евгений, возник еще один вопрос. Как можно убрать вкладку «отзывы» в карточке товара?
wonder
В шаблоне product.liquid нужно удалить вот такие строчки:
<li><a href="#review_form" role="tab" data-toggle="tab">Отзывы</a></li>

и
<div class="tab-pane" id="review_form">
                            {% if product.reviews != empty %}
                              {% for review in product.reviews %}
                                  {% include 'review_block' %}
                              {% endfor %} 
                           	{% else %}
                              <p class="alert alert-info">Отзывы к товару ещё не оставляли</p>
                            {% endif %}
						    
							<h3>Оставить отзыв</h3>

							{% form review %}

						        <div class="form-group{% if review.errors contains 'author' %} has-error{% endif %}">
						            <label for="InputName">Имя:{% if review.errors contains 'author' %}<span class="required">* Проверьте данное поле</span>{% endif %}</label>
						              <div>
						            <input type="text" name="review[author]" value="{{review.author}}" class="form-control" id="InputName" placeholder="Имя">
						              </div>
						        </div>

						        <div class="form-group{% if review.errors contains 'email' %} has-error{% endif %}">
						            <label for="InputEmail">E-mail:{% if review.errors contains 'email' %}<span class="required">* Проверьте данное поле</span>{% endif %}</label>
						            <input type="text" name="review[email]" value="{{review.email}}" class="form-control" id="InputEmail" placeholder="E-mail">
						        </div>

					            <div class="form-group{% if review.errors contains 'content' %} has-error{% endif %}">
							        <label>Сообщение:{% if review.errors contains 'content' %}<span class="required">* Проверьте данное поле</span>{% endif %}</label>
							        <textarea name="review[content]" rows="3" cols="10" class="form-control"placeholder="Текст сообщения">{{review.content}}</textarea>
					            </div>
                          
                          		<div class="form-group{% if review.errors contains 'captcha_solution' %} has-error{% endif %}">
                                 	<label for="review_captcha_solution">Captcha:{% if review.errors contains 'captcha_solution' %}<span class="required">* Проверьте данное поле</span>{% endif %}</label>
                          			{% if review.captcha_enabled? %}
            						<div id="captcha">
                						<div id="captcha_challenge">
                    						{{ review | captcha_challenge }}
                						</div>
                					<input type="text" name="review[captcha_solution]" id="review_captcha_solution" class="form-control {% if review.errors contains 'captcha_solution' %}input-error{% endif %}">
                					<small>Наберите текст, изображённый на картинке</small>
            						</div>
        							{% endif %}
                          		</div>

					            <div class="form-group">
					            	<button class="btn btn-primary" type="submit">Добавить Отзыв</button>
					            </div>

							{% endform %}
						</div>
gda2090
Евгений подскажите, как сделать верхнее меню такого формата?
wonder
Добрый день!

Это уже выходит за рамки комментариев, могу сделать в качестве платной услуги.
gda2090
Евгений, подскажите, пожалуйста, каким образом можно добавить текстовую информацию на главную страницу после карусели с брендами?
комментарий был удален
wonder
Дописать код в шаблоне. На скриншоте показал в каком месте и где
Repins
Добрый день. Пара вопросов

1. Как добавить номер телефона между Логотипом и Поиском



2. Можно как-то сделать чтобы Логотип и Товар/Поиск были на одной горизонтале относительно центра?

wonder
Это все можно сделать, но выходит за рамки обсуждения на данном сайте.

На платной основе — буду рад помочь
комментарий был удален
max
Не могу понять где «собака зарылась». Хочу сделать элементарно превьюшки в карусели картинок квадратными. Судя по css они и так задумывались квадратными 105x105. Однако что-то генерирует инлайн-код задавая там ширину 56px.
Подскажите, где прячутся эти 56 пикселей в ширину, чтобы заменить их…

wonder
Здравствуйте, скиньте ссылочку на эту страницу, пожалуйста
max
А ещё, если покрутить карусельку, тоже не очень хорошо получается…

Тоже поправить бы…
wonder
В исходной версии шаблона такой проблемы не было, видимо вы там самостоятельно уже докрутили до такого состояния.

К сожалению бесплатно оказывать поддержку по этим вопросам не буду, т.к. тут скорее всего не ошибка в шаблоне, а ошибка в ваших доработках
max
Поставил специально исходную версию, посмотрите.
www.windigo-shop.ru/collection/popular/product/5w-50-windigo-synth-rs
С каруселькой по крайней мере тот-же баг.
А с шириной превьюшки, да. Видимо где-то мы…
max
Хотя в «исходной» версии, хоть и другое, но тоже от куда-то «width: 86px» берётся…
Всё-таки это изначальная «фишка» шаблона:
wonder
Он автоматически высчитывается скриптом и подгоняеться по размеру.
backomg
Евгений, подскажите как на ваш шаблон возможно добавить мультиязычность.
Не появляются иконки выбора языка сверху свйта, как на стандартных шаблонах.
Как это возможно сделать? Спасибо.
AlexSH
Доброго времени суток, Евгений. Очень нравится ваш шаблон, но у меня небольшой вопрос. Можно ли сделать так, что бы текстовое описание товара обтекало картинку товара, потому что если описание большое оно вытягивается в один узкий столбец
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.