How to Use SellKit with Block Editor (Gutenberg)

SellKit, an all-in-one toolkit for WooCommerce stores, makes it easy to enhance engagement, drive sales, and build customer loyalty. With Gutenberg block editor integration, you can use SellKit to build and optimize sales funnels and personalized promotions using the native block editor in WordPress (Gutenberg).

In this guide, we’ll show you how to set up and use SellKit with the Block Editor.

Enabling Block Editor for SellKit

Before you start using SellKit blocks in Gutenberg, make sure you have enabled the Block Editor in SellKit settings. Follow these steps:

1. Login to WordPress Admin Dashboard: Navigate to your WordPress admin panel.
2. Go to SellKit Settings: In the sidebar, locate SellKit and click on Settings.
3. Switch to Block Editor: Look for the Page Builder setting and ensure that the Block Editor (Gutenberg) is selected.
4. Save Changes: Click on Save Settings to apply the new editor settings.

Now you are ready to use SellKit’s Gutenberg blocks!

SellKit Gutenberg Blocks Overview

SellKit provides five powerful blocks that you can integrate seamlessly into your WooCommerce sales funnel:

1. Checkout Block

This block is specifically designed for the Checkout step of the funnel. It allows you to create and customize visually appealing, conversion-optimized checkout experiences.

Usage:

• In WordPress admin, go to SellKit > Funnels and either create or modify an existing funnel.
• If there is no Checkout step in your funnel, click on the + button and choose Checkout.
• Select Start From Scratch and give your step a name.
• Click on the Checkout step in your funnel, then from the upcoming panel, select Edit with Block Editor.
• In the block editor, insert the Checkout block in your page.

• You can find the related settings and options in the sidebar, allowing you to fully customize your checkout experience.
• Easily add, remove, or modify different parts of the checkout form, such as shipping and billing fields. You can also adjust the design of the form, buttons and more, ensuring a seamless and branded checkout process for your customers.

2. Smart Coupon Block

With the Smart Coupon block, you can easily display a coupon field anywhere in your website, offering customers targeted discounts and promotions based on their shopping behavior.

Usage:

• In WordPress admin, go to SellKit > Funnels and either create or modify an existing funnel.
• If there are no Sales Page in your funnel, click on the + button and choose Sales Page (you can also place the Smart Coupon block on any landing, sales or product page outside a funnel).
• Select Start From Scratch and give your step a name.
• Click on the Sales Page step in your funnel, then from the upcoming panel, select Edit with Block Editor.
• In the block editor, insert the the Smart Coupon block.

• This block will automatically adjust based on your pre-defined coupon rules (you can create and define coupon rules from WordPress admin > SellKit > Coupons).
• You can modify the content and customize the appearance using the options in the block settings in the sidebar.

3. Order Cart Details Block

The Order Cart Details block is only available in the Thank You step in your funnel. It displays an overview of the customer’s order, including items purchased, quantities, and total costs.

Usage:

• In WordPress admin, go to SellKit > Funnels and either create or modify an existing funnel.
• If there is no Thank You step in your funnel, click on the + button and choose Thank You.
• Select Start From Scratch and give your step a name.
• Click on the Thank You step in your funnel, then from the upcoming panel, select Edit with Block Editor.
• In the block editor, use the Order Cart Details block on your Thank You pages to provide customers with a clear breakdown of their purchase.

• Using the options in the block settings in the sidebar, you can modify both the content and appearance of the Order Cart Details block.

4. Opt-in Block

Build your email list with ease using the Opt-in block. This block allows you to collect customer email addresses or consent for marketing materials at key points in your sales funnel.

Usage: Use this block on landing pages or checkout pages to encourage users to subscribe to your newsletter or offer special deals in exchange for their contact information:

• In WordPress admin, go to SellKit > Funnels and either create or modify an existing funnel.
• Choose Sales, Thank You or any other pages in your funnel to insert an opt-in block.
• Click on the + button and choose Opt-in Confirmation.
• Select Start From Scratch and give your step a name.
• Click on the Opt-in Confirmation step in your funnel, then from the upcoming panel, select Edit with Block Editor.
• In the block editor, insert the the Opt-in block.

• Using the options in the block settings in the sidebar, you can modify both the content and appearance of the opt-in block.
  • Form Fields:
    • You can add and modify form fields like Email and Name.
    • Each field allows customization of its type, label, default value, placeholder, and whether the field is required.
  • Settings:
    • You can customize the Submit Button Text (e.g., "Subscribe").
    • Integration with multiple CRMs such as ActiveCampaign, ConvertKit, MailChimp, and others can be selected.
  • After Submit Actions:
    • You can configure actions to be performed after submission, such as:
      • Download a File (options include URL or a specific file).
      • Redirect to either the Next Funnel Step or a Custom URL.
  • Feedback Messages:
    • You can create custom success and error messages for form submissions.
    • Example messages include:
      • Success Message: "The form was sent successfully!"
      • Error Message: "Please check the errors."
      • Required Field Message: "Required."

5. Accept-Reject Button Block

This block is ideal for funnel pages where you present customers with specific offers, like upsells or special promotions. It gives them a clear choice to either accept or reject the offer.

Usage: The Accept-Reject Button can only be used on designated funnel pages such as upsell and downsell.

• In WordPress admin, go to SellKit > Funnels and either create or modify an existing funnel.
• If there is no Upsell or Downsell step in your funnel, click on the + button and choose Upsell or Downsell.
• Select Start From Scratch and give your step a name.
• Click on the Upsell or Downsell step in your funnel, then from the upcoming panel, select Edit with Block Editor.
• In the block editor, insert the Accept/Reject Button block in your page.

• Using the options in the block settings in the sidebar, you can modify both the content and appearance of the Accept/Reject Button block.
  • Content:
    • Offer Type: You can choose between two options (Accept Offer, Reject Offer)
    • Title: Customize the title that will be displayed on the button, such as "Offer Action."
  • Button Width:
    • Adjust the button width to one of the percentages (25%, 50%, 75%, 100%)