Concessions

Concessions are dedicated sections or mini-stores within the main store that may have their own branding, layout, and content. This feature allows for creating specialized shopping experiences within a single e-commerce platform.

When the CONCESSIONS feature is enabled, customers can navigate to specific concession areas that have their own unique:

• Custom header and footer
• Dedicated homepage
• Distinct styling
• Filtered product catalog

How Concessions Work

When a customer visits a page or product that’s part of a concession (queryable with the Page.concession field), they are considered to be “in” that concession until they navigate to a different page or product that’s not part of the concession. While in a concession:

• The site should display the concession’s custom header and footer (from Concession.header and Concession.footer)
• The site should be styled according to the concession’s branding (styling information is not available in the Horizon API)
• The homepage link should direct to the concession’s homepage (from Concession.homepage)
• Search queries should include the concession’s code to filter results to only show products within that concession

Retrieving Concession Information

To retrieve information about a specific concession, use the concession query with the concession code:

query GetConcession {
  concession(code: "beauty-brand-x") {
    concessionCode
    homepage {
      id
      title
      url
    }
    header {
      # Header configuration
      logo {
        url
        altText
      }
      navigation {
        # Navigation items
      }
    }
    footer {
      # Footer configuration
      links {
        # Footer links
      }
      socialLinks {
        # Social media links
      }
    }
  }
}

Determining if a Page is Part of a Concession

When loading a page, you can check if it belongs to a concession by using the Page.concession field:

query CheckPageConcession {
  page(url: "/beauty-brand-x/skincare") {
    id
    title
    url
    concession {
      concessionCode
      homepage {
        url
      }
    }
  }
}

If the page is part of a concession, the concession field will contain the concession information. If not, it will be null.

Searching Within a Concession

When a customer is browsing within a concession, search queries should include the concession code to filter results:

query SearchWithinConcession {
  search(
    query: "moisturizer"
    concessionCode: "beauty-brand-x"
    settings: { currency: GBP, shippingDestination: GB }
  ) {
    products {
      items {
        sku
        title
        images {
          thumbnail
        }
        defaultVariant(options: { currency: GBP, shippingDestination: GB }) {
          listPrice {
            currency
            amount
            displayValue
          }
        }
      }
      total
    }
  }
}

Implementation Best Practices

When implementing concessions on your site, consider the following best practices:

1. Clear Visual Distinction: Ensure that concession areas have a distinct visual style to help customers understand they’re in a specialized section.

2. Consistent Navigation: While concessions have their own header and footer, maintain consistent navigation patterns to avoid confusing users.

3. Breadcrumb Navigation: Include breadcrumbs that show the concession hierarchy to help users understand where they are within the site structure.

4. Concession Exit Points: Provide clear ways for users to exit the concession and return to the main store.

5. Search Context: Make it clear to users when search results are being filtered to a specific concession.

6. Mobile Responsiveness: Ensure concession-specific layouts and styling work well on mobile devices.

Feature Availability

The concessions feature is only available when the CONCESSIONS feature flag is enabled. All concession-related queries and fields are conditionally available based on this flag.