The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #11  
Old 12-20-2011, 09:00 AM
Daniel Forte's Avatar
Daniel Forte is offline
Junior Member
 
Join Date: Feb 2011
Posts: 23
Default


this is the code i used to change all the buttons:

/* The "Add to bag" button in up state */ div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering { background: transparent url(http://mesushi.squarespace.com/stora...ag%20copy9.png) no-repeat top center !important; } /* The "Add to bag" button in down state */ div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering { background: transparent url(http://mesushi.squarespace.com/stora...ag%20copy9.png) no-repeat bottom center !important; }

But now i just want to change a few individual ones. When i add the code you suggested nothing seems to happen.

thanks,
  #12  
Old 12-22-2011, 10:35 AM
Matt Ecwid's Avatar
Matt Ecwid Matt Ecwid is offline
Ecwid Team
 
Join Date: Oct 2011
Posts: 4,947
Default

Quote:
Originally Posted by Daniel Forte View Post
this is the code i used to change all the buttons:

/* The "Add to bag" button in up state */ div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering { background: transparent url(http://mesushi.squarespace.com/stora...ag%20copy9.png) no-repeat top center !important; } /* The "Add to bag" button in down state */ div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering { background: transparent url(http://mesushi.squarespace.com/stora...ag%20copy9.png) no-repeat bottom center !important; }

But now i just want to change a few individual ones. When i add the code you suggested nothing seems to happen.

thanks,
Now I see, thank you for the explanation. Sorry for the misunderstanding.

I have inspected your site and your custom CSS code to investigate why it doesn't work for you. The reason is the suggested CSS code doesn't fit to the way how your Ecwid store is integrated on your site.

The method described in this thread works in a product browser widget. But you don't use it on your site in a regular manner, the product browser only appears there in a popup-like window when a customer wants to see his cart and go to the checkout. You use the 'Add to bag' button as separate widget for each product in the catalog instead. As a result, the add to cart button doesn't have parent elements with a specific product-related identifiers in the HTML structure of the page. That is why the code I suggested doesn't work. For example this rule requires the div element with class 'ecwid-productBrowser-ProductPage-8228702' to be on the page:
Code:
div.ecwid-productBrowser-ProductPage-8228702 div.ecwid-AddToBagButton-up { 
  background: transparent url(http://www.example.com/filename.png) no-repeat top center !important; 
}
But your category and product pages don't contain such elements.

You can resolve the issue by a slight modification of the code which displays products on your site. Each product you want to change the button for should be marked with some identifier in the html code, it will allow to create CSS rule which will apply only to the corresponding buttons.
I've discovered that each add to cart button on your site has a parent element (div) with class 'ecwid-Product'. For example, it looks like this for the 'Extra soy sauce' product:
Code:
<div class='ecwid-Product'>
  <form>
    <div style='text-align: center'>
      <script type="text/javascript" src="http://app.ecwid.com/script.js?236278" charset="utf-8"></script>
      <script type="text/javascript">xAddToBag('productid=8228702');</script>
    </div>
  </form>
</div>
So, if you decide to change the button for that product, you can append an additional class to that div, for example, let it be called 'extra':
Code:
<div class='ecwid-Product extra'>
...
The corresponding CSS code will look like this:
Code:
/* The "Add to bag" button in up state */
div.extra div.ecwid-AddToBagButton-up, 
div.extra div.ecwid-AddToBagButton-up-hovering { 
  background: transparent url(http://www.example.com/filename.png) no-repeat top center !important; 
} 

/* The "Add to bag" button in down state */ 
div.extra div.ecwid-AddToBagButton-down, 
div.extra div.ecwid-AddToBagButton-down-hovering { 
  background: transparent url(http://www.example.com/filename.png) no-repeat bottom center !important; 
}
This code will work for all products marked with the 'extra' additional class.

There is also one important thing you should notice. An add to cart image in Ecwid is supposed to be a CSS sprite, it actually should have two images of the button (for 'normal' and 'pressed' states). If I understand you right, you want to use this image:
http://mesushi.squarespace.com/storage/buttons/e1.png
It is not a sprite and its size differs from the default image's. Thus it might be displayed incorrectly.
__________________
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials
  #13  
Old 12-24-2011, 04:03 PM
Daniel Forte's Avatar
Daniel Forte Daniel Forte is offline
Junior Member
 
Join Date: Feb 2011
Posts: 23
Default

Fantastic! Thank you so much for your help! Ive tested it and it works perfectly

Have a great xmas,
  #14  
Old 03-29-2015, 01:16 PM
Giuseppe Serra's Avatar
Giuseppe Serra Giuseppe Serra is offline
 
Join Date: Aug 2012
Posts: 11
Default

Hi all
Although I edit my custom CSS theme with the snippet below..

"..
/* The "Add to bag" button in up state */
div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering {
background: transparent url(http://www.takeaway-dublin.com/images/add_to_bag.png) no-repeat top center !important;
}
/* The "Add to bag" button in down state */
div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering {
background: transparent url(http://www.takeaway-dublin.com/images/add_to_bag.png) no-repeat bottom center !important;
}
.."


the website show me still your "Buttons"
Something wrong in the snippet aboe?

Thanks, Giuseppe
  #15  
Old 04-01-2015, 09:49 AM
Ksenya Merkulova's Avatar
Ksenya Merkulova Ksenya Merkulova is offline
 
Join Date: Mar 2015
Posts: 39
Default

Quote:
Originally Posted by Giuseppe Serra View Post
Hi all
Although I edit my custom CSS theme with the snippet below..

"..
/* The "Add to bag" button in up state */
div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering {
background: transparent url(http://www.takeaway-dublin.com/images/add_to_bag.png) no-repeat top center !important;
}
/* The "Add to bag" button in down state */
div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering {
background: transparent url(http://www.takeaway-dublin.com/images/add_to_bag.png) no-repeat bottom center !important;
}
.."


the website show me still your "Buttons"
Something wrong in the snippet aboe?

Thanks, Giuseppe
Hello Giuseppe,

I’ve checked up your store and I see that you’ve already changed these buttons, as you can see in this screenshot
Probably you want to change also these buttons (on the screenshot)

In this case you need to address to this article http://help.ecwid.com/customer/portal/articles/1163999
  #16  
Old 04-09-2015, 06:25 PM
Giuseppe Serra's Avatar
Giuseppe Serra Giuseppe Serra is offline
 
Join Date: Aug 2012
Posts: 11
Default

Hi
I was thinking a this specific stage of the project to set as "display none" all image's buttons
and show the buttons as "links text"
How Can I do that?
Thanks, Giuseppe

Last edited by river; 04-10-2015 at 02:12 PM.
  #17  
Old 04-10-2015, 02:11 PM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by Giuseppe Serra View Post
Hi
I was thinking a this specific stage of the project to set as "display none" all image's buttons
and show the buttons as "links text"
How Can I do that?
Thanks, Giuseppe
Hi,

I see that you want to change the buttons within Ecwid store to the text links.
It is definitely possible, but the simple CSS changes won’t help you here. For that purpose you would have to use Ecwid API and develop a special script which would do that: http://api.ecwid.com/

Instead, I’d recommend you simply changing the buttons in a way to make their background transparent and the whole button smaller. Write the text on that transparent background and change the buttons using this instruction: http://help.ecwid.com/customer/porta...o-change-your-

This will make the buttons look as if they were text links but they still be the buttons which add the product to the Shopping Bag.

Hope, this helps you. If you have any more questions, please ask.
__________________
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
  #18  
Old 04-11-2015, 03:14 PM
Giuseppe Serra's Avatar
Giuseppe Serra Giuseppe Serra is offline
 
Join Date: Aug 2012
Posts: 11
Default

Hi
Thanls but I would however says that it is not look easy at all.
However I already sent a request to get an authorization to develop an API.

Thanks, Giuseppe
>>>>
Hi
I just get back a meesgae form the API Ecwid team where they said that if I want change my CSS button in Text links I have to change my CSS code without managing API and stuff like that.
I repeat, my question is, how do I change my buttons in Text Links?!
I hope to get a definitve answer and fast suggestion to get it.
Thanks, Giuseppe

Last edited by river; 04-13-2015 at 11:40 AM.
  #19  
Old 04-13-2015, 11:43 AM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by Giuseppe Serra View Post
Hi
Thanls but I would however says that it is not look easy at all.
However I already sent a request to get an authorization to develop an API.

Thanks, Giuseppe
>>>>
Hi
I just get back a meesgae form the API Ecwid team where they said that if I want change my CSS button in Text links I have to change my CSS code without managing API and stuff like that.
I repeat, my question is, how do I change my buttons in Text Links?!
I hope to get a definitve answer and fast suggestion to get it.
Thanks, Giuseppe
Hi,

Well, as I mentioned before, with CSS you may only make the buttons look as if they were the “Text links”. The result in such case would be this:



If that is what you are trying to achieve, then here’s the way to do it:

1. Access your Ecwid Control Panel and go to the System Settings -> Design.

2. In the list of CSS themes find your currently active custom CSS theme and paste the following CSS code below all the rules you have in there:

Code:
button.ecwid-AccentedButton span {
  color: #000000 !important;
  padding: 0;
  margin: 0;
}

button.ecwid-AccentedButton,
button.ecwid-AccentedButton:hover,
button.ecwid-AccentedButton:active {
  height: auto;
  filter: none;
  background-image: none;
color: #000000;
}
 

button.ecwid-AccentedButton {
 -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 0px #666666;
  -webkit-box-shadow: 0px 1px 0px #ffffff;
  -moz-box-shadow: 0px 1px 0px #ffffff;
  box-shadow: 0px 1px 0px #ffffff;
  font-family: Arial !important;
  color: #666666 !important;
  font-size: 16px !important;
  background: transparent;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 0px;
  text-decoration: none;
}
 

button.ecwid-AccentedButton:hover {
-webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 0px #666666;
  -webkit-box-shadow: 0px 1px 0px #ffffff;
  -moz-box-shadow: 0px 1px 0px #ffffff;
  box-shadow: 0px 1px 0px #ffffff;
  font-family: Arial;
  color: #000000;
  font-size: 20px;
  background: transparent;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 0px;
  text-decoration: underline;
}
 

button.ecwid-AccentedButton:active {
-webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 0px #666666;
  -webkit-box-shadow: 0px 1px 0px #ffffff;
  -moz-box-shadow: 0px 1px 0px #ffffff;
  box-shadow: 0px 1px 0px #ffffff;
  font-family: Arial !important;
  color: #000000 !important;
  font-size: 16px !important;
  background: transparent;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 0px;
  text-decoration: underline;
}
3. Save changes and visit your store to see what happens.

In result the “Buy now” objects will still be buttons, but they will look like text links. They will even be underlined on hovering like real text links. Also, all the parameters in these CSS rules may be altered (color, font-size and others) to make the button look like you want it to.

You may always refer to this article for more info on how to change the “Buy now” buttons in the Ecwid store: http://help.ecwid.com/customer/porta...uy-now-buttons

Concerning what I said before about developing a script to work with Ecwid API: you would need that if you wanted to turn your buttons into actual text links. In this case the script would generate the text links which would add the products to bag. However, if the way I suggested above suits you, you don’t need to refer to API to achieve your goal.

So, you may try the method with CSS and write back with a feedback on whether it works for you or not. We are always glad to help and will be waiting for your reply.
__________________
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
add to bag, button, pre-order, product, specific

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:15 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.