Knowledgebase: Site Design

How do I use the Core Theme Editor?

 

Several of the Core powered themes have access to a new form of theme editor that allows you to make basic color and typography changes to theme elements. As you select the coloring on the editor, the preview will interactively update to illustrate your selection. After you save your changes, they'll be live!

Tip
Currently, the Core Theme Editor is available on a select number of Core themes, but it will eventually be available on all of our free Core themes. Also, unless noted here on this list, premium/purchased themes will not have access to this feature.

For now, these are the themes that include it:

  • Autostyle*
    (*This is a third-party, premium theme)
  • backpacks-core
  • barber-core
  • bikes-core
  • bradsbarber-core
  • brock-core
  • burg-core
  • casify-core
  • cheapest-tickets-hub-core
  • cigarvenue-core
  • coffeelover-core
  • corded-core
  • decorlight-core
  • FancyPizza-core
  • FitnessCoach-core
  • Fortunevineyards-core
  • FrozenCream-core
  • Giggles-core
  • Lexington-core
  • LifeCoaching-core
  • mackenzie-core
  • Mercury-core
  • mode-core
  • modernfurniture-core
  • Molten-core
  • Openmind-core
  • Paintedcolors-core
  • red_dragon-core
  • RoomFurnish*
    (*This is a third-party, premium theme)
  • rune-core
  • simmons_tech-core
  • sisco_valley-core
  • SweetJaneSoaps-core
  • swimschool-core
  • techsave-core
  • veniam-core

Once you've installed your Core theme, proceed with the following steps to access the new Theme Editor.

Using the left hand navigation menu of the Shift4Shop Online Store Manager:

  1. Go to Settings >Design >Themes & Styles
  2. Click on the "Customize Theme" button listed with your installed Core theme.

A new browser tab will open up showing your store's Home Page. Along the left hand side of the window, you will see the Core theme's customization options. These are listed with the following headings:

Important
In order to use the Theme Editor, both your Store URL and Secure URLs must match.

  • Theme Presets
    A drop-down list of pre-designed variations to the theme's color scheme. You can select the default version, one of the pre-built versions or "Custom" to create your own!
  • Header
    This section will allow you to enter (or select form the color picker) a color for the theme's header styles. For example, the header's background color or the color of the text used within the header.
  • Text & Buttons
    This section will allow you to change color for various elements of the site's overall function and navigation. For example, page headings, body text, and button colors.
  • Typography
    This portion of the editor will let you set the typography of the theme including the base font size, and the base font size for the page headings.
  • Products
    This section lets you change coloring for product specific elements such as the "On Sale" text color and review stars coloring.
  • Footer
    This area will let you change coloring found on the theme's footer such as the text color.

Note
While each of the Core Theme Editor themes will have the above sections, not all features (within those sections) will be the available in every themes. This is because some features may not be part of the theme's design. For example, some themes will have the ability to edit the button border color while other themes may not have the option available.


Publishing & Resetting

At the bottom of the editor section you will see these three buttons:

  • Publish
    Clicking this button will make your changes live and visible on the site.
  • Reset Recent Changes
    Use this button to reset and revert any changes you make to the design without publishing. Note that this button will not have any effect if you've published the changes. It is for situatoins where you have made changes in the editor and want to "start over," in a manner of speaking.
  • Reset to default styles
    Clicking this button will remove all of your changes (published or unpublished) and revert your site to its default color scheme.

As mentioned, only a few Core Themes currently have this editor, but more will follow soon!


Help Desk Software by Kayako fusion