> For the complete documentation index, see [llms.txt](https://hoppn.gitbook.io/hoppn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hoppn.gitbook.io/hoppn/shopify/integrate-buttons-and-text-links.md).

# Integrate buttons & text links

### Widget (optional)

Our customizable widget is a great choice for easy access to the color wheel. Learn more at <https://hoppn.com/widget>

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

🥇 Best practices:&#x20;

* Rainbow widgets attract your most color-focused customers.
* Do NOT use a muted color widget or match the accent color on your site. These widgets blend in and fail to attract clicks.
* Quality check: If you use the widget, ensure it does not obscure critical buttons on mobile, such as "Add to cart."&#x20;

### 🔗 Add a "Shop by Color" header link.&#x20;

Turn any button or text into a trigger for opening the color search overlay.&#x20;

**How it works:**&#x20;

1. Paste this in the hyperlink field:&#x20;

```
/?InfiniteColorSearch
```

When the Embed App is on, clicking the link will open the color search overlay.&#x20;

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

Shopify has a strange quirk requiring you to click here rather than the red checkmark. If you click the red checkmark, it will return an error, and the link will not save.

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

🥇 Best practices:&#x20;

* "Shop by Color" link in your header.
* Add a color-focused banner image with a "try it out" button that links to the color search.&#x20;

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

#### Show widget toggle:

If you prefer, you can hide the "Search color" widget using your theme editor. Ensure the embed app remains toggled ON if you want button links to work:

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