Add a Pop Up Color Chart

New Member
11 0 0

I'm using the minimal theme, on certain product pages I would like to have my color chart pop up when the customer clicks on a link that says View Color Chart. 

any help would be appreciated,

thank you!

0 Likes
Shopify Partner
1531 109 307

Hello Sue,

 

That would be an awesome feature to add. Have you tried following along this tutorial on how to add a size chart pop up to some of Shopify's themes? The table could be easily adapted to show your colour chart instead.

 

Give it a go and let us know how you get along or in case anything isn't clear.

 

Best wishes!

I turn coffee in to code - since 1998
0 Likes
New Member
11 0 0

Thanks Karl!

I added the code, but what do I add to my product page to get the link for the color chart pop up?

 

0 Likes
Highlighted
Shopify Partner
1531 109 307

According to the tutorial, all you'd need to add is

 

{% if product.options contains 'Size' %}
<a class="btn size-chart-open-popup" href="#size-chart">See size chart</a>
{% endif %}

 

Let me know if that works for you.

I turn coffee in to code - since 1998
0 Likes
New Member
11 0 0

Thanks Karl but it won't work.  I don't have colors  set as an option on the products that I wanted the color chart to pop up.

My customers can pick up to 5 different colors and I was just having them list them in a text box. I think the color chart pop up would look better instead of adding the chart color to each product.

Let me know if you have any other ideas that might work.

Thanks!

 

0 Likes
Shopify Partner
1531 109 307

Hi Sue,

 

Sorry to hear this isn't working out as expected. I haven't followed through the tutorial myself so I cannot tell for sure how and if it works. Sometimes, as themes get updated, the tutorials may fall behind and become obsolete or require some modification.

 

However, what struck me in your last reply is that you mention you do not have colour options set on your product - am I understanding this correctly that you do not have product variants by colour? If so, the size chart (colours in your case) tutorial won't work of course.

 

Let me know how exactly you have your products setup (i.e. with or without colour option and the variants it creates). Alternatively, feel free to post a URL to your store so I can check what's going on.

 

Thanks and don't give up!

I turn coffee in to code - since 1998
0 Likes
New Member
11 0 0

I offer kids wall art, for example the below alphabet poster. The customer can choose up to 5 different colors from my color chart of 56 different colors. The different sizes are set up as variants. The customer inputs their color choices in a text box, I print the poster and ship the artwork.

There is no way I could make up variants for all the different color combo possible options.

I just think a pop up color chart would like cleaner on the product page. I did  try to place the color chart in a product tab, but it's too small then.

If you have any ideas, i would appreciate it.

 

Space Alphabet Poster.jpg

 

0 Likes
Shopify Partner
1531 109 307

Hi Sue,

 

Just letting you know I haven't forgotten about your thread here and I understand what you're after now much better than before. It is a little more elaborate so I haven't yet had time to prepare a solution for you, but I'll try get back to you as soon as I can.

I turn coffee in to code - since 1998
0 Likes
New Member
11 0 0

No worries, I appreciate your help!

Thanks

Sue


@KarlOffenberger wrote:

Hi Sue,

 

Just letting you know I haven't forgotten about your thread here and I understand what you're after now much better than before. It is a little more elaborate so I haven't yet had time to prepare a solution for you, but I'll try get back to you as soon as I can.


 

0 Likes