Introduction to Custom Blocks

Overview

Custom Blocks in Superfans let developers create fully customizable app blocks using HTML, CSS, and JavaScript. These blocks are powered by our own SDK, which provides access to app data, actions, and events — allowing your blocks to be dynamic, interactive, and seamlessly integrated with the app experience.

They’re designed to give you full control over styling and logic of the blocks — so you can build desired app experiences.

With Custom Blocks, you can design anything from a dynamic banner to an interactive product section — all directly within the Superfans builder.

Why Custom Blocks Matter

While pre-built blocks cover most use cases, they have design and functional limitations.
Custom Blocks give you the freedom to implement your own code, connect APIs, and render dynamic data exactly how you want.

Here’s what you can achieve:

• Create custom designs that align with your brand.

• Add advanced interactions using JavaScript.

• Integrate external data sources or APIs directly into your app section.

Types of Custom Blocks

Superfans supports two types of Custom Blocks:

1. HTML/CSS/JS Blocks

   • Fully customizable using HTML, CSS, and JavaScript.

   • Ideal for developers who want complete control over layout, styling, and interactivity.

   • Can connect to Superfans SDK or external APIs for dynamic content.

   • Recommended method for most customizations because it is flexible, stable, and fully supported.

There are 3 types of HTML blocks that can be created inside the app namely: 

1. Full Screen Block

2. Embedded Block

3. Popup Block

Full Screen Block -> As the name suggests, these are the custom blocks that can appear as a whole screen on the app. Best example: Launching a Holiday Promotion within the app.

Embedded Block -> Embedded Blocks are sections that are placed directly within the app layout. They are part of a page or screen and scroll naturally with other content. While creating, you can select the page of the app where you want the block to fit in. The pages where you can embed are as follows:

• Homepage / Other Landing Pages

• Product Listing Page

• Product Page

• App’s Cart Page

• Account Page

Popup Block -> Popup Blocks are overlays that appear on top of the current screen based on a trigger. They are not part of the natural scroll flow — they appear temporarily to grab attention.

The popup can be triggered inside the app in 2 ways, say center and bottom of the screen.

2. URL-Based Blocks

   • Built by creating a template in Shopify and appending it in the URL using a template name parameter.

   • Superfans loads the content of the URL as a block inside the app.

   • Limitations:

     • Less flexible for styling or interactions

     • Harder to debug

     • Performance may vary depending on Shopify and network latency

   • Not recommended for most use cases; use only if a pre-built Shopify template must be reused directly.

Recommendation: Use HTML/CSS/JS Custom Blocks whenever possible. URL-based blocks are primarily for legacy or very specific Shopify template use cases.

How It Works:

A Custom Block is a self-contained component that includes:

• HTML for structure

• CSS for styling

• JavaScript for interactivity, data binding, and integration with the SDK

The SDK allows your block to access app data, trigger actions (like navigation or adding items to the cart), and respond to events (like user login or cart updates), making the block fully dynamic and connected to the app.

When added to your app, Superfans renders this code safely within your app environment.

You can:

1. Create a new Custom Block from the Low Code Builder.

2. Add your HTML, CSS, and JS directly in the editor.

3. Use Superfans’ built-in APIs or SDK methods to fetch or manipulate app data.

4. Preview the output in real time.

5. Save and publish it to make it live on your app.

Who Can Use Custom Blocks

Custom Blocks are best suited for:

If you’re comfortable with front-end web development, you’ll find the workflow straightforward and flexible.

Use Cases

Some practical examples of what developers build with Custom Blocks:

• Dynamic product grids fetching live data from Shopify.

• Custom banners or sliders with JS-powered transitions.

• Personalized recommendation sections using API data.

• Interactive elements like countdown timers or user points progress bars.

Each block can be designed to match your app’s UX while keeping code modular and maintainable.

Best Practices

• Keep your code modular and reusable.

• Avoid heavy scripts that may impact app load time.

• Test your block thoroughly on multiple devices.

• Use descriptive naming for classes and functions.

• Use Superfans’ APIs when available instead of making raw network calls.

Following these practices ensures your blocks remain maintainable and scalable.

Next Steps

Now that you know what Custom Blocks are and how they work, move on to:
Building Your First Custom Block→
to learn how to create your first block and add your own HTML, CSS, and JS.