Custom Block SDK
Custom Block SDK
  1. Actions
  2. Navigation and Routing Actions

Open Product

Description

The openProduct action navigates the user directly to a product detail page (PDP) within the app.
It allows you to open any Shopify product programmatically — for example, from a banner, recommendation widget, or upsell section — without using manual routing or deep links.

Function Signature

Superfans.actions.openProduct({
  productId: String,
  variantId: String // optional

})

(OR)

Superfans.actions.openProduct({
  productHandle: String,
  variantId: String // optional

})
ParameterTypeRequiredDescription
productIdStringYes (if handle is not passed)ID of the product available in Shopify
productHandleStringYes (if id is not passed)Handle of the product available in Shopify
variantIdStringNo (optional)Unique ID of the variant available in Shopify.

Structure of Response

StatusResponse
Success{ "status": "success", "message": "Product opened successfully", "productHandle": "summer", "productId": "1234" }
Invalid Params{ "status": "error", "errorCode": 400, "errorHandle": "invalid-params", "message": "Invalid params" }
Product Not Found{ "status": "error", "errorId": 404, "errorHandle": "product-not-found", "message": "Product not found", "productHandle": "summer }
Unexpected Error{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }

Example Usage

// Function to fetch products from a specific collection
function fetchProductsFromCollection(collectionId) {
    Superfans.helpers.getProducts({
        collectionId: collectionId,
        count: 10 // Fetch 10 products
    })
    .then((data) => {
        const products = data.products || data;
        displayProducts(products);
    })
    .catch((err) => {
        console.error("Error fetching products:", err);
    });
}
// Function to display products in a grid
function displayProducts(products) {
    const productGrid = document.getElementById('productGrid');
    productGrid.innerHTML = ''; // Clear existing products
    products.forEach(product => {
        const card = document.createElement('div');
        card.className = 'product-card';
        card.innerHTML = `
            <img src="${product.images[0]}" alt="${product.title}" class="product-image" />
            <div class="product-info">
                <div class="product-name">${product.title}</div>
                <div class="product-price">₹${product.variants[0].price}</div>
            </div>
        `;
        // Function to open Product on clicking the product grid
        card.addEventListener('click', () => {
            Superfans.actions.openProduct({ productHandle: product.handle });
        });
        productGrid.appendChild(card);
    });
}
// Call the function with a specific collection ID
fetchProductsFromCollection("324840718521");
<div id="clc"></div>
<div id="productGrid" class="product-grid"></div>
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.product-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.product-card:hover {
  transform: scale(1.05);
}
.product-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.product-info {
  padding: 8px;
  text-align: center;
}
.product-name {
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0;
}
.product-price {
  font-size: 12px;
  color: #333;
}

Best Practices

  1. Use valid identifiers: Always ensure productId or handle exists in Shopify to prevent navigation errors.
  2. Combine with getProduct: You can preview product data (price, title, image) before calling openProduct.
  3. Use for cross-selling: Integrate in carousels, recommendation sliders, or custom blocks for smoother UX.
  4. Avoid hardcoding IDs: Dynamically fetch or store product handles for better maintainability.
  5. Handle async results: Use .then() or await to log or trigger analytics after navigation.

Caveats

  1. Shopify product dependency: The product must exist and be published; otherwise, navigation will fail silently.
  2. App context required: Works only within the Superfans mobile app environment — not the web SDK.
  3. No callback from PDP: Once the product page opens, no event is fired automatically (use variantChange or cartUpdated listeners for interaction tracking).
  4. Deep links unsupported: This action is for internal navigation, not external URL handling.