Build Your Own Business Website header image

How to Style the Shopp Add to Cart Button

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, we demonstrate how to style the Add to Cart Button with CSS. In Week 6 of Build an Online Store Using Shopp Course, we discuss how to style buttons in Shopp here: Customize Shopp Templates

The code used for this lesson can be found below the video.

Code in Use

custom #shopp input[type='submit']
  border-top: 1px solid #96d1f8;
  background: #65a9d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  padding: 9px 18px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: white;
  font-size: 19px;
  font-family: Georgia, serif;
  text-decoration: none;
  vertical-align: middle;
.custom #shopp input[type='submit']:hover {
  border-top-color: #28597a;
  background: #28597a;
  color: #ccc;
.custom #shopp input[type='submit']:active {
  border-top-color: #1b435e;
  background: #1b435e;

Video Transcript

Rick: Okay so anyway, you had a question about styling buttons.

Member: Yeah if I can just get some help to make my buttons show up a little better, I’d sure appreciate it.

Rick: Now you know, in Week 6 of that session, the first video goes through the process of styling the buttons and in the Week 6 files, there is a sample code that I used to do that. I mean, it’s essentially though… and so I did say we’re not going to talk about code but we really don’t have pretty much to talk about this morning so we will go ahead and talk about code anyway.

Member: Well, I appreciate that.

Rick: If we go to Main Clinic Supply Medical Equipment…

Member: I’m going to call GoDaddy or something and… didn’t that seem awfully slow, Rick?

Rick: It does seem slow but…

Member: Okay.

Rick: So if we move over…

Member: Maybe they can give me some code to put in to get them off the…

Rick: Yeah, exactly. They may very well.

Member: Yeah.

Rick: So this is little Add to Cart button, right? If you inspect the element, let’s see… so that element is being controlled by… really, it’s being controlled by Thesis input style. If we look at the… there is no apparent Shopp style here. So what you do then is you would start off with… well here, let’s see. Let’s just put that down at the bottom and let’s open up Web Developer and Shopp CSS, right? This is the custom file for Shopp CSS and I generally recommend that in the videos, that you use the Shopp CSS as the place for editing that kind of thing.

And so if we just come down here to the bottom of the Shopp CSS and we start doing the button, if you type in .custom and then… you can see this is input and text area and we don’t really… so the… by and large, input is what’s controlling this. So if we just say .custom and then use this div id Shopp because everything that goes inside of Shopp… everything that Shopp generates gets placed inside this div id Shopp. So if you say .custom #Shopp and then it’s just… it’s an input and it’s got a class of add to cart. Or… so if you want them all to be the same, you would say input type = submit. So then that’s input and then in brackets type equals and then in single quotes, submit, single quote bracket.

And then now what you’d do is you’d start specifying things like… let’s just say, right now, the border is backwards, right? The thing is in… well, let’s get rid of the border entirely. So let’s just say border 0 px. Now it doesn’t have a border.

And I think you know, I mean, I’ve got videos on how to do this elsewhere on the site but something that you might consider is giong to one of those CSS 3 buttons. And I think this one here in particular, CSS Tricks is the button generator that I like.

Member: This gives you the CSS code to drop in then?

Rick: Yeah, let’s see… where did that go? Okay, snippets, CSS and then… okay, button generator. Well, I thought this was the one with the… let’s see, button generator. Okay…

Member: If you go back one, Rick, I thought I saw it there.

Rick: Back one? What do you mean?

Member: Go back one… go one screen back. I think I saw some mention of it. So that little Google search inside of there, see the little… the stupid little picture, that code snippets?

Rick: Yeah.

Member: There’s something right there. It says…

Rick: Oh, CSS 3 button maker. Let’s see, button maker.

Member: It shouldn’t be making this harder than it should be.

Rick: Yeah, you would think it would just pop right up.

Member: Yeah, the save button.

Rick: Let’s just look under CSS and then… it’s all alphabetized so you would think it would just show up there. Let’s see, CSS 3 button maker. There it is. That’s it, CSS 3 Button Maker.

