Browse by Topic

Store Design

Store Design lets you change different elements of a theme like colors, fonts, logo size, how many products to show per page, and more. It’s a quick and easy way to customize your theme to match your brand, and doesn’t require any coding or design skills.

You can preview how your changes will look on different devices like phones and tablets before you publish them to your live store, save your work to come back to later, and access and enable previous customizations from the History section.

Go to StorefrontMy ThemesCustomize to start using Store Design.

 
 

Using Store Design

When you launch Store Design a preview of your store’s live homepage appears on the right, and the theme’s customizable settings appear on the left. Tools to change the preview type, save changes, undo changes, and publish the theme are along the top.

Store Design screenshot showing settings on the left and storefront preview on the right

The device icons at the top left show you how the page will appear on different devices (desktop, tablet, and phone/mobile). For tablet and phone, click the device a second time to switch its orientation between portrait and landscape.

Device and orientation buttons at the top of Store Design

As you make your changes, use the buttons in the top right to apply them to your store right away or save them for later.

Save, publish and undo button options at the top of Store Design

  • Save — saves your current changes. The changes will load the next time you open this them in Store Design.
  • Publish — publishes the current saved changes to your live storefront. If you are customizing an Inactive Theme, this will make it the Active Theme.
  • Undo Changes — resets your theme customizations back to the most recent saved or published version. Previously saved changes are available under History.
  • Apply Update — appears when you click Customize Update to preview an update to an active theme. Click to apply the update.
  • Use as Active Theme — appears when editing an inactive theme before a store has been launched. Click to make it the active theme and publish your changes.
 
 

Settings

Settings may be different depending on your selected theme, but generally, most themes offer some level of basic customization. Check with your theme’s developer for specific settings and features.

For information on Cornerstone settings (our default theme), see the Cornerstone Theme Manual.

Workspace

Windows for settings can be dragged around and resized to give you a better look at a particular element, and the entire setting section itself can be collapsed to make the preview pane the full page width.

Animation demonstrating instant preview updates and the ability to drag setting windows around.

History

When you save or publish changes, they are saved in the theme’s History. You can access a theme’s original default settings and any previously saved or published versions. Note: This only shows the history of the currently viewed Style. You’ll need to switch to the theme’s other styles to see their save and publish history.

History panel expanded in the Store Design menu shows different saved and published versions of the current theme Style

More Options

  • Go to old Theme Editor — If you need to access our older theme customization tool, you can do so here. See Using the Stencil Theme Editor for more information.
  • Edit Theme Files — This allows you to directly access the files and code used by the theme. Recommended for designers or developers who are familiar with HTML/CSS and Handlebars.
  • Restore original theme styles — reset the theme settings back to their original, default values. This has the same effect as selecting Default Settings in History.
 
 

Preview

The preview area to the right shows your store’s homepage by default. You can see how changes will look on different parts of the store (like the cart, checkout and category pages) by navigating to them just like you would on the actual storefront. To preview the checkout page, you’ll need to add a product to the cart and begin the checkout process.

 
 

FAQ

Why don’t I see a Customize button?

You’ll need to apply any available updates for your theme before making new customizations. Use the Customize Update button to see how a potential update will affect your storefront.

Where is X setting?

Settings are unique to each individual theme and are determined by the theme developer, so a setting in one might not appear in another. You may need to consult with the theme developer or consider editing the theme’s files directly (recommended for advanced users only).

Was this article helpful?