Watch this 2-minute tutorial or follow the steps below.

Step 1: Add the Shop Page



  • Create a new page: contracostaheating.com/shop

  • Use a full-width page template (no side columns); minimum 1024px wide on desktop

  • Remove any top banner or padding so the shop content sits just below the top navigation


  • Example layout:

    https://demoshop.contractorcommerce.com/shop/#/products




Step 2: Install 2 Code Snippets



Site-wide: Add this code to the <head> of your website so it loads on every page:


<!-- Contractor Commerce Plugin -->
<script async defer src="https://plugin.contractorcommerce.com?key=jCaoR7aXBJ5P7NRPMExUJw5sYi5LSnZH56xVDCPd"></script>


Shop page: Add this code to the <body> where the shop should display:


<!-- Contractor Commerce Shop Div -->
<div id="concom-navigator" navigator-key="InOSuwo8MAveJ77k"></div>


Step 3: Add CTA Buttons to Your Homepage


In the homepage hero section (above the fold), include a prominent, mobile-friendly button:



Button 1: Buy Filters



Link:

contracostaheating.com/shop/#/products





Buy Filters



Note: More than half of your web traffic is likely coming from mobile users, so it’s important to optimize your CTAs with mobile users in mind.



Resources for Success



  • Great CTA Examples

  • Structuring CTAs (watch video here)

  • Success Playbook - Marketing Section



Step 4: Optimize Plugin Settings (if applicable)


If you’re using Nitro Pack, Rocket Lazy Load, or a similar optimization plugin:



  • Exclude both the www and non-www versions of the /shop page

  • Exclude the <script> added to the <head> so it doesn’t get delayed or blocked


Ready to get started? Book an appointment today.