i want to make a bundle but the customer has only the first option and not the second. for example, he can only order amethyst with amethyst and he will choose color only once
https://mythicaura.com/products/amethyst-crystal-hearts-harmony-necklace-set?variant=42026226843734
Topic summary
A merchant wants to simplify their bundle product by showing only one variant option instead of two. Currently, customers see both material (amethyst) and color selections, but the merchant wants customers to choose only once since both items in the bundle are the same.
Solutions Offered:
• CSS hiding approach: Two developers provided custom CSS code to hide the second variant selector. The first solution hides it globally, while a refined version targets only the specific product page using its unique ID.
• Native Shopify Bundles method: Another user suggested using Shopify’s built-in bundle feature to set default options for the second item, which automatically reduces the visible choices to just one variant selector.
The discussion includes code snippets and screenshots demonstrating both approaches. The merchant confirmed the CSS solution works but initially needed it product-specific rather than store-wide, which was then addressed with a more targeted CSS selector.
1 Like
Hey @noamdaniel
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @noamdaniel
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
fieldset.js.product-form__input.product-form__input--pill:nth-child(2) {
display: none;
}
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
that works the problem is that i want it only on this product and not on all of the store
Hi @noamdaniel This code will work only on this product
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
section#MainProduct-template--15517150412886__main fieldset.js.product-form__input.product-form__input--pill:nth-child(2) {
display: none !important;
}
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Hi @noamdaniel ,
If you are using Shopify bundles, you can edit the bundle to default the second item options.
Then, the bundle will only have the one option.
