CSS For Your Shop (de)Coded

SE Coded

Here we are again, the third installment of my Storenvy shop owner’s tips and tricks. We’ve added reviews and invited folks to join your mailing list, so let’s pretty things up this week!

Have you seen Storenvy’s new layout, Cooper? It’s gorgeous! We switched our shop over and are loving it. If you haven’t switched yet, I did leave some code bits for you as well, so do be discouraged. 🙂 Either way, be sure to click on the pictures for a closer look, as each one shows the actual code used along with the effect.

This is by no means the be-all, end-all code guide. It might, however, be useful for you if you aren’t a code monkey with mad skillz. (If you are a code monkey with mad skillz, try to have mercy on me, eh?) Here you’ll find a few of the code bits I’ve seen most asked for, and a few that are just fun and handy. You might even find some fun resources. 😉 Don’t be afraid to check back, too. With the new layout, I’ll probably add code a little at a time to the bottom of this post.

If you haven’t played with it before, you can find your store’s CSS by logging in to your store’s admin panel, then selecting the design tab. Below are the easy CSS selector tools, but there is also a button next to “EASY MODE” that says “CSS MODE” – you want to select the CSS mode button.

CSS Mode

CSS Mode

Tags

!!!!! old layouts !!!!! Please note that this code will NOT work in Cooper, as it is no longer needed.
Before:
#tags is visible here, though stylized.

#tags is visible here, though stylized.

In product pages you’ll see that the tags you add to your products are displayed as links. This would be great if it allowed you to search within just your store by clicking on them, but the fact is it searches all of Storenvy, potentially losing sales for you! If you’re like me and don’t want any of that nonsense, add this snippet to your CSS:

#tags {
display: none; /* Hide Tags */
}

After:

#tags hidden

#tags hidden

Four Products Across

!!!!! old layouts !!!!! Please note that this code will NOT work in Cooper, as it is no longer needed.
Before:
Zeeuh.storenvy.com normal, with 3 up

Zeeuh.storenvy.com normal, with 3 up

This might be the most asked for snippet. The first thing you need to know is this: you cannot fit four across when the sidebar (your avatar, location, and buttons are located there) is visible! If you try you will only cause yourself tears. Or break your computer screen. It’s a classic square peg, round hole problem; there just isn’t room.

To make your sidebar do a disappearing act, use this:

#sidebar {
display: none; /* Hide Sidebar */
}

Pretty straightforward, right? You don’t want it to display, and *poof*! Get it? Got it? Good. Here’s what it looks like:

Zeeuh with no sidebar

Zeeuh with no sidebar

Now, here’s what my CSS looks like:

#main {
display: inline;
float: left;
margin: 18px 0 0 32px;
padding-bottom: 15px;
width: 960px;
} /* Main Page 4up */

Please don’t get scared of that “float: left” bit, I promise your products will still be centered on the page. Pinky promise, even! You can try playing with the padding and margin a little bit, but I’ve got it pretty snug there.

After:

4 products across

4 products across

Backgrounds

There are a few backgrounds you can do, and here are some fun ways to play with them.

First, let’s meet our contestants:

body {} /* total site background */
#content {} /* middle background */
#product_description {} /* product description area */

Total Site Background

You’ll notice, if you visit Mystic Eye Creations, that we have a gradient background. If you don’t know a whole lot of code and want something like that, then try this site: Ultimate CSS Gradient Generator

It allows you to make a gradient and writes the code for you. Perfect if you have no inclination to learn much code, or if you want to study some code as it changes.

Either way, here’s how to implement it:

body {
***PASTE CODE HERE***

} /* Background Gradient */

If you want the gradient to stay in place when you scroll, your code will look like this:

body {
***PASTE CODE HERE***

background-attachment: fixed;
} /* Background Gradient*/

Example:

Gradient on Mystic Eye Creations

Gradient on Mystic Eye Creations

If you don’t dig the gradients, try this CSS pattern generator, Patternify. It’s a similar idea, but you can make patterns in any color, and draw your own pattern! Custom chevrons, anyone? Here’s how a pattern from Patternify works:

body {
background: url(***CODE FROM CSS BOX***)
;
}

Example:

Patternify

Patternify

Notice a theme yet? The brackets say “this is where the info you want starts/stops.” The semicolon at the end of a rule says “that’s the end of that order, start something new.”

Content Background

Now for the #container, or the middle section, background. If you have a pattern, I’d recommend you leave this one a solid color or very, very subtle gradient. Otherwise, feel free to remove it all together, using this code:

#container, #content{
background: none;
}

Example:

No Center

No Center

