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.
This package runs on Shogun Frontend and is in customer Beta. It might not currently support all ecommerce platforms or cover all use cases. |
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 thefrontend-config
package. - Call
useLoox(storePlatformDomain)
. - Add the
<LooxProductReviews>
component to your page, and pass it aproductId
.
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 thefrontend-config
package. - Call
useLoox(storePlatformDomain)
. - Add the
<LooxProductReviewCarousel>
component to your page, and pass it aproductId
.
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 thefrontend-config
package. - Call
useLoox(storePlatformDomain)
. - Add the
<LooxProductStarRating>
component to your page, and pass it aproductId
.
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} />
}