Merchant Stories

Ecommerce Storefront Sliders: How To Edit Magento Banners

Feb 2, 2015 2 min read 263 views
Listen audio
Ecommerce Storefront Sliders: How To Edit Magento Banners

The animated banner is a good marketing tool. If it is used, the first thing your store visitors see will be the most profitable and interesting offers. However, sales and discounts are changing so it is necessary to update the slider from time to time.

In order to modify it, you should go to the admin panel, open CMS -> Pages-> Homepage. In Content tab, you can view and edit the code of your slider. This line contains the slider name:

<a><img src="{{skin url='images/media/slider_img_1.png'}}" alt="" title="#htmlcaption" />
</a>

 

Slider consists of several images which are stored in folder /skin/frontend/default/theme291/images/media. In this path ‘291’ is the number of the template being used. All images have the same name with different order numbers, e.g. slider_img_1.png, slider_img_2.png, etc. In order to change the image all you need to do is upload the necessary image of the same size to this folder using FTP. In order to use this image in slider it is necessary to change the image name in the code:

<a><img src="{{skin url='images/
media/slider_img_new.png'}}" alt="" title="#htmlcaption_2"/></a>

 

The following code will determine the text and logo for the slider:

<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>&nbsp;</span></button>
</div>

 

In order for your clients to be redirected to the necessary page when they click on the slider you need to copy the product name from the address bar after /index.php and paste it into the following code:

<div id="htmlcaption" class="nivo-html-caption">
<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>&nbsp;</span></button>
</div>

 

You can change the slider text in the same code. It is important to preserve the tag structure for a specific layout.

The following code indicates that the template contains a logo:

<img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt="" />

 

In order to change other slider images, you need to perform the same actions for other sliders. If you have any additional questions or need any assistance please contact our development company for Magento ®.

That's where you contact us!

    By submitting this form you agree to GoMage's Terms of Use and Privacy Policy
    woo-hoo! Now its time to keep checking your inbox, as we will be getting in touch soon. Promise :)
    oops! Thanks. But it seems like some kind of technical issues stop you from meeting GOMAGE. Could you try again?