Keystone Documentation

Appearance

Hide Labels ​

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

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.

Important

Hiding a label also hides the required field indicator (*). Avoid hiding labels for required fields to maintain a clear customer experience.

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.

Result on storefront:

☐ Add gift wrapping (+$5.00)

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 Practice

For required fields, keep labels visible to clearly communicate what customers must complete before checkout.

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.

Troubleshooting ​

Option Appears Confusing Without Label ​

Solution:

  • Show the label again
  • Or update option values to be more descriptive
  • Consider adding help text or placeholder text instead

Required Field Not Obvious to Customers ​

Solution:

  • Show the label to display the asterisk (*)
  • This is especially important for text inputs and complex options

Label Hidden But Still Showing ​

Solution:

  • Ensure you've saved the option set after hiding the label
  • Clear browser cache and check again
  • Verify you're viewing the correct product with the updated option set

Next Steps ​

After configuring label visibility:

  1. Set up required fields thoughtfully
  2. Test your options on live products
  3. Customize styling to enhance the design