Storefront Customizer

Storefront’s appearance can be adjusted with a few clicks using the WordPress Customizer.

Setup and Configuration

Settings for Storefront are in the WordPress Customizer, which can be accessed from two locations:

• On the frontend, in the Admin bar, go to: Customize

• On the backend Dashboard, go to: Appearance > Customize

The Customizer displays:

Storefront Settings ↑ Back to top

Below is a list of Storefront settings that can be changed.

Background ↑ Back to top

• Background image – Allows you to set a background image, including repeat, position, and attachment.
• Background color – Allows you to change the site background color.

Header ↑ Back to top

• Header background image – See Header Image section below to learn more.
• Background color – Controls the header background color.
• Text color – Controls the color of text in the header. Also affects the secondary menu item color.
• Link color – Controls the color of links in the main menu.

Header Image ↑ Back to top

Allows you to upload an image that appears as the background image applied to .site-header.

For the best display results with background images, use an image that does not include any text in the image itself. A highly detailed image may also make the text difficult to read.

Test a few images and see which works best for your site, and remember to verify how it displays on handheld devices.

Footer ↑ Back to top

• Background color – Controls the footer background color.
• Heading color – Controls the color of headings (h1, h2, h3, h4, h5, h6) in the footer.
• Text color – Controls the color of text in the footer.
• Link color – Controls the color of links in the footer.

Typography ↑ Back to top

• Heading color – Controls the color of headings (h1, h2, h3, h4, h5, h6).
• Text color – Controls the general text color.
• Link / accent color – Controls the color of links and certain accent elements (such as star ratings).
• Hero heading color – Controls the color of the homepage Hero section heading.
• Hero text color – Controls the color of the homepage Hero section text.

Buttons ↑ Back to top

• Background color – Controls the background color of buttons
• Text color – Controls the color of the button text
• Alternate button background color – Controls the background color of the .alt button class.
• Alternate button text color – Controls the text color of the .alt button class.

Layout ↑ Back to top

• Sidebar position – Determines the position of the sidebar relative to the content – on the right, or the left.

Product Page ↑ Back to top

• Sticky Add-To-Cart – Controls the display of the sticky product information bar at the top of the browser window.
• Product Pagination – Controls the display of the next and previous links on product pages.