Edit & Customise Homepage Product Image Carousel

A special feature and probably the only Blogger store template uses touch/mouse enabled image carousel with title, description, price tags & also responsive, powered by slick.js. A powerful feature, which lets Blogger store owners to customise the looks & display of product images nicely in any screen sizes. Below are the customisation features comes pre-installed with BlogCart Closet e-commerce featured Blogger themes.

$ 79.00

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

• The Codes & Instructions
• Useful Info
• Carousel Settings

Below are the codes used to customised this awesome image carousel plug-in, comes pre-installed for BlogCart template. At Blogger template editor find <div id='footer-top'> and slightly above it, below are the codes for customisations:- <script> //<![CDATA[ var numProducts = 8; // nos of product image to render var showProductTitle = true;     // set to true to display product title var productTitleLength = 35; // set the product title length var showProductImage = true; // set to true to display product images var image_size = 240; // set the max product image size var display_button = true; // set to true to display button var button_text = 'View Now'; // text to display for product button var showProductSummary = false; // set to true to display product summary var numProductSummaryChars = 120; // if showpostummary true, set nos of chars to display var showProductPrice = true;   // set to true to show produc price var currency_after = false; // true set currency after price var currency = "RM"; // set the currency for the price var default_image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLACu5OJ6-wHmNp7hmjP0imMP5Akfuq2zM-H-EnJe68Elk031A42mwxuRhWF348CTbUr7KuelyRJFN1GlZc6KL8DVJVHCiIv5LY996_5ZpXkR0eA0DxhH1dm_qu1Hq7PNvGlbeY2xEelk/s1600/picture_not_available.png'; // default image if no image displayed //]]> </script> The codes above are self explanatory. Edit to personal requirement.

The carousel images & content display depends on your Google+Blogger feed API. Ensure that your Blog feed is set to Full under the Blogger dashboard Settings section. And to allow the request call-back action to be completed, your blog settings must be Public in order for the feed contents to be served. To edit the amount of product images to display, edit at var numProducts = *; , where * is the integer to the number of image to display. Advance settings for PRO Version Set the var showProductTitle = true; to show the product title & false vice versa action. Set the amount of the product title characters at var productTitleLength = *; Quick note, if setting the var showProductImage = true; to false, the product image and click to action will not display. Set the image size var image_size = *; (in pixels) for the average image size to display inside the carousel product container. Set the click to action button var display_button = true; and edit the var button_text = '*'; to display the custom button text. By setting the var showProductSummary = false; from false to true will display the product summary based on the product post supplied. By setting var numProductSummaryChars = *; will reduce the amount of characters for the product summary to display. Set the var showProductPrice = true; to display the product price & vice versa, To allow currency display after the price set the var currency_after = true; and edit the currency text to display at var currency = "*"; If no product image is found, add in a default product image at var default_image = '*'; with an uploaded image full URL.

To edit the carousel image action, how the product image will display in between image carousel sliding actions, find HTML99 widget in the template editor and expand <b:includable id='carousel-settings'>. Below is the example code to help on the customisation features:-   $('.related-products').slick({     dots: true,     infinite: true,     speed: 300, // adjust image transition speed     slidesToShow: 6, // the amount of product image display inside the carousel container     slidesToScroll: 2, // the amount of product image to change in between transition     autoplay: true,     autoplaySpeed: 3000, // adjust image slider auto play speed     responsive: [       {         breakpoint: 1024,         settings: {           slidesToShow: 3,           slidesToScroll: 3,           infinite: true,           dots: true         }       },       {         breakpoint: 600,         settings: {           slidesToShow: 2,           slidesToScroll: 2         }       },       {         breakpoint: 480,         settings: {           slidesToShow: 1,           slidesToScroll: 1         }       }     ]   }); The product images carousel is a request/call-back action to a Blogger feed contents, served by Google + Blogger. For optimisation purposes, set a minimum amount of Blogger post feed to display at your carousel image section. Although the javascript call back by default is called asynchronously, which is helping render(display) your pages more quickly, it does not make sense to request ALL your blogger posts to display for a given page, which will definitely be served with a bigger javascript file size hence display a page slowly.