Hide a section when one variant is selected

[Sushovan]

In my product have 3 main variants

1. Frame Color

• Matte Black

2. Lens Color

• Blue Gun
• Gray
• red
• blue

3. Lens Clarity

• Standard
• Light Pro

Now I want to do if I choose “Standard variant” then I want to show a section When I choose “Light Pro variant” then the section will hide.

Please help.

[The_ScriptFlow]

Hey @Sushovan ,

Welcome to Shopify community.

In order to show or hide the section based on the selection of the variant required to do the custom code.

Could you please share the store url along with password [if applicable] so that I can take a look and provide you the solution code.

Thanks

[Sushovan]

https://skeletonoptics.com/collections/skeleton-originals/products/scout

This is the store URL but I can’t share the password because this is not mine.

[The_ScriptFlow]

Hey @Sushovan ,

Thanks for sharing the store url. I found that this need to take a look in your theme file so that I can make changes. Could you please share the collab codes or login of your store in the p/m so that I implement the same feature.

thanks

[tim_1]

For example, you can use CSS code like this:

.main-content:has([value="Light Pro"]:checked) .functionality-dropdown {
  display: none;
}

When the “Light pro” option is selected, the code will hide the “Why it’s our favorite/Fit …” section.

[Sushovan]

Thanks but not working.

[laddisahsi]

Solution:-
I wanted to share a small solution I implemented for conditionally showing and hiding a section on a Shopify product page based on the selected variant.

I tested and confirmed it works on the following product page:- Scout – Skeleton Optics

I wanted to show or hide a specific section based on which variant is selected. In my case, I targeted a variant ID and toggled visibility accordingly.

Here’s the JavaScript I used:-

document.addEventListener("DOMContentLoaded", function () {
  const clarityOptions = document.querySelectorAll('.swatch-items-wrapper.lens-clarity .swatch-element');
  const targetSection = document.querySelector('#shopify-section-template--17549660815437__sush_image_carousel_jy3KGL');
 
clarityOptions.forEach(option => {
    option.addEventListener('click', function () {
      const selectedValue = this.getAttribute('data-value');
 
      clarityOptions.forEach(el => el.classList.remove('active'));
      this.classList.add('active');
      if (selectedValue === 'Standard') {
        targetSection.style.display = 'block';
      } else {
        targetSection.style.display = 'none';
      }
    });
  });
  const selected = document.querySelector('.swatch-items-wrapper.lens-clarity .swatch-element.active');
  if (selected) {
    const value = selected.getAttribute('data-value');
    if (value === 'Standard') {
      targetSection.style.display = 'block';
    } else {
      targetSection.style.display = 'none';
    }
  }
});

See screenshots:-

Hide section screenshot:- Screenshot by Lightshot
Show section screenshot:- Screenshot by Lightshot

[Easify-Jennifer]

Hi @Sushovan

Looks like you want certain options to only appear when customers pick the “Standard” Lens Clarity variant — you can easily achieve that with the Easify Product Options app, which lets you add custom options and control their visibility using simple conditional logic.

Here’s how it can help you:

• This is the result

• This is the app setting:

To show a section — here it’s Basic Accessories — only when the customer chooses Standard as Lens Clarity, simply open the Basic Accessories option in Easify Product Options, go to Advanced Settings, enable Conditional Logic, then set it so that Lens Clarity is equal to Standard.

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime!

[ParseLab-Bryn]

Hi @Sushovan

I hope you are doing well. Since your product has three variants and you only want to show a separate section when the Standard option is selected, you can try the Inkybay – Product Personalizer app to set this up.

With Inkybay, you can create product options like swatches, text fields, file uploads, and more. These options can be displayed as dropdowns, radio buttons, checkboxes, or swatches.

For your case, you can set options for Frame Color, Lens Color, and Lens Clarity. By using Inkybay’s conditional logic, you can make these options appear only when the Standard variant is chosen. They will automatically stay hidden if a customer selects the Light Pro option.

No coding is required. Inkybay handles everything, and you’ll receive the customer’s chosen options information in the order file generated by Inkybay. You can try the free 21-day trial to explore and see how it works.

I hope this helps! If you’d like, we can also share a demo product with you.

---