Loox

Loox integration for Shogun Frontend.

Loox is a photo-driven reviews & referrals app that empowers over 100,000 Shopify brands to boost conversions and loyalty through their happy customer content.

Loox website →

Installation

yarn add @frontend-sdk/loox

npm install @frontend-sdk/loox

Initial setup

Follow Loox's instructions to allow-list the domain of your site (e.g. https://mystore.com). This will allow it to display your Loox widgets.

You can find the domain allowed-list in your Loox admin portal within Settings → Display reviews → External pages.

Limitations

Loox requires Shopify to be used as the ecommerce platform.

Show product reviews

Usage

• Get your storePlatformDomain (e.g. store.myshopify.com) from the frontend-config package.
• Call useLoox(storePlatformDomain).
• Add the <LooxProductReviews> component to your page, and pass it a productId.

Example

import { useLoox, LooxProductReviews } from '@frontend-sdk/loox'
import getConfig from '@frontend-config'

export const ProductReviewPage = ({ productId }) => {
  const { publicRuntimeConfig } = getConfig()
  const { storePlatformDomain } = publicRuntimeConfig

  useLoox(storePlatformDomain)

  return <LooxProductReviews productId={productId} />
}

Show product review carousel

Usage

• Get your storePlatformDomain (e.g. store.myshopify.com) from the frontend-config package.
• Call useLoox(storePlatformDomain).
• Add the <LooxProductReviewCarousel> component to your page, and pass it a productId.

Example

import { useLoox, LooxProductReviewCarousel } from '@frontend-sdk/loox'
import getConfig from '@frontend-config'

export const ProductReviewCarouselPage = ({ productId }) => {
  const { publicRuntimeConfig } = getConfig()
  const { storePlatformDomain } = publicRuntimeConfig

  useLoox(storePlatformDomain)

  return <LooxProductReviewCarousel productId={productId} />
}

Show product star rating

Usage

• Get your storePlatformDomain (e.g. store.myshopify.com) from the frontend-config package.
• Call useLoox(storePlatformDomain).
• Add the <LooxProductStarRating> component to your page, and pass it a productId.

Example

import { useLoox, LooxProductStarRating } from '@frontend-sdk/loox'
import getConfig from '@frontend-config'

export const ProductStarRatingPage = ({ productId }) => {
  const { publicRuntimeConfig } = getConfig()
  const { storePlatformDomain } = publicRuntimeConfig

  useLoox(storePlatformDomain)

  return <LooxProductStarRating productId={productId} />
}