Hide Labels

Modified on Tue, 18 Nov at 8:18 AM

Overview

The Hide Labels feature removes the label text from an option's display on your storefront. This is useful when the option label would be redundant or when you want a more streamlined appearance.

Hide option labels from your storefront to create cleaner product pages and avoid redundant text.

When to Use Hidden Labels

Ideal Use Cases

Avoid duplicate text - When the option label and checkbox value convey the same information:

  • Option label: "Custom Engraving"
  • Option type: Checkbox (Single)
  • Checkbox value: "Add Custom Engraving?"
  • In this case, hiding the label makes sense because the checkbox text is self-explanatory

Streamlined design - When you want a minimal, clean interface:

  • Single checkbox options where the label is obvious from context
  • Options integrated into custom layouts where labels add visual clutter

When to Keep Labels Visible

Required fields - Always show labels for required options so customers see the asterisk (*) indicator

Complex options - When labels provide necessary context:

  • Custom text inputs (e.g., "Personalization Text")
  • Technical specifications (e.g., "Thread Count")
  • Options that need explanation

Accessibility - Labels help screen readers and assistive technologies understand form fields

Hiding a Label

  1. Navigate to Option Sets page
  2. Open the option set containing the option
  3. Click on the option you want to edit
  4. Check the box Hide label from storefront below the Option Label field
  5. Click Save in the contextual bar

The label will no longer appear on your storefront, but the option input/values will still display. You can validate this in the Live Preview as well.

Example Scenarios

Good: Single Checkbox

  • Option Label: "Add Gift Wrapping"
  • Option Type: Single Checkbox
  • Values: "Add gift wrapping (+$5.00)"

In this case, hiding the label works well because the checkbox value is self-descriptive.

Good: Self-Evident Dropdown

  • Option Label: "Color"
  • Option Type: Dropdown
  • Values: "Red", "Blue", "Green", "Yellow"

If your product page already mentions color selection, hiding the label reduces redundancy.

Bad: Required Text Input

  • Option Label: "Engraving Text"
  • Option Type: Text Input
  • Required: Yes

Hiding this label would remove the asterisk (*) and make it unclear what the text field is for.

Impact on Required Fields

When you hide a label on a required option:

  • The asterisk (*) indicator is hidden
  • Customers won't see a visual cue that the field is required
  • Validation still applies - customers can't checkout without completing it
  • Error messages will still appear if they skip the field

Best Practices

Clarity First

  • Only hide labels when doing so improves clarity
  • Test with real customers to ensure options are understandable
  • Consider accessibility - some users rely on labels

Use Descriptive Values

If hiding a label, ensure your option values are self-explanatory:

  • Good: "Yes, add extended warranty (+$50)"
  • Poor: "Yes"

Avoid for Complex Fields

Keep labels visible for:

  • Text inputs requiring specific information
  • Numeric fields (quantity, measurements)
  • Date/time pickers
  • Any field that benefits from instruction

Showing a Label Again

To make a hidden label visible:

  1. Open the option set containing the option
  2. Click on the option to edit it
  3. Uncheck Hide label from storefront below the Option Label field
  4. Click Save in the contextual bar

The label will now display on your storefront.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article