> 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="https://2126935042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxmItwS2wSAk5Kd5hOust%2Fuploads%2FxRLX2iO0ZAq0XfqmAVcG%2FWidget%20color%20options%204.jpeg?alt=media&amp;token=0b0f9983-0e47-420e-b309-10f5be82f35a" alt=""><figcaption></figcaption></figure>

🥇 Best practices:&#x20;

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

If you don't want the floating widget, hide it using your theme editor. Ensure the embed app remains toggled ON for button links to work:

<figure><img src="https://2126935042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxmItwS2wSAk5Kd5hOust%2Fuploads%2F2Wqg8HMaP0MndiQgcBtF%2FTheme%20editor%20Show%20widget.jpeg?alt=media&amp;token=b02d0b1a-0ab8-4ddf-87c0-eda6159fe5fb" alt=""><figcaption></figcaption></figure>

### 🔗 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="https://2126935042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxmItwS2wSAk5Kd5hOust%2Fuploads%2FVmGG7kLo3OGcIepAMwHa%2FHeader%20Menu.jpg?alt=media&amp;token=4ecfa052-b24b-4b8e-bd2a-4d7fc3f5a8d1" 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="https://2126935042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxmItwS2wSAk5Kd5hOust%2Fuploads%2FaVpG2FCiQy9KaYxSYT9o%2FShopify%20quirk-compressed.jpg?alt=media&amp;token=90195cae-fc18-4b90-b823-0e043ee14f8b" 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="https://2126935042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxmItwS2wSAk5Kd5hOust%2Fuploads%2FCSdJKW7xbKUth4RmbVA5%2FShop%20by%20Color%20Header%20link%20Gitbooks.jpg?alt=media&amp;token=e6d05dfd-7f29-4d29-b175-8a12e51d68c1" alt=""><figcaption></figcaption></figure>

### 🔗 Link to a specific color search

Turn any button or text into a trigger for searching a color.&#x20;

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

1. Use the color wheel to search the color you want to link to.
2. Look in the URL for /?InfiniteColor... and copy the entire relative URL path. For example, this link searches for light blue:

```
/?InfiniteColorSearch=&colorA=a4d4ff
```

<figure><img src="https://2126935042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxmItwS2wSAk5Kd5hOust%2Fuploads%2FWGrMprtKkGcR8Zv87XXt%2FScreenshot%202026-08-07%20at%204.58.57%E2%80%AFPM-compressed.jpg?alt=media&amp;token=703ebc5c-62ca-4aea-a5ba-86a254c91e3b" alt=""><figcaption></figcaption></figure>