Since 5.2.4 version the template has three color schemes: fancy Pink, stylish Blue and modern Teal. Only css styles are involved, so if you have customized any templates using Webmaster mode before, the modification will be shared between all the color schemes. You can also switch between them without any re-deploy.
Shop by brand.
The owners of this module will take advantage of brand logo carousel on the front page. Make sure to use white logo images with transparent background to make the carousel look like on the demo. If you want to change the carousel background, you can use Look & Feel -> Custom css tool. Upload a desired image to Look & Feel -> Images section, copy its css path and paste it instead of 'image_path' in this piece of css:
.brands-carousel-block,.skin-FashionHouse-customer .brand-info .brand-logo { background-image: url('image_path'); }
Product carousels.
Product carousels are built in the template. The following sections are represented in carousel view:
- Bestsellers
- Featured products
- Sale
- New arrivals
- Customers who bought this product also bought
- Customers who viewed this product bought
- Recently viewed
If a product has more than four images an image-gallery carousel will appear on a product details page.
Product images.
The size of product image container in the product lists is fixed, so you can change it according to the needs of your store:
.skin-FashionHouse-customer div.products ul.products-grid.grid-list li.product-cell div.product-photo { width: 210px; height: 280px; } /* These sizes should be 2px smaller because of the parent borders */ .skin-FashionHouse-customer div.products ul.products-grid.grid-list li.product-cell div.product-photo a.product-thumbnail img{ max-width: 208px; max-height: 278px;}
Beautiful mobile slide navigation.
The template is fully responsive and it modifies default mobile navigation functionality. Mobile slide bar combines category tree, store navigation and account links in one place. It looks light and clear, easy to breath.
Icons.
If you hover a product image in a product list (grid view), you can observe different icons:
- Wishlist (if 'My Wishlist' module is enabled)
- Quickview
- Add to cart button (you can enable/disable it in your Admin area -> Store setup --> Cart & Checkout -> Display "Add to cart" buttons for products in grid view)
- Compare (if 'Product Comparison' module is enabled)
Main banner.
The template adapts 'Banner system' as well as default banner rotator. It makes both of them take 100% of page width on the home page of your store.
The three images on home page.
The three images in a row under the main banner on the home page - are root category images. If you want to remove them, go to Admin area -> Catalog -> Front page ->Root category listings format: Hide. To make them look like on the demo, please, use the same proportions for these images. The images will be distributed by three in a row. The root category titles are hidden. But you can get them back using custom css tool:
body.target-main ul.subcategory-view-icons.subcategory-list.grid-list .subcategory-name { display: inline; }
Top navigation.
The template keeps top navigation items fit in one line. To make this line as wide as possible, you can make your logo smaller and the navigation container wider using these styles:
@media (min-width: 992px){ .skin-FashionHouse-customer #logo { max-width: 240px; /* this value is subtrahend in calc()*/ } .skin-FashionHouse-customer #logo + .navbar.navbar-inverse { /* 240px - is your logo width*/ width: calc(100% - 240px); width: -moz-calc(100% - 240px); width: -webkit-calc(100% - 240px); width: -o-calc(100% - 240px); } }
Tree-like sidebar category list.
'Horizontal Flyout Categories' module is supported as well as 'Flyout categories'. The latter looks a bit different - Every level root items have + / - icon from the right side, and subcategory list collapses / expands if you press the icon.