That allows your full-site background to show through. This is also really nice to do if you have a subtle graphic background and want to show it off. If using the new Cooper layout be sure to just edit the code on lines 47-49, and this will also make your header and footer see-through. You will need to add #container to the beginning of line 47 for everything to become transparent!

Descriptions Background

Now, on Mystic Eye Creations I took out the #content background to let the gradient show through, but that made the descriptions harder to read in the old layout. That’s why I included the #product_description tag. Setting a separate background for this will allow you to have a different feel to your site. If you’re sick of looking at my site, I’ve done this for D. Rix Creations as well, and as of this post she’s still using the original theme.

Here’s how to add a basic white background here:

#product_description {
background-color: #FFFFFF;
}

You can also do #product_info if you’d like the title, price, and add to cart to also have the background. It’s worth noting that you can add a subtle gradient, but I find that might be overkill if you’ve done some of the other stuff here.

Partial Transparency

Before:

You know how sites like Twitter have that neat-o half transparent effect that makes it easier to read while keeping your background? You can do that too, and it’s really easy.

#container, #content, #header, #footer (or #product_description) {
background-color: rgba(255,255,255,.5)

}

The last number, .5, is the transparency level. Set it to 0 for completely transparent or 1 for completely solid. Anything in between will be partial. 🙂

After:

 #container, #content, #header, #footer {
background-color: rgba(255,255,255,0); /*: Store Border :*/
}
 #container, #content, #header, #footer {
background-color: rgba(255,255,255,0); /*: Store Border :*/
}
 #container, #content, #header, #footer {
background-color: rgba(255,255,255,0); /*: Store Border :*/
}

Rounded Corners

You’ll see rounded corners, or circles, on MEC‘s images. If you would like to round the corners on something and want the same curve for all four corners, try this code:

*your selector here, i.e. #product_description* {
border-radius: 10px; /* round corners by 10px */
}

or

*your selector here, i.e. #product_description* {
border-radius: 100%; /* make into a circle */
}

A selector is basically the name of what you want to change. So, for round corners on collections my code looks like this:

li.collection .img-wrapper {
width: 180px;
height: 180px; /* width and height are here because the collection images aren’t normally square */
border-radius: 100%;
}

Similar, but different, is my code for images within a collection:

li.product img.product-photo {
border-radius: 100%;
}

Example:

Circles

Circles

For different corners, your code will look something like this:

*selector* {
border-radius: 5px 10px 15px 20px;
}

Example:

Rounded Edges

Rounded Edges

So, the li.product, li.collection, .img-wrapper, and img.product-photo are all examples of selectors.

The first number is the upper left corner, then the upper right, then lower right, and finally lower left. Start in the upper left, like you were reading, and go clockwise. Also, these numbers are in pixels, but you can do them in ems. Without going into too much detail, doing it in ems will make the curve depend on what size the site font is. So, it would be “border-radius: 5em 10em 15em 20em;” instead. As shown above, percentages work the same way: “border-radius: 5% 10% 15% 20%;

Just remember not to get too carried away. If you add everything you can do, you’ll be doing exactly what you shouldn’t do. Pick and choose which effects suit your style; I wouldn’t pick subtle gradients and gentle curves for a shop selling neon 80’s apparel.

Moving Product Description Below Images

This has been a popular one since Cooper came out! The product descriptions usually sit next to the product, to the right. Many people don’t like that look, though.

Before:

Screencap of MEC

Here’s an alternative: have the product information sit below your images in two steps, this way:

#product_info {
font-size: 16px;
width: 100%;
margin-left: 0%;
float: left;
min-height: 1px;
} /* This makes your product info sit below your images */

Product Description moved below the images

#main_photo{
float:left;
clear:right;
} /* This makes your product images fill the gap */

This bit helps your images fill in the gap.

After:

Finished moving product descriptions

You can also see this in Enchanted Pathways Faerie Nursery, where I’ve done this for her.

Thumbnails To The Right

So now you’ve got your description area all gussied up. Let’s try moving the thumbnails of your product photos to the right, and fill in the rest of that space.

Here’s how you make the thumbnails go vertical next to your image:

#main_photo img{

float:left;

clear:none;

width: 70%;

} /* makes room for your thumbs */

First step of making your images vertical

#thumbs {
float:left;
clear:none;
margin-left:4%;
margin-top:-2.3%;
width:20%;
} /*makes the thumbnail box fit to the right of your image*/

Second step of making your images vertical

Don’t freak out, I promise we’ll fix it.

#thumbs li {
float:none;
display: inline;
width: 100%;
} /*makes the thumbnail imgs a bit bigger to fill more*/

Third step of making your images vertical

#thumbs img {
margin-bottom:23.5%;
} /*adds space between thumbnails*/

