---
title: "How to Customize your Layout in the Storefront Theme"
description: "As we continue our WordPress series on the Storefront theme, we will now show you how to change the layout of your site. There are a couple pre-built layout options you can choose from. This is an..."
url: https://www.inmotionhosting.com/support/edu/wordpress/customize-layout/
date: 2018-03-02
modified: 2021-08-16
author: "InMotion Hosting Contributor"
categories: ["WordPress Tutorials"]
type: post
lang: en
---

# How to Customize your Layout in the Storefront Theme

As we continue our WordPress series on the [Storefront theme](https://www.inmotionhosting.com/support/edu/wordpress/themes/install-storefront-woocommerce-plugin/), we will now show you how to **change the layout** of your site. There are a couple pre-built layout options you can choose from. This is an easy way to change how your site looks and can help you further personalize your [WooCommerce](/support/edu/wordpress/woocommerce/) store.

## Customize Storefront Layout

1. [Log into your WordPress Dashboard](https://www.inmotionhosting.com/support/edu/wordpress/logging-into-wordpress-dashboard/).
2. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png) In your navigation menu click **Appearance** then **Customize**.
3. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_access-layout-options.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_access-layout-options.png) Click the **Layout** link in the navigation menu.
4. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_selecting-layout-option.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_selecting-layout-option.png) You will then see a couple *General Layout* options displayed. Clic the one you want to use. You will see the updated layout displayed immediately. Before After [![before logo change](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_layout-before.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_layout-before.png) [![after logo change](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_layout-after.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_layout-after.png)
5. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_publish-layout.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-layout_publish-layout.png) Click the **Publish** button to save your changes.

Congratulations, now you know how to **change the layout** of your site!