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
  #1  
Old 03-28-2017, 02:26 PM
Sharon Cowan's Avatar
Sharon Cowan is offline
 
Join Date: Feb 2014
Posts: 2
Default

Add clickable button at Category level




http://www.cleaningbusinessconsultinggroup.com/store/

The store opens at the Category level. My client would like it to be more obvious that you need to click on the image to see the products.

I would like to add a clickable button under each Category - "Buy Now" for example - that then clicks through to the products.

Right now I have added the text "click the image" - if we can add a button under the text, then I will remove that "click the image" text.

I've looked at the theme designer and store front apps and documentation, but they all seem to allow you to style at the product level, and to style the font and color etc. of buttons at the product level.

I need help to ADD a button(s) at the Category level.
  #2  
Old 03-31-2017, 02:31 PM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,122
Default

Hello Sharon,

Using custom CSS code you can change design of the category links so that the category titles would look like buttons. For example:



How to do it:

First, you should generate CSS code for the button. You can use any CSS button generator, for example: http://css3buttongenerator.com/

In my example I used default button code:

Code:
.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
Then you need to slightly update this code: .btn class should be replaced with div.ecwid-productBrowser-subcategories-categoryName

Code:
div.ecwid-productBrowser-subcategories-categoryName {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

div.ecwid-productBrowser-subcategories-categoryName:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
Then you need copy this code and paste it to your Ecwid control panel > Settings > Design page. Click "Edit theme" button and add code to the field. Save the changes.

I hope you will find this helpful.

If you have other concerns, please feel free to write me back and it will be my pleasure to assist you further. Have a wonderful day!
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
The Following User Says Thank You to Wendy For This Useful Post:
Sharon Cowan (04-08-2017)
  #3  
Old 04-08-2017, 10:55 PM
Sharon Cowan's Avatar
Sharon Cowan Sharon Cowan is offline
 
Join Date: Feb 2014
Posts: 2
Default

I followed your advice and was able to add buttons at the category level.

Thanks so much for your help with this.
The Following User Says Thank You to Sharon Cowan For This Useful Post:
Wendy (04-10-2017)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
buttons, category

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 12:14 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.