Fourth step of making your images vertical

#thumbs a{
border:none;
} /*makes the thumbnail border disappear, as it no longer works right*/

You are going to play with the numbers here, I promise. Mostly on the margin numbers, as the width % is about as big as you can go while still having it work.

Shrink Your Add To Cart Button

If you don’t want your add to cart button and drop down menu looking like someone put them through the taffy puller at Wonka’s factory, try this:

Adjust the cart form items

#cart_add_form,
#cart_add_form select,
#cart_add_form .single-variant,
#cart_add_form input.add_to_cart_button {
width:50%;
} /* adjust width of your drop-down and add to cart */

Additional Resources

Don’t want to play with numbers all day? Yeah, I don’t blame you. Try this site – it lets you make all kinds of awesome effects with nothing but CSS: CSS3 Generator

Not sure what colors to use? If you already have a logo, try to pull colors from that. If you’re just starting out, try Color Schemer or Design Seeds for some incredible palettes.

Adding custom fonts to your site is very easy, too. You could use Google Fonts for it’s ease of use, but you can also try Font Squirrel if you’re more advanced.

This is more of a tip than a resource, but I highly recommend using Firefox’s Web Developer Tools (under the main menu, shortcut ctrl+shift+I). That’s what you see at the bottom of every screen capture above. Using the inspector you can point and click on any object to find out it’s selector and see all associated CSS attributes at the same time. You can also test different CSS codes in real-time using the Style Editor (Shift+F7)! Just remember to copy and paste your work into Storenvy’s CSS editor and save to make it permanent, otherwise you’ll lose the CSS you’ve written when you leave the page.

The best part of these tips, is that I’ve already tested them! I know these work, because I’ve done them for myself, and for other businesses.

This is such a small sampling of what you can do, though. If you need some help with your shop, you can get my help one-on-one. Visit this page to reserve design services with me for only $10.

As someone with 2 years of formal graphic design education, 6 years of freelance designing, and 5 years as a small business owner, I’m dedicated to helping you engage your shop visitors and turn them into buyers.

Let’s not get spammy, but if you try any of these tips, I would love to see! Feel free to share a link in the comments.

Advertisements

128 responses to “CSS For Your Shop (de)Coded

  1. All I want to do is change the font size of my store name. I have tried to change it on line 53…but I am doing something wrong. Can you please help me with this little fix? I would be so grateful!

    • Hi Tracie! Changing font size can be a bit tricky on Storenvy. For every piece of text you want to change, you need to know the code that applies to it.

      For example,
      #product_info {
      font-size: 1.5em;
      }
      Would change the size of your product’s information section. Trying to change all the font sizes at once by using, say,
      body {
      font-size:1.5em;
      }
      doesn’t seem to work too well, and can make some things react strangely.

      Sorry I don’t have a more concise answer to give you, but it really is a bit of a hassle to change font sizes on SE!

    • Hi Johnna, sorry to hear you’re having trouble. What is it you want the transparent background on? I can’t really help without knowing that, though I’ve addressed different variations in several prior comments. If you want everything but product descriptions to be transparent, try this:
      #container, #content, #header, #footer {
      background:none;
      }
      Or try looking at some of responses for others that have asked. Here’s one or, maybe this.

  2. This is probably a silly question but I am working on my product descriptions and when i go to write another paragraph it looks fine while editing but when i click publish and it all looks condensed . Like i spaced it out while editing but it doesn’t show up! Do i have to use html code or something for the spacing to show up in my site?

  3. I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you?
    Plz answer back as I’m looking to create my own blog and would like
    to find out where u got this from. thank you

    • Hi Garry, Thank you! I did not code the frame for this site myself, but I have done the colors and edited the appearance as much as possible. The WordPress Theme I started with is Oxygen, so please feel free to utilize it!

  4. I’m trying to make my shop transparent and when I hit save it says “Number of products per page could not be saved” I’ve tried it a bunch of times and it won’t change. Any help?

  5. Hi, I am starting up a Storenvy shop your tutorial has been a great help so far! Just one trouble I’ve faced – using your code I have managed to make the background of the middle content of my shop transparent, but is there any way to only make the background behind a banner picture transparent while keeping the background on other portions intact? I have used a transparent banner for my site and I would like it to show through in my shop. Thanks in advance!

    • Hi Azelia! Good question. To do what you’re asking you’ll need to make #container transparent, and leave #content as white.

      So instead of:
      #container, #content{
      background: none;
      }

      You’ll have:
      #container{
      background: none;
      }

      and leave the #content tag alone… or add:
      #content{
      background: [YOUR HEX OR RGBA VALUE HERE];
      }

      Hope that helps!

Comments are closed.