How do I add the shop to my website?

Adding the shop code to your website

After you sign up for Contractor Commerce you should have received an email that will contain all the instructions needed to add the shop to your website based on your specific website host. If you do not manage your own website, we recommend forwarding that email or these instructions over to your web contact.

The code must be installed in the <head> of your website and not just the shop page. It needs to load on every page for some of our features to work.


Where can I find the code?

The Contractor Commerce Shop plugin code can be accessed anytime after you sign up by visiting the Contractor Commerce Dashboard and navigating to Settings > Shop/Store > Plugin/Code

You can click on the different tabs to provide different codes depending on your website builder:


How do I install the code on my website?

  1. Add a new page called "SHOP" at "<YOURWEBSITE.COM>/shop/"
  2. Make sure the new page is a page template with no left or right-side columns. Our plugin needs a container at least 1024px wide to fully expand in desktop mode.
  3. Make sure there is no top banner or excess padding on the page below the header - We need the shopping content to be as close to the top nav as possible like in this example: https://demoshop.contractorcommerce.com/shop/#/products
  4. There are two code snippets to install. One goes into the <head> of the website, and the other goes into the <body> of the Shop page where you want the storefront to appear.
    1. code snippets found in the dashboard by following instructions above
  5. We also want to make it easy for users to find their way to the shop and the HVAC Journey so they can get system quotes. We need very clear buttons to help direct users to those tools. Please add a button to the hero section/mainstage that says "Instant Estimate" and have it point to this URL (<YOURWEBSITE.COM>/shop/#/journey/h_v_a_c_system_quote).
  6. Add a similar button to exist for the filter store that says "Buy filters" and points here (<YOURWEBSITE.COM>/shop/#/products).

 
If your website uses an optimization plugin like Nitro Pack or Rocket Lazy Load, these have been known to cause issues with the storefront. Please consider whitelisting the scripts or excluding both the www and non-www versions of the new Shop page, or the storefront may not work as expected.

 
Our plugin works with all websites builders except the following:
  • Wix
  • Google Sites
  • GoDaddy

If you are using one of these website builders please contact your Account Manager


Additional Website guidance:

  1. Great CTA Examples
  2. How should I structure my CTAs
  3. Success Playbook - Marketing Section