Member: Alright.

Rick: And so we go to the demo here. I mean, one of the things you could do here is simply… let’s see, let’s give ourselves more padding and let’s make the text a little bit bigger and let’s give this a little bit rounder. And then actually, if you just left it right there…

Member: Yeah, that looks good.

Rick: And copy this… that’s not helping us. That’s not what we want. View the CSS. Click on that. You know, it could just copy that code, come back over to our custom CSS file. And here, instead of button, what you would do is you’d get rid of the name button because it’s not going to be named button anymore and we get rid of border 0 because that’s… not something that we’re doing anymore. So now you’ve got your button styled like that and then what you have to do is take this name, type equals submit colon and put that in front of hover and put that in front of active. And now, you’ve got you know, you’ve got that style.

Member: They’re better-looking buttons, yeah.

Rick: And you styled it, you adjusted it and got the style looking the way you wanted back when you were on another site.

Member: Yeah, right. No, that looks good.

Rick: I think the one thing that’s missing from this is… under hover… is that we should say pointer: cursor… I’m sorry… cursor: pointer which will give you the finger, so to speak, when you hover over it.

Member: Yeah, good. People are used to that, yeah.

Rick: Right. So…

Member: So we have effected, Rick, all of the buttons now?

Rick: This does affect all the buttons. We can double check… let’s see. Isn’t that interesting? We missed our bottom bracket there. But if we just copy this for a second and we go to a different page… so we add it to the cart and now you look at the thing, it’s not because we’ve just obviously… oh gosh, what did I do? Kill it? No, I’m in Firefox. I did kill it. Oh, there it is. It’s coming back. Okay so what we want to do is now go to cart.

Member: We lost our styling though.

Rick: Well, it’s because the styling was never on the site. The styling’s always only been in the browser. We just… we did that styling using Web Developer so it’s just a way of testing. It’s not a way of actually changing.

Member: Oh really? Okay.

Rick: Yeah. Anything I’m doing here on my web browser has only an effect… the only effect it has is on this web browser.

Member: Gotcha.

Rick: Oh great. Unfortunately, I lost all that code.

Member: But you copied it right, before you left.

Rick: I know but now I’m trying to paste it and it didn’t paste. So I’ll just try it again. .custom and then it’s input bracket type = submit. That’s the type of input it is and it’s not .custom input. It’s .custom #Shopp input. And then actually, I’m just going to take that then we come back over and copy our code from the button maker again. And then just go to that and then replace the other instances of button. So we keep the pseudo class hover and we keep the pseudo class active. And we had cursor: pointer; and now, you can see it’ll do… it takes care of the updates subtotal because it’s the same selector that applies to all 3 of those things and…

Member: Okay, do we need to bring the finger back?

Rick: We did.

Member: Oh okay, gotcha.

Rick: So we copy that and I want to make sure I copied it by pasting in my text area. And then if we go on from cart to checkout and we look down here, we’ve got one submit button left to look at. So go back in to that Shopp file and paste that again. Actually, I’m just going to paste it right here this time. So you can see that will apply to all of the buttons.

Member: Okay.

Rick: Now, I’ll go ahead and… I mean, what the point of this was really just for you to see what the process looks like. So the trick here is to muck about with this link and just change colors around so you’ll get them the way you want them. And if you like this, great. I’ll post this code to the forum so you can use it if this is the code you want to use. But my suggestion would be that you play with it until you like it and then just follow through on what I just did, rather than just using this code. But in any case, let’s see, that is Live Question & Answer code and styling a button in Shopp. Let’s see, styling buttons in Shopp and the… before I put the code in there actually, I want the put the URL. Let’s see, so the webpage to get the button CSS code is this one here and then the code itself is here.

Member: So I should be able to watch this video on the go and then drop that in to my site.

Rick: Yes, you should. Okay, there we go. So that should work pretty well.

Member: Alright.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment