Make Add To Cart Button Bigger
 

I am looking to make the add to cart button a lot bigger than the default button.

Do you what files I need to modify to add my own add to cart button image?

Thanks

Tahir

Re: Make Add To Cart Button Bigger
 

is this for 4.1 branch?

Ash

Re: Make Add To Cart Button Bigger
 

Moving to template editing. This forum is for product management only.

Re: Make Add To Cart Button Bigger
 

Yes it is for the 4.1 branch. Do you know which templates I will need to edit?

Re: Make Add To Cart Button Bigger
 

skin1/buttons/button.tpl

Re: Make Add To Cart Button Bigger
 

What exactly do I edit in that file to only change the add to cart button as I do not want to mess up all the other buttons.

Thanks

Tahir

Re: Make Add To Cart Button Bigger
 

*******MAKE A BACK UP FIRST*****************

first change the style of the add to cart button.

in skin1/customer/main/product.tpl

change this
{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}

to this
{include file="buttons/add_to_cart.tpl" style="atcButton" href="javascript: if(FormValidation()) document.orderform.submit();"}


then in buttons/button.tpl
change this

{if $style eq 'button' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}
<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
<td class="Button"{$reading_direction_tag}>
<font class="Button">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
</tr>
{/strip}
</table>
{elseif $image_menu}

to this

{if $style eq 'atcButton' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}
<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1newbutton.gif" class="atcSide" alt="{$title|escape}" />
</td>
<td class="atcButton"{$reading_direction_tag}>
<font class="atcButton">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2newbutton.gif" class="atcSide" alt="{$title|escape}" />
</td>
</tr>
{/strip}
</table>
{else if $style eq 'button' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}
<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
<td class="Button"{$reading_direction_tag}>
<font class="Button">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
</tr>
{/strip}
</table>
{elseif $image_menu}

You will then need to add the new styles to the CSS highlighted in red ablove.

Then up load new iamges.

That's it. Simple!!! HA!

Changing the buttons can be bit of a hassle.

Ash

Re: Make Add To Cart Button Bigger
 

Awesome thanks for your help on that will get it a try tonight.

Just one quick question. The current add to cart button uses actual text but the add to cart button that I have created will be just a image (see attached). Do I need to do anything differently in that case to what you have mentioned??

Tahir

Re: Make Add To Cart Button Bigger
 

yes you should change this

<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1newbutton.gif" class="atcSide" alt="{$title|escape}" />
</td>
<td class="atcButton"{$reading_direction_tag}>
<font class="atcButton">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2newbutton.gif" class="atcSide" alt="{$title|escape}" />
</td>
</tr>

to this

<tr>
<td class="atcButton"{$reading_direction_tag}>
<div><img src="{$ImagesDir}/mybuttonimage.gif" alt= add to cart" />
</td>
</tr>