Guides | Appmaker Platform Developer Docs

📄️ Installation of appmakerWebSdk

The Appmaker Web SDK is a JavaScript library that allows you to interact with the Appmaker webview.

📄️ Appmaker Web SDK Methods and Usage

isAppmakerWebview()

📄️ Add Appmaker Web SDK to an Existing Page

This guide will help you add the Appmaker Web SDK to an existing page in your website.

📄️ Firebase Analytics Native Events

| Event Name | Description | Parameters |

📄️ Product bundle page

Introduction

📄️ Hide Header and Footer using Appmaker Web SDK

This guide will help you hide the header and footer of your website when the user is inside the Appmaker WebView. You can also use the Appmaker Web SDK to do custom actions. For example, you can use the Appmaker Web SDK to open the cart page, open the product page, and get the platform.

📄️ Open custom auth page

This guide will help you open a webview with current user details.

📄️ Add custom blocks in product list Page

This guide will help you add custom blocks in product list view. We can render custom blocks inside listview of products.

📄️ Return a custom response for Shopify Collection Filters

This guide will help you return a custom response for Shopify Collection Filters.

📄️ Add a custom variation block to Product Detail Page

Introduction

📄️ How to add Metafields to product

Introduction

📄️ How to see analytics events in Firebase Debug View

Firebase Debug View is a tool that allows you to see the events that are being sent to Firebase Analytics. It is a great tool to use when you are trying to debug your analytics implementation.

📄️ How to add free gift products to cart

Introduction

📄️ How to add metafields in cartLineItem

Introduction

📄️ How to use runDataSource function to run a gqlQuery function

📄️ How to listen to cart changes and modify cart

Introduction

📄️ RTL Styling Best Practices

RTL (Right-to-Left) is a text direction that is used in languages such as Arabic, Hebrew, and Persian. In RTL languages, the text is written from right to left. When designing an app for RTL languages, it is important to consider the following best practices:

📄️ How to customize your app's splashscreen

Overview

📄️ How to add custom Toolbar Icons

📄️ How to get settings/config from dashboard in extension

Let's split this into two parts.

📄️ How to use the usePageState hook in a React Native component

This example demonstrates how to use the usePageState hook from the @appmaker-xyz/core library to manage the state of a modal in a React Native application.

📄️ How to remove Header/ToolBar from a page

📄️ How to edit custom events in the CleverTap

📄️ How to edit custom events in the Firebase

Introduction

📄️ CleverTap Analytics Events

|Event name |Sample event data |Description |

📄️ How to load a custom inapp-page inside Navigation drawer

📄️ How to show Recent search

How to show Recent search

📄️ How to create a google login button

This is a simple example of how to create a google login button in your app.

📄️ How to edit width of navigation drawer

📄️ How to create a apple login button

This is a simple example of how to create a apple login button in your app.

📄️ Judgeme Implementation

- Enable Judgeme extension in appmaker dashboard

📄️ How to inject a Sticky Footer block to all pages

📄️ Judgeme Implementation Native

prerequisites

📄️ How to track page

In Appmaker, you can track the page viewed by the user. You can use this to track the user behavior in your app.

📄️ Google Login for Android/iOS

Overview

📄️ How to add floating block in sticky footer

This example shows how to add floating block in sticky footer.

📄️ PageVariants

This is used to render pages under certain states like empty or error cases.

📄️ How to add video block

Block name : appmaker/video

📄️ How to add metafield to storefront API using Admin API

This example shows how to add metafield to storefront.

📄️ Hide header on scroll

Hide header bar on scroll and show it when scrolling up

📄️ How to create custom actions

📄️ How to implement a custom wishlist page

Steps

📄️ How to use variations in Product Detail page

This guide will help you to understand how to use variations in product detail page.

📄️ Add extra fields to cart line item query

📄️ How to add an analytics event

1. Import the analytics

📄️ How to get currency symbol

Description

📄️ AppsFlyer One Link Configuration

Overview

📄️ How to add custom properties to CleverTap purchase - recordPurchase function

Steps

📄️ Add extra fields to collection query

📄️ Instructions for adding libraries that contain native code

Description

📄️ Add extra fields to order item query

📄️ How to create a custom product scroller in cart page

📄️ Add extra fields to order product line item query

Description

📄️ Add extra fields to product query

Description

📄️ Filter customization

The Advanced filter customization extension allows you to customize the filter in your app. You can refer to the Advanced filter customization guide to learn more about the extension.

📄️ Adding Fragments to collection query

📄️ Update navigation header of a page

📄️ WebEngage Analytics Events

Product Added to Cart

📄️ How to pass params between pages

Description

📄️ AppsFlyer Analytics Events

| Event name | Sample event data | Description |

📄️ How to use SafeArea Context for iOS devices

📄️ Default page ids

List of default page ids

📄️ How to change tab home page using filters

Overview

📄️ How to forward product data from product list to Product Detail page

Pre-requisites

📄️ Change menu and back icons in topbar

Overview

📄️ How to edit custom events in AppsFlyer

This guide will help you to edit custom events in AppsFlyer.

📄️ How to get app version number

You can get the app version number by using the following code:

📄️ How to add Custom Components in root

Use Cases:

📄️ How to show variant color swatches using metafields

This guide will help you to show variant color swatches using metafields.

📄️ How to get build config values

📄️ Handling Notification Events and Payloads in React Native with react-native-firebase

📄️ Shopify backend configuration to show sub-collections on app

In this guide, we will learn how to configure the shopify backend to show sub-collections on the app.

📄️ How to manage cart actions using filters

Overview

📄️ Show sub-collection on collection page

You can show the sub collection on the collection page by using the metafields.

📄️ How to create bundle products

This guide will show you how to set metaobject for bundle products. We are going to create a metaobject called Product Bundle with the following fields:

📄️ Page Background Image

This feature allows you to set a background image for a page. The image will be displayed behind the page content.

📄️ How to add fliter in app

You can add a filter in the app using Search and Discovery app on shopify backend.

📄️ How to get cart object outside the components

You can access the cart through the AppStorageState. This can be particularly helpful when you need to retrieve the cart object within a custom extension or in a filter that is not within the theme's components.

📄️ How to set automatic discount coupon shopify

Introduction

📄️ MoEngage Events

Product Viewed

📄️ How to add a color variant to the PDP

Description

📄️ Add Metafields to collection

Let's say you want to get the collection metafields data in the collection page. You can do this with the help if fieldsHelper.

📄️ Expo environment SetUp

Steps

📄️ How to disable purchase for a product?

To disable purchase for a product, a product tag can be added to the product in the Shopify admin.

📄️ Slot Block

SlotBlock is a component that is used to render the components inserted into a slot. It takes slotId as a prop and renders the components inserted into that slot.