{"id":18795,"date":"2012-05-29T05:08:49","date_gmt":"2012-05-29T09:08:49","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=18795"},"modified":"2016-02-23T04:58:16","modified_gmt":"2016-02-23T09:58:16","slug":"magento-how-to-edit-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/magento-how-to-edit-slider.html","title":{"rendered":"Magento. How to edit slider"},"content":{"rendered":"<p><\/p>\r\n<p>This tutorial shows how to edit slider in Magento templates<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_1-300x214.png\" alt=\"\" title=\"magento_edit_slider_1\" width=\"300\" height=\"214\" class=\"alignnone size-medium wp-image-18796\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_1-300x214.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_1.png 975w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p><strong>1.<\/strong> Open admin section and go to CMS-&gt;Pages and open Home page.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_2-300x104.png\" alt=\"\" title=\"magento_edit_slider_2\" width=\"300\" height=\"104\" class=\"alignnone size-medium wp-image-18797\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_2-300x104.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_2-1024x355.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_2.png 1244w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p><strong>2.<\/strong> Open Content tab. There you will find code for slider. <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_3-300x168.png\" alt=\"\" title=\"magento_edit_slider_3\" width=\"300\" height=\"168\" class=\"alignnone size-medium wp-image-18798\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_3-300x168.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_3-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_3.png 1238w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p><strong>3.<\/strong> Code like\r\n<pre class=\"brush:php\"> &lt;a&gt;&lt;img src=&quot;{{skin url='images\/media\/slider_img_1.png'}}&quot; alt=&quot;&quot; title=&quot;#htmlcaption&quot; \/&gt;&lt;\/a&gt;<\/pre>\r\n<p> shows image name for slider.<\/p>\r\n<p>Let&#8217;s change slider image.<\/p>\r\n<p>In this template images for slider are located in <strong>\\skin\\frontend\\default\\theme291\\images\\media<\/strong> folder. Images are called like slider_img_1.png, slider_img_2.png etc. You can replace images directly, just use the same image name, extension and dimensions for your image. You can upload images using ftp or hosting file manager.<\/p>\r\n<p>In order to change image path we should edit code above. Just change slider_img_1.png with your own image name. Modified code should look like\r\n<pre class=\"brush:php\"> &lt;a&gt;&lt;img src=&quot;{{skin url='images\/media\/slider_img_new.png'}}&quot; alt=&quot;&quot; title=&quot;#htmlcaption_2&quot; \/&gt;&lt;\/a&gt;<\/pre>\r\n<\/p>\r\n<p>Below you will see modified slider image.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_4-300x164.png\" alt=\"\" title=\"magento_edit_slider_4\" width=\"300\" height=\"164\" class=\"alignnone size-medium wp-image-18799\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_4-300x164.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_4.png 971w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p><strong>4.<\/strong> The following code specifies  code for image logo that is used in slider, text for slider with prices and link to product.<\/p>\r\n<pre class=\"brush:php\">&lt;div id=&quot;htmlcaption&quot; class=&quot;nivo-html-caption&quot;&gt;\r\n&lt;a href=&quot;'workstations\/vpcsa33gx-si-laptop-computer-44.html&quot;&gt;&lt;img src=&quot;{{skin url='images\/media\/slider_product_1_logo.png'}}&quot; alt=&quot;&quot; \/&gt;&lt;\/a&gt;\r\n&lt;h3&gt;VPCSA33GX\/SI&lt;br \/&gt; Laptop Computer&lt;\/h3&gt;\r\n&lt;p&gt;Intel Core i5-2430M 2.40GHz, 4GB DDR3, 128GB SSD, DVDRW, 1GB AMD Radeon HD 6630M, Backlit Keyboard, 13.3&quot; Display, Windows 7 Professional 64-bit&lt;\/p&gt;\r\n&lt;span class=&quot;save-price&quot;&gt;SAVE $499&lt;\/span&gt;\r\n&lt;span class=&quot;price&quot;&gt;$1,299&lt;\/span&gt;\r\n&lt;button onclick=&quot;setLocation(''workstations\/vpcsa33gx-si-laptop-computer-44.html')&quot; class=&quot;button btn-cart&quot; title=&quot;shop&quot; type=&quot;button&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;\/span&gt;&lt;\/button&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<p><strong>4.1.<\/strong> Let&#8217;s modify product link. Open particular product on your site and copy part of link highlighted on screenshot below:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_5-300x154.png\" alt=\"\" title=\"magento_edit_slider_5\" width=\"300\" height=\"154\" class=\"alignnone size-medium wp-image-18800\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_5-300x154.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_5-1024x526.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_5.png 1256w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p><strong>4.2. <\/strong>Replace original link like &lt;a href=&quot;&#8217;at-nulla-pariatur-excepteur-sint-occaecat.html&quot;&gt; with the one copied in previous step. Code with modified link should look like:<\/p>\r\n<pre class=\"brush:php\">&lt;div id=&quot;htmlcaption&quot; class=&quot;nivo-html-caption&quot;&gt;\r\n&lt;a href=&quot;'at-nulla-pariatur-excepteur-sint-occaecat.html&quot;&gt;&lt;img src=&quot;{{skin url='images\/media\/slider_product_1_logo.png'}}&quot; alt=&quot;&quot; \/&gt;&lt;\/a&gt;\r\n&lt;h3&gt;VPCSA33GX\/SI&lt;br \/&gt; Laptop Computer&lt;\/h3&gt;\r\n&lt;p&gt;Intel Core i5-2430M 2.40GHz, 4GB DDR3, 128GB SSD, DVDRW, 1GB AMD Radeon HD 6630M, Backlit Keyboard, 13.3&quot; Display, Windows 7 Professional 64-bit&lt;\/p&gt;\r\n&lt;span class=&quot;save-price&quot;&gt;SAVE $499&lt;\/span&gt;\r\n&lt;span class=&quot;price&quot;&gt;$1,299&lt;\/span&gt;\r\n&lt;button onclick=&quot;setLocation(''at-nulla-pariatur-excepteur-sint-occaecat.html')&quot; class=&quot;button btn-cart&quot; title=&quot;shop&quot; type=&quot;button&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;\/span&gt;&lt;\/button&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<p><strong>4.3.<\/strong> In order to change text you need to edit text in the code specified above. Please keep the same tag structure in order to get correct layout.<\/p>\r\n<p><strong>4.4.<\/strong> In our template slider has logo specified in the following code:\r\n<pre class=\"brush:php\"> &lt;img src=&quot;{{skin url='images\/media\/slider_product_1_logo.png'}}&quot; alt=&quot;&quot; \/&gt;<\/pre>\r\n<\/p>\r\n<p><strong>4.5.<\/strong> Please perform the same actions for all slides.<\/p>\r\n<p>You can change logo image it the same way as slider image. Below you will see modified code of slider (for the first slide):<\/p>\r\n<pre class=\"brush:xml\">&lt;div id=&quot;htmlcaption&quot; class=&quot;nivo-html-caption&quot;&gt;<br \/>\r\n&lt;a href=&quot;{{store url='at-nulla-pariatur-excepteur-sint-occaecat.html'}}&quot;&gt;&lt;img src=&quot;{{skin url='images\/media\/slider_product_1_logo.png'}}&quot; alt=&quot;&quot; \/&gt;&lt;\/a&gt;<br \/>\r\n&lt;h3&gt;VPCSA33GX\/SI&lt;br \/&gt;New Product&lt;\/h3&gt;<br \/>\r\n&lt;p&gt;New configuration!!! 44GB DDR3, Your text Windows 7 Pro x64t&lt;\/p&gt;<br \/>\r\n&lt;span class=&quot;save-price&quot;&gt;SAVE $999&lt;\/span&gt;<br \/>\r\n&lt;span class=&quot;price&quot;&gt;$1,220&lt;\/span&gt;<br \/>\r\n&lt;button onclick=&quot;setLocation('{{store url='at-nulla-pariatur-excepteur-sint-occaecat.html'}}')&quot; class=&quot;button btn-cart&quot; title=&quot;shop&quot; type=&quot;button&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;\/span&gt;&lt;\/button&gt;<br \/>\r\n&lt;\/div&gt;<\/pre>\r\n<p>Check the screenshot with modified slider:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_6-300x218.png\" alt=\"\" title=\"magento_edit_slider_6\" width=\"300\" height=\"218\" class=\"alignnone size-medium wp-image-18801\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_6-300x218.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/magento_edit_slider_6.png 977w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"\/help\/files\/Magento\/magento_edit_slider.htm\" target=\"blank\">Magento. How to edit slider<\/a><\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to edit slider in Magento templates.<\/p>\n","protected":false},"author":39,"featured_media":18807,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[729],"tags":[1048,2407,832,816],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/18795"}],"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\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=18795"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/18795\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/18807"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=18795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=18795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=18795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}