Help

Tutorial

Getting Started with the new Auctiva Commerce customization tools

Welcome! The new Auctiva Commerce customization tools are a powerful set of features that allow you to customize your Auctiva Commerce store in new and exciting ways! This quick guide will explain the new customization user interface, explain how the new themes interact with the Legacy Themes, and in general get you on your way to customizing your store!

First off, to access the new customization tools navigate to Store > Theme > Store Designer (beta) in your Auctiva Commerce merchant admin. This will direct you to the new Auctiva Commerce Customization user interface (UI) home page and is the starting point for creating, editing, or publishing a new Auctiva Commerce Store Designer theme. It is important to note that during the initial rollout of the new Auctiva Commerce Store Designer not all Auctiva Commerce themes will be available. Therefore we have maintained all of the Legacy Themes and associated functionality. Over time we will convert more and more of the Auctiva Commerce Legacy Themes to the new customization UI so that you can use them on your store. You can switch back and forth between the Auctiva Commerce Legacy Themes and the new Auctiva Commerce Store Designer themes as desired. To get started on a new Auctiva Commerce Store Designer theme follow the basic instructions and steps outlined below. Other Auctiva Commerce Help articles will go into greater detail for each step.

  1. Step 1: Create a draft theme. When you first access the Store Designer home page you'll see that you have three Draft Theme slots and one Current Theme slot. This allows you to have multiple versions and looks for your store which you can enable as desired. For example, you could have a Draft Theme that is being prepared for a holiday sale which you can tweak and Preview in Draft mode without impacting your live storefront. Once you have it setup to your liking you can then Publish it to make it Live. To begin creating a Draft Theme click on one of the Edit Draft buttons in one of the Draft Themes slots. This will load a Draft Theme and then direct you to the Select Style tab.
  2. Step 2: Select your draft theme base Style. From the Select Style page you can view the available base styles for your theme and choose the default look that you desire. We have provided some simple flitering tools to allow you to quickly narrow down your choices or you can view all of the available options. You can also name your draft theme here so that it is easy to remember later on - for example, XMAS Promo. To name your draft theme click in the Theme Name box and enter your desired name. There are two ways to select a base style for your draft theme - you can Preview the style which opens a larger view with a Select this Style link, or you can click on the Apply Color dropdown to view the available color schemes for that style, and then click on the base color you want to use. No worries if you make a mistake as it is very easy to change to another style of base color scheme. Changes are saved automatically as you make updates.
  3. Step 3: Edit Layout. From the Edit Layout tab you can customize the Layout and Content for many of the pages on your draft theme. Default layouts can be changed by removing or adding Sidebar 1 and/or Sidebar 2 from a page, while content on the page is adjusted through the use of Widgets. To change the layout and content for a page select the page you want to edit (for example the Home Page) from the dropdown. The available Widgets for that page and the default layout will load. The widgets can be dragged from the left rail onto certain areas of the page. The Widgets can also be dragged from one area to another as desired. You can also edit the Properties of most Widgets by clicking on the wrench icon. IMPORTANT NOTE: Widget properties are global - if you change the properties of a Widget all of the pages that use that Widget will be affected. There is one exception, however, and that is the HTML widget. This widget is unique to each instance on every page. You can remove Widgets from a page by clicking on the 'X' icon in the upper right corner of the Widget you would like to remove. It is highly recommended that your Preview all of your store's pages after any edits to Widgets or Layouts to ensure that your changes are compatible with all of your store pages and are performing as expected. Finally, note that you can create unique versions of the Header and Footer per page by clicking on the pushpin icon in the Header and/or Footer. Using this functionality you could, for example, create a Header specific to your Checkout pages which does not contain the Search or Navigation widgets.
  4. Step 4: Advanced Feature - Custom Images. From the Custom Images tab you can upload custom images which you can use in your store. When combined with Custom CSS you can use this functionality to change the background image for your store, add button images and more. Images uploaded here are not resized therefore it is very important that you do not use this interface to upload product images. Also note that the maximum size you can upload is 1MB per image. To upload a Custom Image click on the Upload button - this will launch the Auctiva Image Uploader which you can then use to upload your image(s).
  5. Step 5: Advanced Feature - Custom CSS. From the Custom CSS tab you can apply custom CSS to your store. You can use this functionality to update Widget fonts, change background images, change link styles and much more. We have provided a few of the common CSS tasks in the panel in the text box to get you started. To utilize the Custom CSS feature make the desired CSS changes and then click on Save Custom CSS. This will save your Custom CSS changes but WILL NOT apply them. To apply your Cistom CSS click on the Enable Custom CSS checkbox. This will then enable the Custom CSS on your store which you can then Preview by clicking on the Preview button.
  6. Step 6: Preview, Preview, Preview. The new Auctiva Commerce Store Designer is a powerful set of tools which can be used to greatly enhance the look and feel of your Auctiva Commerce store. However, as the old saying goes "with great power comes great responsibility" - therefore it is imperative that you thoroughly Preview any customization updates you make to your site before making them live. Thankfully, if you make a mistake it is easy to revert to your Legacy Theme via the dropdown on the My Themes page.
  7. Step 7: Pubish!!! Once you've got your store how you like it and have thoroughly Previewed the site you can publish it to make it live. To publish your draft theme click on the Publish button for the draft theme you want to make live on the My Themes page. This will then Apply the draft theme to your live store.

Customizing your store can be a daunting task. There's a lot of ground to cover and depending on what kind of edits you desire you may have a lot of customizing to do. But, don't worry, there are many more tutorials on the Help Section that you can use to make the process much easier. 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.)