Selecting a design theme that best showcases your products is a big decision. After that, you’ll want to work on applying your business’s brand. Although this can feel daunting, the implementation is easy and -- you can always make adjustments down the road.
To get started, you can find everything you need to make a beautiful storefront under “Store Design.” If you don’t see “Store Design” in your navigation, it is likely because you’re currently experiencing our Blueprint theme platform. Although our Blueprint has it’s perks, we recommend opting into our new Stencil theme platform to check out our latest and greatest themes and customization capabilities. To do this go to: Settings, and then Design. On the top of this page you should see a Banner promoting the new Stencil theme platform. Click “Explore New Themes” to get early access to the Stencil theme marketplace.
Once your new marketplace loads you have full access to all the beautiful new Stencil themes. Feel free to browse and purchase the theme that works best for your store. Once you apply the theme to your store you’ll see the “Store Design” link in your navigation. But be aware, once you “opt in” to the new Stencil marketplace you can’t revert back to the old themes.
If we click on Store Design we have a few options. To see what theme you’re currently using click on ‘My Themes’. You can see my store is using the “Cornerstone Light” theme. If interested, you can see who created your theme here. You’ll either see that a theme is designed by Bigcommerce or one of our expert design partners.
If you’re interested in adjusting your theme, you can use the ‘Bigcommerce Theme Editor’. Simply click the ‘Customize’ button to open up your theme editor.
To the left you’ll see the ‘Style Customization Panel.’ Since each out of design themes are different, this customization panel will vary depending on the theme you have selected.
To the right, is the ‘Preview Panel’. This will allow for you to spot check your store front so you may review changes made within the style customization pane.
Depending on your specific needs and design theme, another customization opportunity is under Variations in the Customization Panel. Your theme may have different variations or “styles” to choose from. If we click on the bold style of the “Cornerstone” theme. You’ll see the ‘Preview Panel’ to the right has changed. You’ll always know which variation your theme is currently on by looking for this small check mark in the thumbnail.
If I adjust anything in my customization panel these changes do NOT go Live on my website until I click ‘Apply Theme’. This button will publish my current edits to my storefront. If you’re in the middle of customizing your store and you have to stop for any reason, just click the ‘Save Changes’ button, to save your work until you come back to your Theme Editor.
You can always reset your current edits and get back to your default theme design by clicking ‘Reset Theme Variation’ within the Style Customization Panel.
But let’s make a few edits to our theme. Below Variations you’ll see more controls to different areas of your site. For example, you can choose to adjust Button colors, which will adjust all buttons on your site, or perhaps you want to change the text color in your form fields. This can easily be adjusted by opening the Forms panel, and adjusting its color.
A common request is how to change the color of my Header Title or ‘Store name’. You’ll want to expand your Header panel. Now remember, depending on what theme you’re using this panel my may show a different menu or be in a different order.
The very first option “Store Name Text Color” will control your Header Title. If you know the 6 digit hex color code of the color you’d like to use, you can enter it into this field. Remember to use the number sign at the beginning of your hex code.
If you don’t know the hex value you’d like to use, we also offer a color picker so you can discover the color that works best for you and your site. Click on the color swatch to the right of the hex code.
First, you’ll want to choose a color from the color slide. Just hold down your left mouse button on the slider, and slide until you find the right color spectrum. Now move over to the tone selector on the left. Again hold down your left mouse button and drag the cursor around until you find a good shade. As you let go of your mouse button you’ll see the hex color code and the swatch to the right change color.
When you’ve found the perfect Text Color, simply click off the color picker, and you can move on to your next edit!
Another great feature of the theme editor is the responsive views you can test out. I’ll click on the small mobile icon at the bottom fo the page and I am presented with my storefront in mobile view. Move over one icon to the tablet and we see our store in tablet view. Pretty nifty right? We’ve taken great pains to make every theme look good on every device!
Now the Theme Editor is great for style changes to your store, but what if you’re looking for a totally different layout? Bigcommerce has tons of great responsive themes for you to choose from. To see all the great themes Bigcommerce has to offer I’ll head back into my control panel and visit our “Themes Marketplace”.
I’ll head over to the left navigation, and open up ‘Store Design’ again. This time I’ll click on ‘Themes Marketplace’. Within the marketplace you’ll have access to browse both free and paid themes. You can apply any of the free responsive themes as many times as you like, at no cost to you. Simply click into the ‘Free’ themes section, and choose from any of our beautiful themes. For each theme you select you’ll see different variations of that theme. Remember you’ll be able to apply any of these variation in the Theme Editor along with tons of other cool design facets on your store.
OR you might decide to purchase one of our partner themes. To filter out the free themes and just view our Premium Themes, click on the Paid button. You can see the cost to each theme listed below it.
To learn more about a theme simply click its thumbnail and enter the theme page. Here you can get a better picture of the theme, but better yet we give you the ability to take it for a test drive. Simply click “View Demo” and you’ll be brought to a working prototype of this theme. Oh and remember, every theme gives have access to the “Theme Editor” so you can tweak and adjust this theme to fit your store’s unique look.
If this is the theme for you, simply come back to your Themes Marketplace and click the “Buy” button. Once you purchase this theme, it will be applied right to your store and you’ll always have access to it in the future.