|
Dear TB Support or other experts,
Is there a way to change the current ‘Buy Now” button on product page and category page to a button that wil increase the conversion.
Attached is an example from how i’d like to have the button.
I also like to have a hoover effect on this button, so when the mouse goes over it wil look different.
The attached example is not exactly what i want, but if that’s possible i can design one my own and upload that one.
Also the current button is attached.
Thanks and hope we can fix this!
|
|
|
Hi Rovara;
I don’t have use a image for this button I have use CSS to get the button:
So, to get a button like yours Do this :
Add to this file: catalog/view/theme/shoppica2/stylesheet/screen.css.php the code below :
/* ************************************ Buttons styles *** BEGIN *** */
.button::-moz-focus-inner{
border: 0;
padding: 0;
}
.button{
display: inline-block;
padding: 0 5px;
margin: 0;
cursor: pointer;
border: 1px solid #bbb;
overflow: hidden;
font-size: 18px;
text-decoration: none;
white-space: nowrap;
color: #555;
text-indent: 5px;
background-color: #ddd;
-webkit-transition: background-color .2s ease-out;
-moz-transition: background-color .2s ease-out;
-ms-transition: background-color .2s ease-out;
-o-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
background-clip: padding-box; /* Fix bleeding */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button:hover{
background-color: #eee;
color: #555;
}
.button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
/* Large buttons styles */
.button.large{
padding: 6px 15px;
text-transform: uppercase;
}
.button.large:active{
top: 2px;
}
/* Colored buttons styles */
.button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
/* GREEN */
.button.green{
background-color: #57a957;
border-color: #57a957;
}
.button.green:hover{
background-color: #62c462;
}
.button.green:active{
background: #57a957;
}
/* RED */
.button.red{
background-color: #c43c35;
border-color: #c43c35;
}
.button.red:hover{
background-color: #ee5f5b;
}
.button.red:active{
background: #c43c35;
}
/* BLUE */
.button.blue{
background-color: #269CE9;
border-color: #269CE9;
}
.button.blue:hover{
background-color: #70B9E8;
}
.button.blue:active{
background: #269CE9;
}
/* */
/* ************************************ Buttons styles *** END*** */
And open this file:
catalog/view/theme/shoppica2/template/product/product.tpl
and find find this code:
<a id="add_to_cart" class="s_button_1 s_main_color_bgr">
<span class="s_text s_icon_24"><span class="s_icon"></span> <?php echo $button_cart; ?></span>
</a>
change it like this (to change the color change gree to red or to blue or modify the color in the css code):
<button id="add_to_cart_color" class="large color green button">
<span> <?php echo $button_cart; ?></span>
</button>
Good luck
Sam
-
This reply was modified 4125 days ago by
 samdz.
|
|
|
Hi Sam,
Thanks for your response (again)!
I’ve did what you said, but not the results like i hoped. Attached is a screenshot from how it looks after working out above instructions. As you can see the color of the button isn’t green, the design isn’t with a hoover effect, the shape isn’t rounded and the button isn’t alligned. Also, when i hit the button the product(s) aren’t placed in the cart, instead of that a strange serie of variables comes behind the url.
attached also another example.
THANKS in advance!
|
|
|
Hi,
First, try to add the code in the screen.css.php before this code
/*****************************************************/
/****** F O O T E R W I D G E T S *************/
/*****************************************************/
Second, sorry for the code; try do replace this code
<a id="add_to_cart" class="s_button_1 s_main_color_bgr">
<span class="s_text s_icon_24"><span class="s_icon"></span> <?php echo $button_cart; ?></span>
</a>
by this (remove the cart icon):
<button id="add_to_cart" class="large color green button">
<span> <?php echo $button_cart; ?></span>
</button>
or by this (display cart icon)
<button id="add_to_cart" class="large color green button">
<span class="s_text s_icon_24"><span class="s_icon"></span> <?php echo $button_cart; ?></span>
</button>
Also you can change the color to blue or red by replace green by blue or red
This time it will be work,
See the attachment for an examples.
REgards
Sam
|
|
|
Sam thanks for your reply!
The examples you have attached are PERFECT, only i didn’t get it to work again..
Attached is a screenshot from how it looks like after working out above instructions.
It seems like the screen.css.php file isn’t changing the button.
Hope we can fix it!
Thanks!
Note that i’m using Shoppica 2, maybe it is usefull information.
|
|
|
Hi,
Note I have tested on Shoppica2 with Opencart 1.5.4.1 on iexplore, chrome and firefox.
So, copy screen.css.php in the attachment and replace the old file (backup your file first).
and copy button_styles.xml in the attachment to vqmod/xml
Then refresh the page.
Regards
Sam
|
|
|
Sam i think i discovered the problem.
Do you remember the additional images in my header, when fixing this i’ve also added some code to the screen.css.php. file. I think this code has influenced the button. Because when uploading your xml and screen.css.php. file everything is working good. but when i add the code for the images in the header the button is showing like attached in my previous message.
Is there a possibility that both fixes can work together?
Hope you understand!
Thanks in advance 
|
|
|
Hi,
Sorry I forget the last change for the header,
So, I think that you went keep the image in the header with the new button style,
It’s possible, send me via email you screen.css.php that you mak for the header image.
Regards
Sam
|
|
