- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
Featured templates
og体育首页ONE Subscrioption
Magento. How to edit slider
May 29, 2012
This tutorial shows how to edit slider in Magento templates
1. Open admin section and go to CMS->Pages and open Home page.
2. Open Content tab. There you will find code for slider.
3. Code like
1 | <a><img src="{{skin url='images/media/slider_img_1.png'}}" alt="" title="#htmlcaption"></a> |
shows image name for slider.
Let’s change slider image.
In this template images for slider are located in \skin\frontend\default\theme291\images\media 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.
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
1 | <a><img src="{{skin url='images/media/slider_img_new.png'}}" alt="" title="#htmlcaption_2"></a> |
Below you will see modified slider image.
4. The following code specifies code for image logo that is used in slider, text for slider with prices and link to product.
1 2 3 4 5 6 7 8 | <div id="htmlcaption" class="nivo-html-caption"><a href="'workstations/vpcsa33gx-si-laptop-computer-44.html"><img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt=""></a><h3>VPCSA33GX/SI<br> Laptop Computer</h3><p>Intel Core i5-2430M 2.40GHz, 4GB DDR3, 128GB SSD, DVDRW, 1GB AMD Radeon HD 6630M, Backlit Keyboard, 13.3" Display, Windows 7 Professional 64-bit</p><span class="save-price">SAVE $499</span><span class="price">$1,299</span><button onclick="setLocation(''workstations/vpcsa33gx-si-laptop-computer-44.html')" class="button btn-cart" title="shop" type="button"><span> </span></button></div> |
4.1. Let’s modify product link. Open particular product on your site and copy part of link highlighted on screenshot below:
4.2. Replace original link like html"> with the one copied in previous step. Code with modified link should look like:
1 2 3 4 5 6 7 8 | <a href="’at-nulla-pariatur-excepteur-sint-occaecat.<span class=" glossarylink"="" data-cmtooltip="The definition of <strong>HTML</strong> is <strong>HyperText Markup Language</strong>.<br/> A markup language is a set of markup tags<br/><br/> <strong>HTML</strong> documents are described by <strong>HTML</strong> tags.<br/><br/> Each <strong>HTML</strong> tag describes different document content.<br/><br/><br/><strong>HTML</strong> is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet.<br/><strong>HTML</strong> is a language, as it has code-words and syntax like any other language.<br/><strong>How is it used?</strong><br/><strong>HTML</strong> consists of a series of short codes typed into a text-file by(...) <strong></strong>" onclick="window.open('http://50c6.delicious-drop.com/help/glossary/html/', '_blank')"></a><div id="htmlcaption" class="nivo-html-caption"><a href="’at-nulla-pariatur-excepteur-sint-occaecat.<span class=" glossarylink"="" data-cmtooltip="The definition of <strong>HTML</strong> is <strong>HyperText Markup Language</strong>.<br/> A markup language is a set of markup tags<br/><br/> <strong>HTML</strong> documents are described by <strong>HTML</strong> tags.<br/><br/> Each <strong>HTML</strong> tag describes different document content.<br/><br/><br/><strong>HTML</strong> is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet.<br/><strong>HTML</strong> is a language, as it has code-words and syntax like any other language.<br/><strong>How is it used?</strong><br/><strong>HTML</strong> consists of a series of short codes typed into a text-file by(...) <strong></strong>" onclick="window.open('http://50c6.delicious-drop.com/help/glossary/html/', '_blank')"></a><a href="'at-nulla-pariatur-excepteur-sint-occaecat.html"><img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt=""></a><h3>VPCSA33GX/SI<br> Laptop Computer</h3><p>Intel Core i5-2430M 2.40GHz, 4GB DDR3, 128GB SSD, DVDRW, 1GB AMD Radeon HD 6630M, Backlit Keyboard, 13.3" Display, Windows 7 Professional 64-bit</p><span class="save-price">SAVE $499</span><span class="price">$1,299</span><button onclick="setLocation(''at-nulla-pariatur-excepteur-sint-occaecat.html')" class="button btn-cart" title="shop" type="button"><span> </span></button></div> |
4.3. 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.
4.4. In our template slider has logo specified in the following code:
1 | <img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt=""> |
4.5. Please perform the same actions for all slides.
You can change logo image it the same way as slider image. Below you will see modified code of slider (for the first slide):
1 2 3 4 5 6 7 8 | <div id="htmlcaption" class="nivo-html-caption"><br><a href="{{store url='at-nulla-pariatur-excepteur-sint-occaecat.html'}}"><img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt=""></a><br><h3>VPCSA33GX/SI<br>New Product</h3><br><p>New configuration!!! 44GB DDR3, Your text Windows 7 Pro x64t</p><br><span class="save-price">SAVE $999</span><br><span class="price">$1,220</span><br><button onclick="setLocation('{{store url='at-nulla-pariatur-excepteur-sint-occaecat.html'}}')" class="button btn-cart" title="shop" type="button"><span> </span></button><br></div> |
Check the screenshot with modified slider:
Feel free to check the detailed video tutorial below:
