Keystone Shopify Apps

Appearance

Tabs ​

Display information in a tabbed layout with a title and content, keeping long details organized and easy to browse.

Overview ​

Tabs is a static option type that shows a title and content in a tab-style UI. It’s useful when you want to present content in a compact, structured format without adding any customer input fields.

Use Tabs for:

  • Grouping product info into sections (e.g., "Details", "Shipping", "Care")
  • FAQ-style information when you prefer tabs over accordions
  • Instructions or policies that customers may want to reference quickly
  • Supporting information for option sets without adding form fields

Key characteristics:

  • Static content (no customer input captured)
  • Cannot be marked as required
  • No pricing and no value is added to cart
  • Contains a Title and Content
  • Label can be shown or hidden on the storefront

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name (shown in admin and optionally on storefront)
Hide Label from storefrontIf enabled, only the tabs section is shown (label is hidden)

Advanced Settings ​

SettingDescription
Internal LabelAdmin-only identifier (replaces label in options list)
Help TextAdditional context (appears based on display mode setting)

Tabs Settings ​

SettingDescription
TitleThe tab title customers click (e.g., "Care", "Shipping")
ContentThe text shown when the tab is active

How to Add Tabs ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Tabs from the Option Type dropdown
  4. Enter a Label (or hide it if you only want the tabs shown)
  5. Configure Tabs Settings:
    • Enter Title
    • Enter Content
  6. (Optional) Click Advanced Settings to add Internal Label
  7. Click Save in the contextual save bar

Use Cases ​

Care Instructions ​

Label: (Hidden) Title: Care Content: Hand wash cold. Lay flat to dry. Do not bleach.

Result: Customers can quickly switch to the Care tab when needed.

Shipping Info ​

Label: (Hidden) Title: Shipping Content: Ships in 2–3 business days. Expedited shipping available at checkout.

Result: Shipping details stay accessible without taking up extra space.

Returns Policy ​

Label: Policies Title: Returns Content: Returns accepted within 14 days for non-custom items. Custom items are final sale.

Result: Policy content is grouped in a consistent, browsable UI.

Styling ​

Tabs inherits styling from your theme and customization settings:

For deeper control — bar style presets, tab states, container shape, animation, and more — create a dedicated Tabs template. See Tabs Styling.

Best Practices ​

Use clear titles:

  • Keep tab titles short (1–3 words works best)
  • Use consistent naming (e.g., "Shipping", "Returns", "Care")

Keep content scannable:

  • Use short paragraphs and simple wording
  • Split long content into multiple sections if necessary

Hide the label in most cases:

  • The tab title is already visible on the storefront
  • Hide the label to avoid redundant headings (unless you want a label above the tab UI)