Getting started with Commerce7 templates
Nice one! You’re ready to get started with our free Commerce7 templates, and this page will walk you through the steps to get started. Bookmark this page so you can come back to it for future reference!
Step 1: Hosting
We recommend using a stable, high speed host for your WordPress website. Your options vary, but one that we find easy to use and affordable is Cloudways. If you do not have your own hosting account set up, the video above will walk you through getting started with Cloudways. In 10 minutes you will have you own VPS server up and running and ready to launch your new site. We’ve also added a coupon code in the video to get you 3 months of free hosting (the coupon code is XPROS, for the impatient). We also recommend all websites use Cloudflare for their DNS management.
Looking for a web hosting partner, faster servers, better support, and a rock solid foundation for your site? 5forests offers wineries enterprise-level web hosting as part of our website care plans. Contact us today to learn more and sign up.
Step 2: A Blank WordPress Installation
The easiest way to use these templates is to start with a blank installation. If you followed the video above, you’re already there, move on to the next step. A blank installation simply means no other plugins or themes, no pages, no posts, nothing. If you have an existing WordPress website and you’re wanting to migrate to our free templates, we still recommend starting from scratch. Either follow the video above, or ask your host for help creating a new site. If your existing site was created with Gutenberg, and you want to try to import our templates over top of your existing site, we can’t guarantee it will be error-proof.
Step 3: Install the Themes
First, download your desired theme. By downloading these themes you agree to the terms and conditions.
In your blank WordPress installation admin area, head over to Appearance > Themes, and click Add New. Type the word Kadence, and install (but do not activate) the Kadence theme.
While still in the themes section, click Add New again, and then click Upload Theme. Select the zip file for your free 5forests template, install it, and this time active it as well.
Once activated, the next screen will have a notice to install Kadence Starter Templates. Go ahead and do that now. On the next screen, select 5forests as your preferred builder. And following that, click the preview of the template your downloaded, and press install.
When that is completed, head over to Settings > Permalinks, and make sure Post Name is the selected option. Select it and press save.
In the left admin menu bar, click on Commerce7, and enter your Tenant ID in the plugin settings. Set the option Display Cart Box to no, and choose your front end widgets version. For most wineries reading this, you should choose V2. Press save when done.
Step 4: Customize the Theme
Your newly imported template needs a personal touch. Let’s customize the colors and logo for your brand first. In the WordPress admin backend, head over to Appearance > Customize.
Click Site Identity, and upload your favicon. This should be a square image of your logo. Then click Site Title and Logo Control. Press the Change Logo button and upload your brand’s logo, then adjust the Logo Max Width setting to accommodate your specific design. Ensure your band name is entered in the Site Title box below.
Using the navigation arrow in the top left of the customizer, go back to the beginning screen and then go into General > Colors. In the first Global Palette section, you will see a series of color circles. Clicking these will open a modal to change or adjust the selected color. Above these circles you will see 3 preloaded palettes for you to choose from, feel free to click each one to see how they change and how selecting new colors in the palette circles changes how your site looks. When it comes to selecting the colors for your brand, you should only have to adjust the first 3 circles. The first circle is your primary call to action color, often (but not always) the same as your primary brand color. The second circle is a darker version of color 1, and the third circle is a lighter version of color 1. Adjust these as needed to get the look and feel on the page to match your brand.
Once done, hit the blue Publish button to save your changes. The WordPress Customizer has numerous controls to tweak the look and feel of your site. Familiarity with it will help you change these templates to be 100% custom for your website. We recommend backing up your site prior to making any large changes, simply to make it easy to revert. There is no undo function in the customizer.
Step 5: Add Your Own Content
The video above goes over how to edit content in Gutenberg, but we recommend additional learning if you’re looking to really master WordPress. the block editor is a core feature that allows a website owner to have full control over the content of their pages without the need for a 3rd party plugin slowing down the site. For the most part, this is a point-and-click editing experience. Our templates come with premade pages and demo content that can easily be adjusted to your needs. We also have a series of Block Patterns you can use when creating a new page.
Step 6: Product Templates in Commerce7
Our free templates come with specific styles that require a specific template. In the Commerce7 backend, head to Developer > Product templates, and add 3 new templates.
On one of them, select “product” from the drop down, and name it something easy to understand, like “product template. On another, select “collection” from the drop down and name it “collection template”, and on the last, select “allocation” from the drop down and name it “allocation template”.
Here is the content for both your custom “collection” template and your custom “allocation” template in Commerce7:
<h1 class="collection-title has-text-align-center"><c7-collection-title></h1> <p class="collection-description has-text-align-center has-medium-font-size"><c7-collection-content></p> <c7-products> <div class="c7-product"> <c7-if product-image> <div class="c7-product__image"> <c7-product-image size="medium"> </div> </c7-if> <div class="c7-product__details"> <h2 class="c7-product__title c7-title"> <c7-product-title> </h2> <c7-if product-subtitle> <h3 class="c7-product__subtitle c7-subtitle"><c7-product-subtitle></h3> </c7-if> <c7-if product-teaser> <p class="c7-product__teaser"><c7-product-teaser></p> </c7-if> </div> <c7-product-allocation> <c7-product-add-to-cart> </div> </c7-products>
And here is the content for your custom “product” template in Commerce7:
<div class="c7-product-detail"> <div class="c7-product"> <c7-if product-image> <div class="c7-product__image"> <c7-product-image size="large"> </div> </c7-if> <div class="c7-product__details"> <h1 class="c7-product__title"><c7-product-title></h1> <c7-if product-subtitle> <div class="c7-product__subtitle"><c7-product-subtitle></div> </c7-if> <c7-product-allocation> <c7-product-add-to-cart> <div class="c7-product__content"> <c7-product-content> </div> <c7-product-wine> </div> </div> </div>
Once you have the three templates added to Commerce7, ensure they are all set to default and save them.
Step 7: Launch
When you’re done editing the content, and you’ve customized the logo and colors, your next step is to launch. Congratulations on your new Commerce7 website.
It’s important to note we have remote updates enabled in these themes so that we may release updates from tie to time to enhance compatibility between WordPress and Commerce7. We recommend not altering the child theme files, since updates will overwrite your changes.
As per the terms agreed to prior to downloading, “No service is provided as a part of this offer, including but not limited to: installation, customization, or support therein”. These templates are meant to be completely DIY. While 5forests may be available for commercial engagements, no free support can be offered for these products.
I’m already using your templates on Commerce7 V1, how can I upgrade to Commerce7 V2?
If you’re upgrading the Commerce7 front end from V1 to v2, you will need to follow some steps:
1. First, download the new 5forests template above. All downloads are now V2 only.
2. On your existing Kadence website, go to Appearance > Customize, and in the Import/Export section, export your customization settings.
3. Upload the new ZIP file from step #1 under Appearance > Themes. Activate the new V2 theme inside WordPress (do not run the child theme importer again if prompted).
4. Since you are activating a new theme, you may have to recreate your menus, widgets, and customizer settings from scratch, a limitation of WordPress itself. Be sure to backup your site first in case you need to restore a working version. Your customizer settings can be restored from the export above. Go to Appearance > Customize, then import the file under Import/Export.
5. In the Commerce7 for WordPress plugin, change the version selector to V2, and make sure the floating cart box option is still disabled.
6. In your theme header editor, replace the
<div id="c7-login"> tag with
<div id="c7-account"> if applicable.
7. Load the new product and collection templates below for V2, and set to default inside Commerce7.
8. Check the rest of your site for broken C7 widgets, many changes come with V2 directly from Commerce7, including some widgets no longer being supported.
9. Clear all your caches to ensure the new files load properly.
How can I customize these themes?
Steps 4 and 5 above go over that in more detail, but some wineries need to add custom CSS and PHP to their sites. For CSS, we recommend adding your custom styles into the Customizer in WordPress. For custom PHP snippets, we recommend using the Snippets plugin. All edits made in
functions.php will be overwritten when our themes update, so stay away from that if possible.
Where can I learn more about Kadence theme?
We recommend familiarizing yourself with the Kadence theme docs, they can make life easier when it comes to editing and expanding your website in the future: https://www.kadencewp.com/kadence-theme/knowledge-base/
Can 5forests help me setup my Commerce7 template?
The free templates provided by 5forests come as-is and without free support. We are available for paid consultations and design work, however. Contact us today for custom Commerce7 web development.
Table of Contents
Looking for something unique?
5forests specializes in custom Commerce7 websites for wineries. Reach out today to find out how we can help you excel.