SmartSTORE: How to adjust colours and fonts in your

SmartSTORE: How to adjust colours and fonts in your

The store comes with some default styling which suits most sites however you may wish to tweak it further. To help with this we have added a snippet below. Just adjust the items you wish to change. This is added to your page in the same way as you added the SmartSTORE snippet or can be added into your website stylesheets. If you have a web team they will be able to help with this or SmartTHING can help out with additional consultancy.

IMPORTANT: This should be placed on your SmartSTORE page or in your website stylesheet so it overrides the default colours and fonts.

<style>
      div.tagItemView {
            background-color: #55D6F7 !important; /* Background colour of the store items */
      }
      .BBFormRadioAmount {
            color: #fff !important; /* Colour for price */
      }
      #cartPopover .hudbtn.primary, .tagItemBody .buynow a, #cartButton a, #bbox-root .additionalDonation, .addDonation, #statusmessage {
            color: #fff !important; /* Colour for button text */
      }
      #cartButton a, .buynow a, .simpleCart_checkout.hudbtn.primary, table.rg-table, #statusmessage, .additionalDonation {
            background: #00a9e8 !important; /* Background colour of buttons */
      }
      #cartPopover .hudbtn:visited, a#continueShopping2:visited, #clearSearch, #cartPopover .hudbtn, a#continueShopping2, #cartPopover .fa-trash, #cartPopover a.simpleCart_decrement, #cartPopover a.simpleCart_increment {
            color: #009FE3 !important; /* colour for links: clear cart, return to product page etc. */
      }
      #cartButton a, .buynow a, .simpleCart_checkout.hudbtn.primary, h2.tagItemTitle, #statusmessage, p.p-property, #changeTopup, #checkoutSummary, #searchGifts, .additionalDonation, .PaymentPartSubmitButton, .PaymentPart_CartItemUnitPrice, select.PaymentPart_CartPaymentType, #ProductSearch, #cartPopover, .categoryButton, a#continueShopping2 {
          font-family: Arial, Helvetica, sans-serif !important; /* Font to use throughout the store */
      }
      .buynow a.orderNow:hover, .categoryButton:hover, #cartPopover .hudbtn.primary:hover {
          background-color: #0072bc; /* button background on hover */
      }
      #cartButton a, .buynow a, .categoryButton, .simpleCart_checkout.hudbtn.primary {
          background: #00a9e8; /* button background */
      }
</style>
    • Related Articles

    • SmartSTORE OLX FAQs

      How do I change items within the store? To change the items within your store you must log in with your licence key details to our deploy page (https://www.smartthing.org/olx-deploy/). It's important to use the same computer as you created the store ...
    • SmartSTORE: Integration with non-Blackbaud CMS (Drupal, WordPress, Joomla)

      SmartSTORE works on any web site system that allows you to add JavaScript and HTML (which most do) and provides a checkout option on those platforms for Blackbaud Online Express, PayPal, Google Checkout and Amazon payments. If you use a gateway other ...
    • SmartSTORE: Stock control addon - Initial set-up and then setting and monitoring stock levels

      Our new stock control feature for SmartSTORE is outlined below. There are two elements, an initial set-up which requires your web team or IT support team to install a single file on your web server. Following this the store administrator can set and ...
    • SmartDESIGN: Import requirements

      When preparing your site for an import into Blackbaud's NetCommunity or Internet Solutions products there are a few points to note. Background SmartDESIGN: Import takes a verbatim copy of your design and places it into the Blackbaud website product ...
    • SmartSTOREOLX Quick Start Guide

      Installation is very simple as long as you are familiar with how to place an OLX donation form on a page (please refer to Blackbaud Guides for help on this if unsure). Step 1 - Configure RE and OLX Note, these instructions are on the OLX Deploy page ...