Open Collection

Description

The openCollection action navigates the user directly to a specific Shopify Collection Page (PLP) within the app. It allows you to display products from a targeted collection (such as "New Arrivals" or "Summer Sale") programmatically from any part of your app.

Function Signature

Superfans.actions.openCollection({
		collectionHandle: "men"  //Handle of the Collection
})

// (OR)

Superfans.actions.openCollection({
		collectionId: "45785292"   // ID of the Collection
})

Parameter	Type	Required	Description
collectionId	String	Yes (if handle is not passed)	ID of the collection available in Shopify
collectionHandle	String	Yes (if id is not passed)	Handle of the collection available in Shopify

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Collection opened successfully", "collectionHandle": "summer-collection", "productId": "1234" }`
Invalid Params	`{ "status": "error", "errorCode": 400, "errorHandle": "invalid-params", "message": "Invalid params" }`
Collection Not Found	`{ "status": "error", "errorId": 404, "errorHandle": "collection-not-found", "message": "Collection not found", "collectionHandle": "summer-collection" }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

document.getElementById('summerCollection').addEventListener('click', () => {
    Superfans.actions.openCollection({
        collectionId:"324840718521"
    });
    Superfans.actions.resizeBlock();
});

<div class="collection-container">
  <div class="collection-card" id="summerCollection">
    <div class="collection-info">
      <h3>Men Collection</h3>
      <button class="view-collection-btn">View Collection</button>
    </div>
  </div>
</div>

.collection-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f9f9f9;
}

.collection-card {
  background-image: url('https://i.postimg.cc/bwMz1gWj/young-handsome-businessman-model-man-casual-cloth-sunglasses-street.jpg'); /* Replace with actual image URL */
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: transform 0.2s;
  color: #fff;
}

.collection-card:hover {
  transform: scale(1.05);
}

.collection-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.view-collection-btn {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.view-collection-btn:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

Best Practices

Use handles for cleaner configuration: Handles are easier to maintain and environment-safe compared to numeric IDs.
Integrate with banners or carousels: Perfect for linking marketing banners to collection pages.
Combine with getProducts: Fetch and preview products from a collection before navigating to it.
Gracefully handle missing data: Wrap the call in .catch() or use fallback messages when the collection doesn’t exist.

Caveats

Collection must exist: The target collection must be published and accessible in Shopify.
App-only navigation: Works within the Superfans mobile app, not in web previews.
No automatic product listener: You’ll need to handle subsequent product interactions (e.g., variantChange) after navigation.
Deep link limitations: This action is for internal app navigation — it won’t open Shopify web URLs externally.