Help

Tutorial

How to customize the Blank Store Theme

You can use the Blank store theme to make unique storefront styles. This tutorial will show you how to customize the Blank store theme.

What is the Blank store theme?

The Blank store theme is a preset store theme without the thematic artwork that accompanies the other preset store themes. The Blank store theme will allow you to customize colors, text and background images of the storefront using the Customize Theme View. This is the only store theme that will allow you to edit the style of the theme.

What is the Customize Theme View?

The Customize Theme View is a unique view of your storefront that allows you to access customization tools. You can use the Customize Theme View to change the content and style of the Contact Us page and the Home page of your storefront. All store themes can have the Home page and Contact page content changed using this view. Only the Blank store theme has the additional option of changing the style of the store theme.

How to customize the Blank store theme

When you change from one store theme to another, the customizations that you've entered in the previous store theme will be deleted, except for customizations made in the Blank store theme. The Blank store theme is the only theme that saves your customizations.

Step 1. Apply Blank store theme.
  • Go to Store> Theme> Theme Manager. The Themes File Manager page will load.
  • Click on the Blank store theme thumbnail image. The Blank store theme will enlarge.
  • Click on the Apply Theme button. A confirmation message will display in green text on the top of the page.
Step 2. Customize Blank store theme.
  • Go to Store> Theme> Customize Store Theme. The Customize Theme View will load. This will look very similar to the typical store view, except that there will be a horizontal customization bar at the bottom of the storefront. You are now at the Home page of your storefront in the Customize Theme View.
  • Click on the Customize link at the bottom of the page. A pop-up box will appear.
  • Click on the Edit Style link. This will load the Customize Theme tool.
Step 3. Customize colors.

The following fields are located in the Colors box in the Customize Theme tool.

  • Text: Enter a hexadecimal color reference that will define the color value of the text on the storefront. You can also activate the Color Picker by clicking the Text field to activate this field and then move the Color Picker selectors to define the color value. You will see the changes reflected below in storefront.
  • Headings: Enter a hexadecimal color reference that will define the color value of the heading text on the storefront. You can also activate the Color Picker by clicking the Text field to activate this field and then move the Color Picker selectors to define the color value. You will see the changes reflected below in storefront.
  • Links: Enter a hexadecimal color reference that will define the color value of the hyperlinks on the storefront. You can also activate the Color Picker by clicking the Text field to activate this field and then move the Color Picker selectors to define the color value. You will see the changes reflected below in storefront.
  • Main Content: Enter a hexadecimal color reference that will define the color value of main content area of the storefront. You can also activate the Color Picker by clicking the Text field to activate this field and then move the Color Picker selectors to define the color value. You will see the changes reflected below in storefront.
  • Accent: Enter a hexadecimal color reference that will define the color value of the accents areas (i.e., sidebars) of the storefront. You can also activate the Color Picker by clicking the Text field to activate this field and then move the Color Picker selectors to define the color value. You will see the changes reflected below in storefront.
  • Background: Enter a hexadecimal color reference that will define the color value of the background area of the storefront. You can also activate the Color Picker by clicking the Text field to activate this field and then move the Color Picker selectors to define the color value. You will see the changes reflected below in storefront.
Step 4. Customize fonts.

The following fields are located in the Font box in the Customize Theme tool.

  • Text: Choose a font family that will be used for the text on the storefront.
  • Headings: Choose a font family that will be used for the headings text on the storefront.
    • Select the "B" checkbox if you want the headings text to be bolded.
    • Select the "I" checkbox if you what the headings text to be italicized.
Step 5.Customize background image.

The following fields are located in the Background Image box.

  • Select the "Background Image" checkbox to activate the background image fields if you wish to add a background image to your storefront. A background image will be displayed in the background and will reveal around the edges of the main content and sidebars of the storefront if the background image size and repeat options allow the image to show.
  • URL: Insert the URL of the background image. This could be any URL where you have an image that you'd like to display or it can be an image you've uploaded to your Auctiva Commerce store. You can find the URL of an image that has been uploaded to Auctiva Commerce by finding the image in the Manage Images page (Inventory> Manage Images). You can review your changes by viewing the storefront below the Customize Theme tool.
  • Repeat: Choose the appropriate option for how the background image will display in the background. The "no-repeat" option will place only one instance of the background image on the background. The "repeat" option will make multiple instances of the background image so that the entire background is filled with the image. The "repeat-x" option will horizontally repeat the image with multiple instances in a single line. The "repeat-y" option will vertically repeat the image with multiple instances in a single line. You can review your changes by viewing the storefront below the Customize Theme tool.
  • Position: Choose the starting position for the background image.
  • Click on the Save button. The changes are saved and are reflected on your storefront. To go back to Auctiva Commerce, click on the Admin link at the bottom of the page.

This completes the task of customizing the Blank store theme.

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.)