> 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/shop-by-color-links.md).
# "Shop by Color" Links
### đź”— Add "Shop by Color" Header
Link any button or text to the color search overlay. The header is the most effective placement, as it’s where shoppers naturally look to begin their search.
**How to set it up:**
* Paste this in the hyperlink field:
```
/?InfiniteColorSearch
```
Hit save. When the App embed is toggled *on*, the links will open the color search overlay.
**Troubleshooting:**
Shopify has a strange quirk requiring you to confirm within the dropdown menu, rather than the checkmark. If you click the checkmark, it will return an error, and the link will *not* save.
### đź”— Add Banner CTA
Add a temporary "Try it out!" banner CTA, linking to the color search.
### đź”— Link to a Preselected Color
Think of this as a shortcut to specific shades you want to promote. This is helpful for the shoppers who want to quickly explore a specific range.
**How it works:**
* Use the color wheel to search one or two colors you want to link to
* Look in the URL for **/?InfiniteColor**... and copy the entire relative URL path. For example, this link searches for the red used in the graphic below:
```
/?InfiniteColorSearch=&colorA=e80036
```
A great way to use this feature is to create subcollections under “Shop by Color” that link directly to preselected colors.
**Bonus!**
Link to specific colors in your email marketing and segment your audience based on color profiles. More on this in our Marketing Activation page.
### Refine the "Shop by Color" Widget
Our "Shop by Color" widget is central to marketing your new feature, which is why 95% of our brands keep it on. The more shoppers see it across their favorite sites, the more familiar the experience becomes.
**Visit the App embed settings to refine the following:**
* Adjust Widget size and margins (desktop)
* Adjust Widget size and margins (mobile)
* Choose Left or Right positioning
* Choose between our default rainbow graphic, hex code graphic, or upload your own design
**Quality check:**
* Make sure the widget does *not* obscure critical buttons, such as "Add to Cart" (don't forget mobile!)
**Best practices for custom design:**
* Remember, the widget must communicate color. Rainbow and saturated widgets attract your most color-focused customers
* *Do not* use a muted colors or match the accent colors on your site. These widgets blend in and fail to attract clicks
**How to remove the widget (not recommended):**
To remove the widget from specific pages, visit our App's "Settings" page and scroll to the "Advanced" section.
If you wish to remove the popular widget entirely, you can hide it within your App embed settings.
**IMPORTANT:**
* Make sure the Infinite Color Search app remains toggled **ON** for your header link to work.
Refine the "Shop by Color" Widget
Our "Shop by Color" widget is central to marketing your new feature, which is why 95% of our brands keep it on. The more shoppers see it across their favorite sites, the more familiar the experience becomes.
