{"id":34626,"date":"2014-06-03T10:56:24","date_gmt":"2014-06-03T14:56:24","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=34626"},"modified":"2017-07-10T06:13:32","modified_gmt":"2017-07-10T10:13:32","slug":"prestashop-1-6-x-how-to-work-with-image-slider-for-your-homepage-module","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/prestashop-1-6-x-how-to-work-with-image-slider-for-your-homepage-module.html","title":{"rendered":"PrestaShop 1.6.X. How to work with &#8220;Image slider for your homepage&#8221; module"},"content":{"rendered":"<p><\/p>\r\n<p>This tutorial is going to show you how to work with the <strong>&ldquo;Image slider for your homepage&rdquo;<\/strong> module on your PrestaShop 1.6 template.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=JS7QeDQB3c4?width=1280&amp;height=720\" rel=\"prettyPhoto\">PrestaShop 1.6.X. How to work with &#8220;Image slider for your homepage&#8221; module<\/a><\/p>\r\n<ol>\r\n<li>\r\n<p>Log into your PrestaShop admin panel and go to the <strong>Modules -&gt; Modules<\/strong> menu.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_1-300x250.jpg\" alt=\"prestashop_image_slider_for_your_homepage_working_with_1\" width=\"300\" height=\"250\" class=\"aligncenter size-medium wp-image-34627\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_1-300x250.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_1-150x125.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_1.jpg 477w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<\/li>\r\n<li>\r\n<p>Enter the name of the slider (or just &ldquo;slider&rdquo;) in the <strong>&ldquo;Search&rdquo;<\/strong> field on the Module List page. This will show the <strong>&ldquo;Image slider for your homepage&rdquo;<\/strong> module. Click <strong>&ldquo;Install&rdquo;<\/strong> to install it if it&#8217;s not installed.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_2-300x72.jpg\" alt=\"prestashop_image_slider_for_your_homepage_working_with_2\" width=\"300\" height=\"72\" class=\"aligncenter size-medium wp-image-34628\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_2-300x72.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_2-150x36.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_2.jpg 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<\/li>\r\n<li>\r\n<p>If the module is installed, click<strong> &ldquo;Enable&rdquo;<\/strong> to activate it, then click <strong>&ldquo;Configure&rdquo;<\/strong> to access its options.<\/p>\r\n<\/li>\r\n<li>\r\n<p>On the module configuration page, in the <strong>&ldquo;Settings&rdquo;<\/strong> section, you can:<\/p>\r\n<ul class=\"list\">\r\n<li>\r\n<p>manually enter the maximum width of your slider\u00a0images in px;<\/p>\r\n<\/li>\r\n<li>\r\n<p>enter the slider speed in ms;<\/p>\r\n<\/li>\r\n<li>\r\n<p>enter the slider pause time in ms;<\/p>\r\n<\/li>\r\n<li>\r\n<p>set your slider to autoplay.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<p>When you are done with the <strong>&ldquo;Settings&rdquo;<\/strong> part, click <strong>&ldquo;Save.&rdquo;<\/strong><\/p>\r\n<\/li>\r\n<\/li>\r\n<li>\r\n<p>The second part called <strong>&ldquo;Slider List&rdquo;<\/strong> allows you to upload, edit, re-order or delete slider images. By default this part contains the original slider images. Click <strong>&ldquo;Enabled&rdquo;<\/strong> to disable, <strong>&ldquo;Delete&rdquo;<\/strong> to delete\u00a0them\u00a0or <strong>&ldquo;Edit&rdquo; <\/strong>to replace them with your images. <\/p>\r\n<\/li>\r\n<li>\r\n<p>On the <strong>&ldquo;Slider informations&rdquo;<\/strong> page, the following options are available:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/05\/Untitled2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/05\/Untitled2-300x271.jpg\" alt=\"Untitled2\" width=\"300\" height=\"271\" class=\"aligncenter size-medium wp-image-34633\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/Untitled2-300x271.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/Untitled2-150x135.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/Untitled2.jpg 764w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<ul class=\"list\">\r\n<li>\r\n<p>Select a\u00a0 file: click <strong>&ldquo;Choose a file&rdquo;<\/strong> to navigate to a new image on your computer and upload it;<\/p>\r\n<\/li>\r\n<li>\r\n<p>Title;<\/p>\r\n<\/li>\r\n<li>\r\n<p>URL;<\/p>\r\n<\/li>\r\n<li>\r\n<p>Caption;<\/p>\r\n<\/li>\r\n<li>\r\n<p>Description: allows you to add description text to the slider image. You can edit the content right in the text field by using the Tools of the default editor. Or you can also go to <strong>Tools -&gt; Source code<\/strong> to edit the source code of the slide description in a separate pop-up window or insert one of your own created in some HTML editor. <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_5-300x163.jpg\" alt=\"prestashop_image_slider_for_your_homepage_working_with_5\" width=\"300\" height=\"163\" class=\"aligncenter size-medium wp-image-34629\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_5-300x163.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_5-150x81.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_5.jpg 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<\/li>\r\n<li>\r\n<p>Active: yes\/now to enable\/disable the particular slide.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<li>\r\n<p>To the right of each option there is a language button to select the Multilanguage version of your site. Click <strong>&ldquo;Save&rdquo;<\/strong> when you are done with the changes. Click <strong>&ldquo;+&rdquo;<\/strong>\u00a0 to add more slides.\u00a0To re-order the slides, select the one you would like to change the current position of and drag it to the desired position. <\/p>\r\n<\/li>\r\n<li>\r\n<p>Go to <strong>Modules -&gt; Positions<\/strong> to hook the module to the<strong> &ldquo;Top of pages&rdquo;<\/strong> position on the Home page of your site.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Open the front end of your site to see the changes:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_6.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_6-300x192.jpg\" alt=\"prestashop_image_slider_for_your_homepage_working_with_6\" width=\"300\" height=\"192\" class=\"aligncenter size-medium wp-image-34630\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_6-300x192.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_6-150x96.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/05\/prestashop_image_slider_for_your_homepage_working_with_6.jpg 854w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=JS7QeDQB3c4?width=1280&amp;height=720\" rel=\"prettyPhoto\">PrestaShop 1.6.X. How to work with &#8220;Image slider for your homepage&#8221; module<\/a><\/p>\r\n<!-- MailChimp for WordPress v4.1.5 - https:\/\/wordpress.org\/plugins\/mailchimp-for-wp\/ --><form id=\"mc4wp-form-1\" class=\"mc4wp-form mc4wp-form-81747 mc4wp-form-theme mc4wp-form-theme-green\" method=\"post\" data-id=\"81747\" data-name=\"PrestaShop Store Marketing - Beginner&#039;s Guide\" ><div class=\"mc4wp-form-fields\"><h4 >PrestaShop Store Marketing - Beginner's Guide [Free eBook]<\/h4>\r\n<p>\r\n\t<input type=\"email\" name=\"EMAIL\" placeholder=\"Your email address\" required \/>\r\n<\/p>\r\n\r\n<p>\r\n\t<input type=\"submit\" value=\"Download\" \/>\r\n<\/p><div style=\"display: none;\"><input type=\"text\" name=\"_mc4wp_honeypot\" value=\"\" tabindex=\"-1\" autocomplete=\"off\" \/><\/div><input type=\"hidden\" name=\"_mc4wp_timestamp\" value=\"1785071556\" \/><input type=\"hidden\" name=\"_mc4wp_form_id\" value=\"81747\" \/><input type=\"hidden\" name=\"_mc4wp_form_element_id\" value=\"mc4wp-form-1\" \/><\/div><div class=\"mc4wp-response\"><\/div><\/form><!-- \/ MailChimp for WordPress Plugin -->\r\n<p><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial is going to show you how to work with the &ldquo;Image slider for your homepage&rdquo; module on your PrestaShop 1.6 template.<\/p>\n","protected":false},"author":30,"featured_media":34637,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[732],"tags":[1694,537,793,557,552,816],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/34626"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=34626"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/34626\/revisions"}],"predecessor-version":[{"id":81757,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/34626\/revisions\/81757"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/34637"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=34626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=34626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=34626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}