Show measurement fields only when “Custom” size variant is selected (Stiletto theme)

[websitecreator]

Hi everyone,

I’m using the Stiletto Shopify theme and need help with a custom sizing setup.

I have a product with Size variants: S / M / L / Custom.
I want to show custom measurement fields (Bust, Hip, Shoulder, Sleeves, Length) only when the “Custom” size is selected, and keep them hidden for S / M / L.

Example product (password protected):
https://shlalah.ae/collections/dresses/products/organza-linen-dressorganza-linen-dress?variant=45540879401133
Password: gurowt

If anyone has experience handling this logic in Stiletto or similar themes, I’d really appreciate your guidance.

I’m also open to paid help if needed to resolve this properly.

Thank you!

[StackingContext]

Hi @websitecreator

Try using the following Custom CSS snippet

.product__controls-group:has(input) {
  display: none;
}

body:has(button[data-option-value="Custom"].selected) .product__controls-group:has(input) {
  display: block;
}

[Tony-BEMEApps]

I found some solution that you may try:

1. Use a Size Chart App: Consider using a size chart app from the Shopify App Store. These apps often provide customizable size charts and guides that can be integrated into your theme. Some popular options include:

   • Size Chart & Size Guide by POWR

   • Size Chart & Size Guide by HulkApps

   • Size Chart & Size Guide by Relentless Apps

   These apps allow you to create detailed size charts and can often be customized to show specific fields based on the selected size.

2. Custom Code Solution: If you prefer a custom solution, you can add custom JavaScript to your theme to show/hide fields based on the selected size. Here’s a basic example of how you might implement this: javascript document.addEventListener(‘DOMContentLoaded’, function() { var sizeSelect = document.querySelector(‘#ProductSelect’); var customFields = document.querySelector(‘.custom-size-fields’);

   sizeSelect.addEventListener('change', function() {
       if (sizeSelect.value === 'Custom') {
           customFields.style.display = 'block';
       } else {
           customFields.style.display = 'none';
       }
   });
   
   

   });

   Make sure to add the corresponding HTML for the custom fields in your product template

Detail Source: Setting up custom sizing in Stiletto Shopify theme - AISellor

[Easify-Ariel]

Hi @websitecreator

Based on your requirements, Easify Product Options can handle this perfectly, and there’s no need to modify the Stiletto theme code or write any additional JavaScript. In cases where a product has sizes like S / M / L / Custom and you only want the measurement input fields to appear when the customer selects “Custom”, this is a very common setup for made-to-measure or custom-made products.

Here’s an example I’ve created so you can see how it works:

• This is the result:

• This is the app setting:

In Easify, you can create measurement input fields such as Bust, Hip, Shoulder, Sleeves, and Length using Text box options, allowing customers to enter their exact measurements.

Then, you can use Conditional Logic in the Advanced settings to control the display of these fields based on the selected size variant. When the customer chooses “Custom”, all measurement input fields will automatically appear; when they select standard sizes such as S, M, or L, these fields will be completely hidden.

This approach not only meets your custom sizing requirements but also keeps the product page interface clean, professional, and user-friendly for shoppers.

This app is super intuitive and ideal for customizable products. And if you ever need assistance, the Easify team is always ready to help!

[Shadab_dev]

If the css solution works in the first post of your query then great, else this looks easy enough to do with a bit of js

[Parselab_Melissa]

Hi @websitecreator,

I hope you’re doing well. If you are open to trying a third-party app, you can create a custom size option with the product option feature of Inkybay- Product Personalizer App

With the Product Option feature, Customer can select both preset sizes as S/M/L, or customize their own size. When they select the custom button, only then will custom fields show up. All customer inputs are automatically included in the order file generated by Inkybay. You can even set dynamic pricing for each customized size option.

Inkybay also lets you create different product options like text fields, file attachment options, swatch images, etc., and display them as drop-down options, radio buttons, swatches, checkboxes, etc.

No coding is required, and a simple setup. The best part of Inkybay is that it offers a free 21-day trial so you can explore it and see how it works for your product.

[websitecreator]

Thank you so much for your help and your time!

It worked!