How to Hide Product Variants

When a recommended product has variants, the results page shows a dropdown so the customer can pick one.

There are three ways to take it away, and they leave the customer with different things.

Method	What the customer gets
Remove the dropdown component	The main product, with no variant to pick
Hide the dropdown with CSS	The main product, with no variant to pick
Recommend a variant instead	One variant, picked by the quiz

Remove the dropdown from the product card

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

The product card is built from components you arrange yourself, and the dropdown is one of them. Removing it leaves the rest of the card alone.

1. Open your results page and click the Products block.

2. Scroll the block settings to Slot item composition. It lists every component the product card shows.

   

3. Hover over Variants dropdown and click its bin icon.

4. Click the top-right Save button.

5. Take the quiz and check the dropdown is gone from the recommendations.

   

The dropdown hides itself in two cases

It never appears when no product in that block has variants, or when the slots are stacked. See Block types.

Not part of this version

The product card has no component list here, so the dropdown cannot be removed from it.

Hide it with custom CSS instead, or recommend a specific variant so there is nothing left to pick.

Not part of this version

The product card has no component list here, so the dropdown cannot be removed from it.

Hide it with custom CSS instead, or recommend a specific variant so there is nothing left to pick.

Not part of this version

The product card has no component list here, so the dropdown cannot be removed from it.

Hide it with custom CSS instead, or recommend a specific variant so there is nothing left to pick.

Not part of this version

The product card has no component list here, so the dropdown cannot be removed from it.

Hide it with custom CSS instead, or recommend a specific variant so there is nothing left to pick.

Not part of this version

The product card has no component list here, so the dropdown cannot be removed from it.

Hide it with custom CSS instead, or recommend a specific variant so there is nothing left to pick.

Hide the dropdown with custom CSS

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

A CSS rule hides the dropdown without touching the block. Removing the component is the tidier route, so try that first.

1. Open the Quiz design tab.

2. Go to the Advanced section and find the CSS console.

3. Paste this rule into the console.

   .select-variants-container {
       display: none;
   }
   

4. Click the top-right Save button.

5. Take the quiz and check the dropdown is gone from the recommendations.

   

The rest of the results page classes

See the App CSS Structure reference.

A CSS rule hides the dropdown while the quiz carries on recommending the main product.

1. Open the Quiz Design tab.

2. Scroll to the Custom CSS section and click add.

3. Paste both rules into the CSS console.

   .no-variants-dropdown {
       display: none;
   }
   
   .lq-variants-dropdown {
       display: none;
   }
   

4. Click the top-right Publish button.

5. Take the quiz and check the dropdown is gone from the recommendations.

   

The rest of the results page classes

See the App CSS Structure reference.

A CSS rule hides the dropdown while the quiz carries on recommending the main product.

1. Open the Quiz Design tab.

2. Scroll to the Custom CSS section and click add.

3. Paste both rules into the CSS console.

   .no-variants-dropdown {
       display: none;
   }
   
   .lq-variants-dropdown {
       display: none;
   }
   

4. Click the top-right Publish button.

5. Take the quiz and check the dropdown is gone from the recommendations.

   

The rest of the results page classes

See the App CSS Structure reference.

A CSS rule hides the dropdown while the quiz carries on recommending the main product.

1. Open the Quiz Design tab.

2. Scroll to the Custom CSS section and click add.

3. Paste both rules into the CSS console.

   .no-variants-dropdown {
       display: none;
   }
   
   .lq-variants-dropdown {
       display: none;
   }
   

4. Click the top-right Publish button.

5. Take the quiz and check the dropdown is gone from the recommendations.

   

The rest of the results page classes

See the App CSS Structure reference.

A CSS rule hides the dropdown while the quiz carries on recommending the main product.

1. Open the Quiz Design tab.

2. Scroll to the Custom CSS section and click add.

3. Paste both rules into the CSS console.

   .no-variants-dropdown {
       display: none;
   }
   
   .lq-variants-dropdown {
       display: none;
   }
   

4. Click the top-right Publish button.

5. Take the quiz and check the dropdown is gone from the recommendations.

   

The rest of the results page classes

See the App CSS Structure reference.

A CSS rule hides the dropdown while the quiz carries on recommending the main product.

1. Open the Quiz Design tab.

2. Scroll to the Custom CSS section and click add.

3. Paste both rules into the CSS console.

   .no-variants-dropdown {
       display: none;
   }
   
   .lq-variants-dropdown {
       display: none;
   }
   

4. Click the top-right Publish button.

5. Take the quiz and check the dropdown is gone from the recommendations.

   

The rest of the results page classes

See the App CSS Structure reference.

Recommend a specific variant instead

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

A Product variants block recommends variants in their own right. Each recommendation is then one variant, so the customer has nothing left to pick.

1. Open your results page and click Add block.

   

2. Under Slots, choose Product variants.

   

3. Open the block settings and set the Recommendation system. Choose recommendations drawn from the answers, or a fixed set of variants.

4. Click the top-right Save button.

5. Take the quiz and check that each recommendation is a single variant.

   

Group product variants collects the variants of a product into one dropdown. With it off, the quiz recommends each variant as an item of its own.

1. Open your results page in the Quiz Builder and click the cog icon.

2. Open the ADVANCED tab.

3. Under Recommendations Settings, turn Group product variants off.

   

4. Click the top-right Publish button.

5. Take the quiz and check that each recommendation is a single variant.

   

How the variants are ordered

Variants appear in the order of the upvotes they collected. Variants on equal upvotes appear in a random order.

Group product variants collects the variants of a product into one dropdown. With it off, the quiz recommends each variant as an item of its own.

1. Open your results page in the Quiz Builder and click the cog icon.

2. Open the ADVANCED tab.

3. Under Recommendations Settings, turn Group product variants off.

   

4. Click the top-right Publish button.

5. Take the quiz and check that each recommendation is a single variant.

   

How the variants are ordered

Variants appear in the order of the upvotes they collected. Variants on equal upvotes appear in a random order.

Group product variants collects the variants of a product into one dropdown. With it off, the quiz recommends each variant as an item of its own.

1. Open your results page in the Quiz Builder and click the cog icon.

2. Open the ADVANCED tab.

3. Under Recommendations Settings, turn Group product variants off.

   

4. Click the top-right Publish button.

5. Take the quiz and check that each recommendation is a single variant.

   

How the variants are ordered

Variants appear in the order of the upvotes they collected. Variants on equal upvotes appear in a random order.

Group product variants collects the variants of a product into one dropdown. With it off, the quiz recommends each variant as an item of its own.

1. Open your results page in the Quiz Builder and click the cog icon.

2. Open the ADVANCED tab.

3. Under Recommendations Settings, turn Group product variants off.

   

4. Click the top-right Publish button.

5. Take the quiz and check that each recommendation is a single variant.

   

How the variants are ordered

Variants appear in the order of the upvotes they collected. Variants on equal upvotes appear in a random order.

Group product variants collects the variants of a product into one dropdown. With it off, the quiz recommends each variant as an item of its own.

1. Open your results page in the Quiz Builder and click the cog icon.

2. Open the ADVANCED tab.

3. Under Recommendations Settings, turn Group product variants off.

   

4. Click the top-right Publish button.

5. Take the quiz and check that each recommendation is a single variant.

   

How the variants are ordered

Variants appear in the order of the upvotes they collected. Variants on equal upvotes appear in a random order.

---

This article explains the three ways to take the variants dropdown off your results page, and what each one leaves the customer with.