Appearance

EC Store WordPress Installation ​

Follow these steps to install EC Store on your WordPress site.

Install a Script Injection Plugin ​

To add custom scripts to your WordPress site, we recommend using the free WPCode - Insert Headers & Footers.

Add the Script ​

In the lefthand sidebar of your WordPress Dashboard:

  1. Navigate to Code Snippets → Header and Footer.
  2. Paste the following script into the Scripts in Body section:
html
<script src="https://d1vc0si56f5gt.cloudfront.net/ff-plugin.umd.min.js"></script>

WARNING

⚠️ Do not place the script in the Header section. It needs to be in the Body to ensure correct loading.

What does it look like?

Your Almost There

View More Information

By using the Insert Headers and Footers plugin, the script will be added globally — meaning it will load on every page of your site.

If you'd prefer to load the script only on specific pages, feel free to use your own method of script injection. In fact, we encourage it when possible to reduce unnecessary resource loading on pages where the plugin isn’t needed.

Create Your Shop Page ​

  1. From your WordPress dashboard, go to Pages -> Add New
  2. Create a new blank page. Most themes offer a "Full Width" or "Blank Canvas" template - choose one that avoids sidebar clutter, forms or navigation that could interfere with the plugin.
  3. Name the page anything you'd like. Common choices include:
  • Shop
  • Shop Filters
  • Buy Filters
  • Order Air Filters

This page will serve as the storefront where customers interact with EC Store.

Add the Plugin to the Page ​

Once the page is created:

  1. Click to Edit the Page.
  2. Add a Custom HTML Block.
  3. Paste the following code:
html
<ff-plugin></ff-plugin>

TIP

💡 You can add padding or additional styles around the custom element using inline CSS or WordPress block settings, depending on your theme.

Final Step: Deploy Your Changes ​

Once everything is in place, you will see an alert titled Your Almost There!

What does the alert look like?

Your Almost There

Make sure to publish or update the page so that its live and publicly accessible.

WARNING

⚠️ Please ensure the page is Live before selecting the Let Us Know button, as our team will need to be able to access the page.

Once deployed, go ahead and click on the Let Us Know button. Our team will then get your EC Store live as soon as possible!

TIP

🚀 Once installed and deployed, you’re ready to start driving traffic to your shop page and begin selling!

Troubleshooting ​

A very common issue with this installation process is the interference with various popular WordPress caching plugins such as:

These tools can override the script tag, defer JavaScript execution, serve cached HTML versions of your page, or apply optimizations that prevent the plugin from initializing properly.

Symptoms you might see include: ​

  • The plugin does not appear until the page is interacted with (tap or scroll).
  • The plugin displays an error message, and products do not load.
  • The page looks empty or broken when opened via a QR Code or external link, such as from a confirmation email.
  • Styles or interactivity feel 'delayed' or missing.

We strongly recommend excluding your eContractor "Shop" page from all caching and optimization rules coming from your caching plugin.

Please refer to the respective documentation for each plugin to find information on how to do so.

For W3 Total Cache, go to Performance -> Page Cache -> Advanced, then add your Shop page path to Never Cache the Following Pages.

For example, if your Shop page opens at:

txt
https://example.com/filter-store/#/products

you would add this path:

txt
/filter-store/

Do not include #/products. That part belongs to the EC Store plugin after the WordPress page loads. The WordPress page that needs to be excluded from caching is the page path before the #.

If you are using other W3 Total Cache optimization features, exclude the same page from those optimizations as well. This includes JavaScript, CSS, minify, defer, delay, or similar optimization settings.

Still Need Help? ​

Some WordPress themes - especially highly customized or older versions - can behave unpredictably when adding custom HTML or scripts.

If your unsure about any of the steps above, please feel free to contact our support team.

We are happy to assist with the integration or answer any questions not covered in the documentation.