Help

Tutorial

How to add Custom CSS

Welcome! The new Auctiva Commerce customization tools allow you to incorporate custom CSS into your store. This feature will allow you to change fonts and text styles, update background images, change colors and more. Note that Custom CSS is an advanced feature which is optional.

  1. Step 1: Enter Custom CSS in the text box. To begin using the Custom CSS feature enter your Custom CSS in the text box area and click the Save Custom CSS button when you are done. This will SAVE your changes but WILL NOT actually apply it to your store. This way you can make multiple Custom CSS edits and upgrades without affecting your draft theme. Note that we have provided a list of many of the common Custom CSS tasks you may want to perform in the text area. You may utilize these or add your own as desired. You can also combine the Custom CSS feature with the Custom Images feature to incorporate custom background or other images in your store.
  2. Step 2: Check the Enable Custom CSS check-box. Once you've entered and saved all of your Custom CSS changes and would like to Preview them on your draft store click the "Enable Custom CSS" check-box to enable them. Using the Preview function you should be able to view the effects of your Custom CSS edits on your draft store and make any necessary tweaks. If you would like to disable your Custom CSS simply uncheck the "Enable Custom CSS" check-box and your Custom CSS will not be applied to your draft theme.
  3. Step 3: Preview, Preview, Preview. Custom CSS can be tricky and is an Advanced feature. So, after adding or editing Custom CSS it is highly recommended that you preview how your store pages will look to your buyers. To preview the actual store pages click on the green Preview button. This will launch your draft store in a Preview window where you can confirm that the CSS updates are displaying as you'd like.
  4. Notes: You may also define CSS classes on many of the store widgets which allow you to customize the look and feel of individual widgets on your store. To define a Custom CSS class on a widget edit the widget properties via the Edit Layout tab. Then, using the same CSS class name on the Custom CSS tab, update the HTML elements you would like to customize for that widget.

With Custom CSS you can really customize your storefront and the sky is the limit. When combined with the functionality of the Custom Images tab you can really customize the look of your store, but as noted previously it can be tricky to get the look you want. As always, if you need more help you can always find it on the Auctiva Commerce Help Site. Also take a look at our community forums to network with other sellers and see how they're creating great stores.

Happy Selling!

Tags

◄ Back to Help

Customer Support

If you have been unable to find the answer you were looking for using our Help documentation, please file a customer support request. We have customer support professionals ready to help you 24 hours a day, Monday - Friday (excluding major holidays.)