When you run an ecommerce website, CSS often serves as a helpful way to improve your user experience and clean up clunky areas on your sites.
After all, ecommerce is all about moving your customers from the product pages to checkout as quickly as possible, and ensuring the experience is good enough for them to come back to the site.
Some quick CSS tweaks improve display consistencies throughout your site, help with speed and allow for the ideal presentation for your most valued products and services on an ecommerce website.
Let’s take a look at how you can implement some of these CSS tweaks to improve your shopping cart and checkout experience.
Locate all Image Buttons, and Replace Them with CSS
The shopping cart and entire checkout process for an ecommerce site is filled with image-based buttons, slowing down your site due to the loading times for these images.
Improve your user experience by speeding up your checkout a tad with CSS.
Use the Gradient Scanner tool to upload the image you currently use for a button. If this button includes a gradient, simply draw a line across the colors that make the gradient. The tool grabs the colors needed and converts the selection into CSS code you can later use to create CSS-based buttons.
Incorporate CSS Sprites
Your best bet is to choose one of the best ecommerce platforms for improved SEO, but there are always a few tweaks you can make in your site code to reach out to search engines and increase your visibility online.
One of those tricks is to use CSS sprites, a trick that decreases the amount of web requests by combining multiple image requests into one.
SpritePad provides a fairly quick tool to combine your images into one CSS Sprite, along with the CSS code.
You can also create sprites yourself, by following this CSS-Tricks guide. Let’s take a look at some quick code you can implement to use CSS Sprites.
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url(‘../img/image1.gif’)}
#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}
#nav li a.item2 {background-image:url(‘../img/image2.gif’)}
#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)}
…
You’ll notice that the anchor tag has no background-image, yet the individual classes do. This is the result:
When we make some changes with CSS Sprites, it creates a single, long image, decreasing the number of HTTP requests, and speeding up your ecommerce page loads.
Simply generate an image that is as wide as your longest image and as tall as every image stacked on top of each other. With the height you should also add X pixels, where X is the total count of images you are using. Left-align all of your images into the new image.
#nav li a {background-image:url(‘../img/image_nav.gif’)}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
…
Customize Your Shopify Checkout with CSS
Since Shopify is one of the most popular platforms for creating an ecommerce store, it’s not a bad idea to help out those who have chosen this route. Modify the style of your Shopify checkout for better branding and overall user experience.
Start by creating a checkout.css file and uploading it into the assets folder for your theme. If you want to use liquid filters then create a file called checkout.css.liquid.
You can learn more here, but Shopify basically gives us a sample file to play around with and customize the checkout. Take a look at this file below, and feel free to modify items to change things like background colors and font sizes.
/* Undo background and gradient */
body, #main, #container, #header, #footer {
background: #fff !important;
}
/* Undo overview background and borders */
#main #overview {
background: #fff;
border: none;
}
#main #overview > * {
border: none;
}
#main #thumbs div {
border: none;
}
/* Insert your own logo (upload separately) */
#logo {
height: 65px;
background: url({{ ‘logo-checkout.png’ | asset_url }}) center no-repeat;
}
#header > h1{
text-align:center;
}
/* Hide the name of the store because we got this nifty logo now */
#header > h1 span.title {
display:none;
}
The checkout containers can be modified by pasting the following code into your checkout.css.liquid file. Simply change the width to your liking.
#container,
#container.slim,
#main,
#container.slim #main,
#header,
#container.slim #header,
#footer,
#container.slim #footer{width:850px;background:#fff;padding:0}
Change the Way Your WordPress eStore Plugin Shopping Cart Looks
Another popular option for ecommerce sites is the WordPress eStore plugin. It’s a nice way to sell digital products on your store, but what if you want to change what your shopping cart looks like? Use a few lines of CSS!
Go to the WordPress style.css file and place in the following code. Keep in mind that you must be using this plugin for this to work, but you can change up the font size and color to make the shopping cart better fit your branding.
.shopping_cart{
font-size:12px;
color:#228CD2;
}
.shopping_cart h2{
font-size:14px;
}
The thing with ecommerce CSS tweaks is that you typically take a prebuilt platform, like Shopify, and move onto the CSS files to make changes to the system that is currently in place.
Here are some additional guides if you are using other ecommerce platforms, but you still want to change what your shopping cart experience looks like:
- Referencing images in your BigCommerce store
- Editing your template using CSS in Volusion
- CSS customization with BigCartel
- Modifying the CSS file in 3dCart
That’s it! Let us know in the comments section if you have any questions about these simple CSS tweaks to improve your shopping cart experience.
