> 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://hoppn.gitbook.io/hoppn/shopify/integrate-buttons-and-text-links.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.