Product pages - Add color swatches to products

Solved
PureTime
Excursionist
33 1 7

I just want to point out, that it doesn't quite work when all variants are sold out.

In that case it seems the original dropdown is shown:

One variant is in stock:

PureTime_0-1608555420440.png

 

All variants are sold out:

PureTime_1-1608555463438.png

If anyone has a fix for this, please let me know.

 

 

0 Likes
Boey
New Member
2 0 0

Hi,

thank you for providing this code! i implemented the swatches and they look good, but how can i get rid of the selectors that show before they get replaced with the swatches?

When i add one variant to cart now and click back on another variant the add to cart button stays as view cart and i cant add anymore variants, how can i fix this?

 

Thank you so much!

0 Likes
Ceyhun
New Member
1 0 0

Hello,

Since I couldn't find 'selectCallback' with the code on the first page, I tried Nesian's code on page 6.

I got the buttons, but when added to the basket, the item in the first button is always added. 

I couldn't find where I went wrong, can you help me?

 

Preview link: https://f42qmwbrhe0bss03-42117791910.shopifypreview.com

 

I have one more question. After adding boxes, the text colors changed to gray on mobile devices. (You can try with the preview link)(image 2)

It looks normal on desktop or mobile preview on theme menu(image 1).

Before adding boxes(image 3)

Ceyhun_0-1609339562523.png

 

Ceyhun_4-1609339870651.png

 

 

Ceyhun_5-1609339892400.png

 

0 Likes
Rapunzels
Tourist
8 0 8

Shopify refers to this set of instructions to creates swatches on the Brooklyn theme. This tutorial is outdated and sadly results in the issue that has been well documented in the comments / complaints. I really hope Shopify will update the tutorial.

 

Novaroseandco
New Member
1 0 0

@Arundas

Any idea how to make the color title show as well?

ex. Color: Mint Green

right now mine just says Color, then lets you select a swatch

0 Likes
TyW
Community Manager
Community Manager
525 34 846

This is an accepted solution.

We've identified that unsupported tutorial is no longer accurate, and creating issues. 

As a result this tutorial will be removed next week, followed by this topic being locked. 

For swatch options going forward please consider an app from the Shopify App Store .

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes

I have successfully adapted this tutorial and applied it to Supply theme, customizing it exactly to my needs.

Why are you deleting it in favor of yet another app? Not only these "apps" that do nothing but simple changes in the theme cost extra money, they also slow down our stores. When will you stop pushing "apps" as a solution for every darn problem there is?

At least, keep this excellent tutorial available with a warning. Anyway I'm saving a PDF of all the messages in this thread, in case it disappears.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Check out my Fiverr gig.
0 Likes
Tmac
Shopify Partner
9 0 1

"We've identified that unsupported tutorial is no longer accurate, and creating issues. 

As a result this tutorial will be removed next week, followed by this topic being locked. 

For swatch options going forward please consider an app from the Shopify App Store ."



Boo, this is why shopify sucks

0 Likes