- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
Featured templates
Featured templates
og体育首页ONE Subscrioption
Multipurpose Website Templates. Shop pages overview
June 15, 2016
We are ready to present you a short overview of the shop pages in Multipurpose template.
Multipurpose template has several shop pages available:
Product Catalog allows you to see all the products available:
You can change/add or remove your products here. To modify product catalog page, please edit the shop-catalog.html file from the site folder of your template pack. Products are added with the following HTML code:
123456789<divclass="col-xs-6 col-md-3"><divclass="product tumbnail thumbnail-3"><ahref="shop-product.html"><imgsrc="images/shop-1.jpg"alt=""></a><divclass="caption">jQuery);<h6><ahref="shop-product.html">Short Sleeve T-Shirt</a></h6><spanclass="price"><del>$24.99</del></span><spanclass="price sale">$12.49</span></div></div></div>-
Single Product is an example of the single product page. To modify it, please edit the shop-product.html file from the site folder. You can copy this file content to add different single products pages to your site. It consists of the following parts:
-
Product image is added with the help of the slider gallery code:
123456789101112131415<divclass="slider"><divdata-lightbox="gallery"class="swiper-container gallery-top"><divclass="swiper-slide"><divclass="swiper-slide-caption"><ahref="images/shop-19_original.jpg"data-lightbox="image"class="darkbox"><imgsrc="images/shop-19.jpg"alt=""class="img_zoom"></a></div></div></div></div><divclass="swiper-container gallery-thumbs"><divclass="swiper-wrapper"><divclass="swiper-slide"><divclass="swiper-slide-caption"><imgsrc="images/shop-19.jpg"alt=""></div></div></div></div>
-
Product short description section is used to provide product short information. This section is added with the following HTML code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="slider"> <div data-lightbox="gallery" class="swiper-container gallery-top"> <div class="swiper-slide"> <div class="swiper-slide-caption"><a href="images/shop-19_original.jpg" data-lightbox="image" class="darkbox"><img src="images/shop-19.jpg" alt="" class="img_zoom"></a></div> </div> </div> </div> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-slide-caption"><img src="images/shop-19.jpg" alt=""></div> </div> </div> </div> |
To add Price and add to cart button use following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="col-md-5 text-center text-md-left"> <h1 class="text-bold h1-variant-2">Product name</h1><a href="#" class="rating"><span class="fa-star"></span><span class="fa-star"></span><span class="fa-star"></span><span class="fa-star"></span><span class="fa-star-o"></span></a><a href="#" class="text-light-clr">1 customer review</a> <p class="big offset-6 line-height-2"> Product description here. </p> <div class="caption"><span class="text-uppercase text-light-clr small">quantity</span><span class="quantity round-xl"><span class="fa-angle-left"></span><span class="num text-dark-variant-3">1</span><span class="fa-angle-right"></span></span><span class="price"> <del>$24.99</del></span><span class="price sale">$12.49</span><a href="#" class="btn btn-success round-xl btn-sm btn-block offset-6">Add to cart</a> <dl class="info-list offset-5"> <dt>SKU</dt> <dd>036895</dd> <dt>Categories</dt> </dl> </div></div> |
Share icons are added with the help of following lines:
1 2 3 4 5 6 7 8 9 10 11 | <div class="share offset-6"><span class="small font-secondary text-uppercase text-light-clr">Share this</span> <ul class="list-inline list-inline-4 pull-md-right"> <li class="first"><a href="#" class="fa-facebook text-info"></a></li> <li><a href="#" class="fa-pinterest-p text-danger"></a></li> <li><a href="#" class="fa-twitter text-primary"></a></li> <li><a href="#" class="fa-google-plus text-danger"></a></li> <li><a href="#" class="fa-instagram text-info"></a></li> <li><a href="#" class="fa-rss"></a></li> <li class="last"><a href="#" class="fa-envelope text-info"></a></li> </ul> </div> |
Products tabs section is used for providing additional information about the product. You can add some extra product information, product features and reviews with the help of the tabs. Check our video tutorial on how to create and manage tabs layout.
Related Products section is usually used for adding products that have common features with the product, displayed on the page. In order to make changes to this section, please edit the same shop-product.html file on the lines 409-446. Here is an example of the related product code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!--Start section--> <section class="text-center well well-sm"> <div class="container"> <h4 class="text-dark-variant-4">Related Products</h4> <div class="row flow-offset-1 offset-5"> <div class="col-xs-6 col-md-3"> <div class="product tumbnail thumbnail-3"><a href="shop-product.html"><img src="images/shop-4.jpg" alt=""></a> <div class="caption"> <h6><a href="shop-product.html">Short Sleeve T-Shirt</a></h6><span class="price"> <del>$24.99</del></span><span class="price sale">$12.49</span> </div> </div> </div> </div> </div> </section> <!--End section--> |
Shopping cart page is added with the help of shop-cart.html file. Please, open it with any code editor you have on your computer (we recommend to use NotePad++ or Sublime). Shopping cart consists of:
-
Actual cart content:
-
Cart Totals.
To modify the Checkout page, please edit the shop-checkout.html. Checkout page is used for gathering customer and payment information. You can check the following screenshot to see the way this page looks in Multipurpose Website templates:
Feel free to check the detailed video tutorial below:
Multipurpose Website Templates. Shop pages overview