Product pages - Add color swatches to products

Highlighted
New Member
2 0 0

Hi Javier, thanks for the code!

I tried adding it do the custom.js folder, to no avail. The buttons are displayed correctly, but the Add to cart button doesn't work.

Should I paste in theme.js or another js folder?

 

I use Narrative theme, and here is the example page.

 

Shoutout to anyone else: have you found a way to make it work in the Narrative theme?

0 Likes
Highlighted
Tourist
4 0 0

Hello, I was able to use the code and it's work fine but, if for exemple, I reload the page, the "checked" option will go every time to the first variant and not on the one showed in the URL. Do you have any idea how I can achieve that please?

0 Likes
Highlighted
Excursionist
46 2 1

Anyone get this working for booklyn theme?

0 Likes
Highlighted
Explorer
44 3 3

We can do it through custom codeing. My email id is jitendra3496@gmail.com

0 Likes
Highlighted
Explorer
44 3 3
  {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
          
            var variantIdFieldIdentifier = 'variant-select';
            new Shopify.OptionSelectors(variantIdFieldIdentifier, { 
              product: {{ product | json }},     // Product object required to know how options map to variants
              onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
              enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
            })
        
 
          </script>
          {% endif %}
0 Likes
Highlighted
Explorer
44 3 3
Yes we can do it through custom codeing with in few hours.
0 Likes
Highlighted
Excursionist
46 2 1

If you have it working already could you share it here, please?

0 Likes
Highlighted
New Member
2 0 0

Hello. Thank you very much.

1. Is there a way to change the Option Name?

ex)Size -> Bundle Option

 

2)Align Text to middle. I tried all but not working.

 

Thank you so much.

image.png

0 Likes
Highlighted
Explorer
44 3 3

1. Is there a way to change the Option Name?

ex)Size -> Bundle Option

you can changed it.Clicked on the product in backend Please edit products variants option name.

 

2)Align Text to middle. I tried all but not working.

 

You change adjust the text using css.

0 Likes
Highlighted
New Member
2 0 1

Is there any way to assign colors swatches using hex code instead of image, for example  "{blue:  #367588;} " ??

1 Like