Page title

Webflow

Connect Easytools with Webflow to link products and protect content with Login Wall - including section-level gating.

Last updated

April 7, 2026

In this article, we will look at how to connect Easytools with Webflow in two ways:

Webflow as a landing page — Your products are on Easytools, and Webflow serves as your main landing page. You can link any button or element on Webflow directly to an Easytools product checkout.
Protected content on Webflow — Using Login Wall to control who sees what. You can block access to an entire page, or show and hide specific sections on a page depending on whether the visitor is a paying customer.

Unlike some other platforms, Webflow supports not just full-page protection but also section-level gating - showing different content to paying customers and free visitors on the same page. This is covered in Part 2.

Watch the video tutorial covering all topics:

Part 1: Linking products

When you have products on Easytools and Webflow is your landing page, you can link any button or element on your Webflow site directly to the Easytools checkout for that product.

1. Copy the product link from Easytools

In Easytools, go to Store → Products.
Open the product you want to link to.
Click the Share icon at the top of the product page.
In the Share dialog, click Copy link. Optionally enable Shorten link to get a shorter URL.

2. Add the link to a Webflow button

Open your site in the Webflow Editor.
Click on the button or element you want to link.
In the right panel, open the Settings tab.
Find the Link settings section and paste the copied link into the URL field.
Enable Open in new tab if needed.
Click Publish in the top right corner to make the changes live.

When users click the button, they will be taken directly to the Easycart checkout for that product.

Part 2: Login Wall (protected content)

Secure entire page — Blocks access to the whole page. Non-paying visitors are redirected to the Easytools login/purchase page.
Secure page sections — Shows or hides specific sections on a page depending on the visitor's subscription status. Both paying and non-paying visitors can see the page, but they see different content.

Both modes use a script placed in the Custom code field of the Webflow page settings, and a product in Easytools that acts as the access gate.

3. Secure an entire page

Step 1 - Get the script from Easytools:

In Easytools, go to Store → Products.
Open the product that should grant access to the protected page.
Click the lock icon (Gate content) at the top of the product page.
Click Secure entire page.
Click Copy code.

Step 2 - Add the script to the Webflow page settings:

In the Webflow Editor, open the Pages panel in the left sidebar.
Hover over the page you want to protect and click Edit page settings (the gear icon that appears).
Scroll down to the Custom code section.
Paste the script into the Inside <head> tag field.
Click Save.
Publish your site for the change to take effect.

Non-paying visitors who try to access the page will be immediately redirected to Easytools, where they can log in or purchase access. Paying customers will see the page without any interruption.

4. Secure page sections

Section-level gating lets you show different content to different visitors on the same page — without blocking access to the page itself. You need to do two things: add the script to the page, then mark each section with the appropriate attribute.

Step 1 - Get the script from Easytools:

In Easytools, go to Store → Products.
Open the product that should act as the access gate.
Click the lock icon (Gate content) at the top of the product page.
Click Secure page sections.
Click Copy code.

Step 2 - Add the script to the Webflow page settings:

In the Webflow Editor, open the Pages panel.
Hover over the page and click Edit page settings.
Scroll to Custom code and paste the script into the Inside <head> tag field.
Click Save.

Step 3 - Add attributes to your sections:

For each section on the page, decide whether it should be visible to paying customers, non-paying visitors, or everyone. Then add the appropriate custom attribute in Webflow:

In the Webflow Editor, click on the section you want to gate.
In the right panel, open the Settings tab.
Find the Custom attributes section and add a new attribute:
- For content visible only to paying customers: Name = data-paid, Value = true
- For content visible only to non-paying visitors: Name = data-free, Value = true
Repeat for each section that should be gated.
Publish your site for the changes to take effect.

Only sections explicitly marked with data-paid or data-free are affected by the script. Any section without one of these attributes will be visible to all visitors regardless of their subscription status.

5. Testing the Login Wall

To test your Login Wall setup:

Make sure your Webflow site is published - Login Wall only works on the live site, not in the Webflow Editor preview.
To test the locked-out or free-visitor experience: open the protected page in an Incognito / Private window. For full-page protection you should be redirected; for section gating you should see only the sections marked data-free.
To test access as a paying customer: open the page in a browser where you are logged into Easytools with the product purchased. Full-page protection should grant access; section gating should show sections marked data-paid.