# Front-End Implementation

1. **Confirm Front-end Requirements:** The merchant initiates the process by confirming their front-end requirements.
2. **Select Loyalty Module:** The merchant collaborates with the loyalty platform's onboarding team (Yotpo's or Clearer.io's) to choose appropriate loyalty modules and configure them to match their needs. These modules may have some default styling options.
3. **Custom Front-end Development:** In cases where the default modules have limitations or don't fully meet the requirements, custom front-end development is performed. This involves creating tailored solutions for specific design or functionality needs.

In summary, the process begins with requirement confirmation and proceeds with the use of the loyalty platform's modules, followed by custom front-end development as necessary to address any limitations or unique design requirements.

## Webpages with Reward Touchpoints

Specific sections of the website will feature touchpoints related to rewards. Please keep these pages in mind when creating the mock-up for the user experience of your online loyalty program. These include, but are not limited to, the following:

**For Yotpo merchants - Yotpo embeddable modules**

* Rewards Summary Page
* Account Sign-Up & Sign-In
* Rewards Redemption Landing Page

{% hint style="info" %}
There are two Yotpo modules that allow customers to redeem points and thus turn their points into Apparel21 Gift Vouchers:

* [Yotpo ](https://support.yotpo.com/docs/omnichannel-shopper-managed-loyalty)["Redeem"](https://support.yotpo.com/docs/omnichannel-shopper-managed-loyalty) [In-Store Module](https://support.yotpo.com/docs/omnichannel-shopper-managed-loyalty) can be used out-of-the box
* [Yotpo "Redeem" ](https://support.yotpo.com/docs/redeem-points-on-site-module-interactive)[Online](https://support.yotpo.com/docs/redeem-points-on-site-module-interactive)[ Module](https://support.yotpo.com/docs/redeem-points-on-site-module-interactive) is <mark style="color:red;">not compatible</mark> with this integration and will require front-end customisation. When points are redeemed online, a "custom reward" must be configured
  {% endhint %}

**For Clearer.io merchants - Clearer.io front-end**

Clearer.io's front-end is delivered via their hosted "Launcher" widget, embedded into your storefront pages. The specific embedding pattern (which pages to embed it on, how it's themed) is set up during onboarding. Contact the DotApparel team for the current Clearer.io front-end implementation pattern.

**Implemented with Checkout UI Extension (checkout upgrade is required)**

* Apparel21 Gift Card Redemption at checkout ([more info here](https://docs.dotapparel.com.au/core/settings/gift-cards#redeeming-vouchers))

{% hint style="info" %}
Apparel21 Gift Voucher redemption must be possible at checkout. Either through DotApparel Core or another Apparel21 Connector. Talk to us if you need DotApparel Core installed for your Shopify store: <support@dotapparel.com.au>
{% endhint %}

<figure><img src="/files/zTRH5yMxJ5uEqp9lKqPQ" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dotapparel.com.au/loyalty/front-end-implementation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.