Теперь нам нужно определиться с видом кнопок для опций. Всего есть два варианта.
Первый вариант (в виде кнопок):
в случае выборого этого варианта — перейдите в
Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS), в самый низ разместите следующий код:
.options-sh ul {
list-style-type: none;
clear: left;
margin: 5px;
padding: 0;
}
.options-sh li, .options-sh a {
float: left;
min-width: 37px;
}
.options-sh li {
margin: 0 5px 5px 0;
}
.options-sh li a,
.options-sh .limited a {
border: 1px solid #4a7cd7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.options-sh li:last-child {
margin-right: 0;
}
.options-sh a {
color: #4a7cd7;
padding: 4px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition: all .15s ease-out;
-o-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-webkit-transition: all .15s ease-out;
}
.options-sh a:hover,
.options-sh .picked {
background: #4a7cd7;
border-color: #4a7cd7;
color: #fff;
text-decoration: none;
}
.options-sh .limited a {
text-align: center;
}
.shop-options li[id*="id-"] span.opt, .shop-options li[id*="last_view-"] span.opt, .shop-options li[id*="all-"] span.opt, .shop-options li[id*="top_view-"] span.opt, .shop-options li[id*="last_add-"] span.opt, .shop-options li[id*="top_sold-"] span.opt {
display:block;
clear:both;
padding-top:10px;
}
.shop-options li[id*="all-"]:after, .shop-options li[id*="last_view-"]:after, .shop-options li[id*="all-"]:after, .shop-options li[id*="top_view-"]:after, .shop-options li[id*="last_add-"]:after, .shop-options li[id*="top_sold-"]:after{
content:'';
clear:both;
display:block;
}
В том случае, если вы наблюдаете отображение не совсем корректным, то скорее всего у вас нестандартный шаблон, отсюда необходимо верстать индивидуально. Как вариант, рекомендуем в таком случае воспользоваться таким кодом:
.options-sh ul {
list-style-type: none;
clear: left;
margin: 5px !important;
padding: 0 !important;
}
.options-sh li, .options-sh a {
float: left;
min-width: 37px !important;
}
.options-sh li {
margin: 0 5px 5px 0 !important;
}
.options-sh li a,
.options-sh .limited a {
border: 1px solid #4a7cd7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.options-sh li:last-child {
margin-right: 0;
}
.options-sh a {
color: #4a7cd7;
padding: 4px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition: all .15s ease-out;
-o-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-webkit-transition: all .15s ease-out;
}
.options-sh a:hover,
.options-sh .picked {
background: #4a7cd7;
border-color: #4a7cd7;
color: #fff;
text-decoration: none;
}
.options-sh .limited a {
text-align: center;
}
.shop-options li[id*="id-"] {
display:table;
padding-bottom:20px;
}
Также есть вариант такого вида:
.options-sh ul {
list-style-type: none;
clear: left;
margin: 5px !important;
padding: 0 !important;
}
.options-sh li, .options-sh a {
float: left;
min-width: 37px !important;
}
.options-sh li {
margin: 0 5px 5px 0 !important;
}
.options-sh li a,
.options-sh .limited a {
border: 1px solid #4a7cd7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.options-sh li:last-child {
margin-right: 0;
}
.options-sh a {
color: #4a7cd7;
padding: 4px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition: all .15s ease-out;
-o-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-webkit-transition: all .15s ease-out;
}
.options-sh a:hover,
.options-sh .picked {
background: #4a7cd7;
border-color: #4a7cd7;
color: #fff;
text-decoration: none;
}
.options-sh .limited a {
text-align: center;
}
.shop-options li[id*="id-"] {
display:table-cell;
padding-bottom:20px;
width:50%;
}
А также в одну линию:

.options-sh ul {
list-style-type: none;
margin: 0 5px 0 5px !important;
padding: 0 !important;
}
.options-sh li, .options-sh a {
float: left;
min-width: 37px !important;
}
.options-sh li {
margin: 0 5px 5px 0 !important;
}
.options-sh li a,
.options-sh .limited a {
border: 1px solid #4a7cd7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.options-sh li:last-child {
margin-right: 0;
}
.options-sh a {
color: #4a7cd7;
padding: 4px;
text-align: center;
text-decoration: none;
font-size: 14px;
display:inline-block;
transition: all .15s ease-out;
-o-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-webkit-transition: all .15s ease-out;
}
.options-sh a:hover,
.options-sh .picked {
background: #4a7cd7;
border-color: #4a7cd7;
color: #fff;
text-decoration: none;
}
.options-sh .limited a {
text-align: center;
}
.shop-options li[id*="id-"] {
display:inline-block;
padding-bottom:10px;
padding-top:30px;
}
.shop-options li[id*="id-"] span{
float:left;
}
Второй вариант (в виде ссылок):
в случае выборого этого варианта — перейдите в
Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS), в самый низ разместите следующий код:
.options-sh ul {
list-style-type: none;
clear: left;
margin: 5px;
padding: 0;
}
.options-sh li, .options-sh a {
float: left;
min-width: 37px;
}
.options-sh a {
color: #4a7cd7;
padding: 4px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition: all .15s ease-out;
-o-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-webkit-transition: all .15s ease-out;
}
.options-sh a:hover,
.options-sh .picked {
background: #4a7cd7;
border-color: #4a7cd7;
color: #fff;
text-decoration: none;
}
.shop-options li[id*="id-"] span.opt, .shop-options li[id*="last_view-"] span.opt, .shop-options li[id*="all-"] span.opt, .shop-options li[id*="top_view-"] span.opt, .shop-options li[id*="last_add-"] span.opt, .shop-options li[id*="top_sold-"] span.opt {
display:block;
clear:both;
padding-top:10px;
}
.shop-options li[id*="all-"]:after, .shop-options li[id*="last_view-"]:after, .shop-options li[id*="all-"]:after, .shop-options li[id*="top_view-"]:after, .shop-options li[id*="last_add-"]:after, .shop-options li[id*="top_sold-"]:after{
content:'';
clear:both;
display:block;
}
Информация о классах:
-
options-sh ul
– общий блок с опциями;
-
options-sh li, options-sh a
– опция.
-
.options-sh .picked
– отмеченная опция.
Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.