How To Make Variants Not Visible to Customer Based On Other Variant Selection

Highlighted
New Member
3 0 0

Hey Shopify Gang,

Would LOVE some help around this. We sell pillowcases and have three variants per product.

Size: Standard, King
Color: White, Charcoal
Package: 1 x Single Pack, 2 x Twin Pack, 4 x Family Pack

As the cost differs between Standard and King, we have different package costs. Standard starts at $89 and King at $99.

When the customer selects Standard, they are also shown the Packages for King (even though these variants don't exist!). See images below:

First.pngSecond.png

 

 

 

 

 

 

 

 

My Question: Does anyone know how to ONLY show the relevant packages based on previous selection? In this case, Standard ONLY shows prices $89, $159 and $285 and King ONLY shows $99, $178, and $316?

My infinite gratitude in advance,

Ben

0 Likes
Highlighted

Hi Ben!

What is the URL of your website and I'll take a look. My intuition tells me this could easily be fixed with some copy/paste javascript or liquid, but I'll need to take a look before I can offer any recommendations.

Feel free to PM me if you're more comfortable sharing your site that way. 

Thank you,

Kyle

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.

We offer free and paid Shopify support.
Monday - Friday | 9 AM — 5 PM EST
Email: hello@freshnarrative.io | tel: (443) 345-8162
Baltimore, Maryland, United States
0 Likes
Highlighted
Shopify Partner
58 9 15

Hi Ben, 

You could try this solution here (towards the bottom you'll find more up-to-date solutions, depending on your theme): 

https://gist.github.com/carolineschnapp/1083007/11e7f1333ed3cc8038cf5d59349cbc45c90a7bd9

Creative director / Partner @ MALVI
0 Likes
Highlighted
New Member
3 0 0

Hey Kyle!

Sure, our website is www.mysilvi.com. I'm using Basel Theme (from Theme Forest) and Gem Pages as the page builder.

Cheers,

Ben

0 Likes
Highlighted
New Member
3 0 0

Thanks, Pvoulg!

Actually, I did try this with the updated version from Jonathan Moore but no dice.

I have a feeling because I'm using Basel Theme and Gem Pages as the page builder, that perhaps the var selector is different to that outlined in github and therefore the changes aren't being reflected. I can't for the life of me figure out what it could be though. Or I could just be way off!

This is the script for the Gem Pages quantity selector:

jQuery(function() {
var $module = jQuery('#m-1598017675829').children('.module');
var mode = jQuery('.gryffeditor').hasClass('editing') ? 'dev' : 'production';

var blankOption = $module.attr('data-blankoption');
var blankOptionText = $module.attr('data-blankoptiontext');
var style = $module.attr('data-style');

$module.gfV3ProductVariants({
mode: mode,
blankOption: blankOption,
blankOptionText: blankOptionText,
style: style,
onVariantSelected: function(variant, $select) {}
});
});

0 Likes