Dedicated to Your Success

Search for answers to your questions by entering keywords below, or look through our knowledge base.

How To: Add A Search By Colour Option To Your Home Page


You may want to offer a search by colour option on your website and we’ll show you how to do this today. This is going to work best for any customer who uses and Art Print Store.


Please Note: This article does require custom coding. If you change this code in any way and it does not work, Technical Support cannot assist in resolving issues with it. Please do not use this guide if you are not somewhat comfortable editing source code.
  1. Log in to your Art Storefronts Site Manager and click on the Add A Page.

  2. Provide the Page with a Name such as Black Art.

  3. Under Type of Page, select Product Gallery.

  4. Click Create.

  5. From this point, you will create a product gallery for every single colour category you intend to list on your website and make sure it is set to use Keywords. If you need more information on how to do this, please review How To: Create A Category That Uses Keywords and its subsequent articles How To: Add Search Keywords To Images In An Art Print Store and How To: Sort Images In A Product Gallery Using Keywords.
    Please Note: Any of the product galleries you create for a specific colour must use the following naming convention in the smart URL:
    black-art, red-art, yellow-art, etc.
    If the Product Gallery smart URLs are not formatted in this way you will be taken to a page saying Oops! The page could not be found.

  6. After you have created your product galleries, copy the following code:
    <table border="0" cellpadding="0" cellspacing="0" style="height:137px;">
    <p style="text-align: left;"><span style="color:#000000;"><strong><span style="font-size:14px;">SHOP BY COLOR</span></strong></span></p>
    <td style="width: 125px; background-color: rgb(0, 0, 0);">
    <p style="text-align: center;"><a href="/black-art"><span style="color:#FFFFFF;"><span style="font-size:14px;">black</span></span></a></p>
    <td style="width: 125px;">
    <p style="text-align: center;"><a href="/white-art"><span style="color:#000000;"><span style="font-size:14px;">white</span></span></a></p>
    <td style="width: 125px; background-color: rgb(204, 204, 204);">
    <p style="text-align: center;"><a href="/gray-art"><span style="color:#000000;"><span style="font-size:14px;">gray</span></span></a></p>
    <td style="width: 125px; background-color: rgb(245, 245, 220);">
    <p style="text-align: center;"><a href="/beige-art"><span style="color:#000000;"><span style="font-size:14px;">beige</span></span></a></p>
    <td style="width: 125px; background-color: rgb(153, 51, 0);">
    <p style="text-align: center;"><a href="/brown-art"><span style="color:#FFFFFF;"><span style="font-size:14px;">brown</span></span></a></p>
    <td style="width: 125px; background-color: rgb(255, 0, 0);">
    <p style="text-align: center;"><a href="/red-art"><span style="color:#FFFFFF;"><span style="font-size:14px;">red</span></span></a></p>
    <td style="width: 125px; background-color: rgb(255, 102, 0);">
    <p style="text-align: center;"><a href="/orange-art"><span style="color:#FFFFFF;"><span style="font-size:14px;">orange</span></span></a></p>
    <td style="width: 125px; background-color: rgb(255, 204, 0);">
    <p style="text-align: center;"><a href="/gold-art"><span style="font-size:14px;">gold</span></a></p>
    <td style="background-color: rgb(255, 255, 0);">
    <p style="text-align: center;"><a href="/yellow-art"><span style="font-size:14px;">yellow</span></a></p>
    <td style="background-color: rgb(0, 204, 0);">
    <p style="text-align: center;"><a href="/green-art"><span style="color:#FFFFFF;"><span style="font-size:14px;">green</span></span></a></p>
    <td style="background-color: rgb(102, 204, 255);">
    <p style="text-align: center;"><a href="/aqua-art"><span style="font-size:14px;">aqua</span></a></p>
    <td style="background-color: rgb(51, 102, 255);">
    <p style="text-align: center;"><a href="/blue-art"><span style="color:#FFFFFF;"><span style="font-size:14px;">blue</span></span></a></p>
    <td style="background-color: rgb(153, 51, 255);">
    <p style="text-align: center;"><a href="/purple-art"><span style="color:#FFFFFF;"><span style="font-size:14px;">purple</span></span></a></p>
    <td style="background-color: rgb(255, 153, 255);">
    <p style="text-align: center;"><a href="/pink-art"><span style="color:#000000;"><span style="font-size:14px;">pink</span></span></a></p>
    <td style="background-color: rgb(255, 255, 255);">&nbsp;</td>
    <td style="background-color: rgb(255, 255, 255);">&nbsp;</td>
  1. Next, go to your Art Storefronts Site Manager and click on your Home Page.

  2. Scroll down the page until you find the box labeled Ending Content and click on the button labeled Source.

  3. Paste the Code.

  4. Click on the Source button again.

  5. Click Save and you will now can shop by colour.

Was this article helpful? Please let us know how we can improve it here