Changing Buttons in your Store

Design Tips- Last updated Nov 2, 2016

There are many buttons seen by customers in a ShopSite store such as "Add To Cart", "Checkout" and "Continue Shopping." Each of these buttons can be customized by changing the text, or uploading a custom button image.

Button Images

If you would like to create your own button images and upload them into ShopSite, you can tell ShopSite to use your custom images by going to the various screens in your ShopSite back office listed below, and specifying which images goes with which button in ShopSite.

  • Preferences > Store Text > Store Pages
  • Preferences > Store Text > Shopping Cart
  • Preferences > Store Text > Checkout
  • Preferences > Store Text > Registration
  • Preferences > Store Text > Gift Certificate
  • Merchandising > Wish List

Buttons With CSS

A faster way to create custom buttons for all buttons in ShopSite is to use CSS to style the submit inputs the way you want. You will want to start by going to all the screens listed above, and changing the radio button option for buttons from "image" to "text." You can then add CSS to your custom template that styles all the submit buttons to look how you want. Below is some example CSS that you could use:

The CSS below creates a Twitter Bootstrap style button:

input[type="submit"] {
	background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
	-moz-user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
input[type="submit"]:hover {
	background-color: #286090;
    border-color: #204d74;
    color: #fff;