Customizing Product Image Carousel on Product Post

For every product posts page, a related product image carousel powered by slick.js comes pre-installed & located below the product post tags/Labels section. By default the related product image carousel has an autoPlay set to true , which lets the related product image, title, product price move automatically with transition effect. Customise the amount of related product images to display by editing the image carousel options located in the template editor. Page load & speed must be taken consideration. Too many images displayed slows down a page render in web browser especially on mobile screens devices. This is a related product image carousel, which means the product image displayed here is using the same Labels tagged with a product post. Use Blogger Labels to categorise & tag your product post accordingly. Find below the details & instructions to customise the related product image carousel settings:-

$ 45.00

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

• Codes & Instructions
• Carousel Settings

PRO Version The related product image carousel settings can be accessed at template editor, jump to Blog1 widget, find <b:includable id='related_products' var='post'> , expand this code to view the available settings. For PRO Version 1.0 & 1,1 the settings as follows:- <script> //<![CDATA[ var title_length = 35; // nos of chars title displays var maxresults = 10; // nos of post to display var image_size = 240; // image max size var currency = "USD "; // currency displayed product thumbs var currency_after = false;     // true displays currency after price var related_button = "View Now"; // text deisplayed on button var default_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg"; var currentposturl="&lt;data:post.url/&gt;"; removeRelatedDuplicates_thumbs(); printRelated_Products(); //]]> </script> For PRO Version 1.2 the settings as follows:- <script> var currentposturl = &quot;<data:post.url/>&quot;; //<![CDATA[ var title_length = 35; // nos of chars title displays var maxresults = 10; // nos of post to display var image_size = 240; // image max size var currency = "USD "; // currency displayed product thumbs var currency_after = false;     // true displays currency after price var related_button = "View Now"; // text deisplayed on button var default_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg"; removeRelatedDuplicates_thumbs(); printRelated_Products(); //]]> </script> The setting codes is self explanatory. Edit to your requirement. The related product image carousel uses javascript/json request callback API to Google + Blogger servers & grabs a blog feed content/s. Keep a minimal amount to display the related product images, to minimised the request callback feed file size served. Freemium Version To locate the settings for related product carousel pre-installed for freemium templates, at Template Editor, Jump to Widget Blog1, and expand <b:includable id='post' var='post'>, slightly below the settings as follows:- For Freemium Version 1.0, 1.1 & 1.2 the settings as follows:- <script> //<![CDATA[ var maxresults = 10; // nos of post to display var default_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg"; var currentposturl="&lt;data:post.url/&gt;"; removeRelatedDuplicates_thumbs(); printRelated_Products(); //]]> </script> For Freemium Version 1.3 the settings as follows:- <script> var currentposturl= &quot;<data:post.url/>&quot;; //<![CDATA[ var maxresults = 10; // nos of post to display var default_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg"; removeRelatedDuplicates_thumbs(); printRelated_Products(); //]]> </script> The settings above are self explanatory, edit to personal requirement.

By default, the related product image carousel displays 6 product image at once & rotate in between 2 related product. A total of 10 related product image is called using the Blogger API functions. Customise the carousel duration speed, amount of related product images to display, the image transition speed using this section. Go to template editor, jump to HTML99 widget, find <b:includable id='carousel-settings'> & expand the code to view the detail settings. $('.related-products').slick({     dots: true,     infinite: true,     speed: 300,     slidesToShow: 6,     slidesToScroll: 2,     autoplay: true,     autoplaySpeed: 3000,     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         }       }     ] }); By default the related product image carousel is using the same class & settings with the Gallery page image carousel. You can copy this code & paste right below the above codes but in between the $(function(){ .. }); javascript tag. Change to a unique class name which will automatically initialise the related product image with its own dedicated settings. To use the custom settings the unique class name used is equal to related product image carousel request settings at previous section, For example, if you are using var carousel_wrapper = "blogrcart"; as the wrapper class, then the new copied image carousel functions will use $('.blogrcart').slick({ ... rest of codes }); to initialise the functions. The codes here are self explanatory & edit to your requirement.