This is a complete reference for every setting on the Tabs+ Setup theme app embed. To open these settings:
In the Shopify admin, go to Online Store → Themes and click Customize on your theme.
Open the App embeds panel.
Click Tabs+ Setup to expand its settings.
On this page:
Tabs - orientation, colour, borders, fonts, behaviour
Icons - tab icons and disclosure indicators
Advanced settings - selectors and custom CSS
Tabs
Tab orientation
Type: Horizontal / Vertical · Default: Vertical
Whether tabs appear as a horizontal tab bar (with content panels below) or as a vertical accordion (collapsible sections).
You can override this on individual products using a Shopify product tag - see Per-product orientation overrides.
Theme color scheme
Type: Light / Dark · Default: Light
Pick the option that matches the background of your product page. Light renders icons and tab borders in dark colours; Dark renders them in white. This affects only the default Tabs+ styling - if you've turned off the default CSS or written your own, this setting is ignored.
Border width
Type: 0-3 px · Default: 1 px
Thickness of the borders between tabs. Set to 0 for borderless tabs.
Border style
Type: Solid / Dotted / Dashed · Default: Solid
Style of the borders between tabs.
Border opacity
Type: 0-80% · Default: 15%
How visible the borders are. Lower opacity = more subtle. The default 15% gives a barely-there divider; set higher if you want bolder visual separation.
Font size
Type: Free-text CSS value · Default: default
Font size for tab labels. Leave as default to inherit your theme's normal font size. Otherwise, enter a CSS size with units - e.g. 16px, 1rem, 1.1em.
Font weight
Type: Theme default / Normal / Bold / 100-900 · Default: Theme default
Font weight for tab labels. Pick a numeric weight (100-900) for fine-grained control, or Theme default to inherit your theme's styling.
Tab label case
Type: Default / Capitalize / Uppercase / Lowercase · Default: Default
CSS text-transform applied to tab labels. Capitalize = first letter of each word; Uppercase / Lowercase = all letters; Default = leave as typed.
Show main description as tab
Type: Checkbox · Default: Off
When off (default), the product's main description appears above the tabs. When on, the main description becomes its own tab (labelled “Description” by default), so the entire product content area is tabbed.
Open first tab by default
Type: Checkbox · Default: Off
Only applies to vertical tabs. When on, the first tab is open when the page loads. When off, all tabs start closed.
Only allow one tab to be open at a time
Type: Checkbox · Default: Off
Only applies to vertical tabs. When on, opening any tab automatically closes any other tabs that are open. When off, customers can have multiple tabs open simultaneously.
Icons
Display icons
Type: Always / Never / Only on vertical tabs / Only on horizontal tabs · Default: Only on vertical tabs
Where to show the icon you've assigned to each tab. The default is vertical only - horizontal tab bars stay text-only and clean, while the more spacious vertical accordion shows the icons.
Disclosure icon
Type: Plus/minus (small or large) / Chevron (small or large) / None · Default: Chevron (small)
Only applies to vertical tabs. The indicator that appears on the right of each tab to show whether it's open or closed.
Plus / minus -
+when closed,−when open.Chevron - arrow pointing down when closed, up when open.
None - no indicator (relies on the open/closed state being obvious from context).
Icon weight
Type: Light / Normal / Heavy · Default: Normal
Visual weight of all built-in icons (both tab icons and disclosure indicators). Light uses thin strokes; Heavy uses thick strokes; Normal sits in between. Has no effect on custom icons you've uploaded.
Add an icon to the main description tab
Type: Select from built-in icon set · Default: None
Only applies if Show main description as tab is on. Pick which built-in icon to display next to the “Description” tab.
Available icons: 3D, Attachment, Bag, Basket, Box, Cart, Checkmark, Checkmark in circle, Clock, Comment, Copy, Customer, Delivery, Discount, Download, Email, Globe, Heart, Info, Location, Lock, Note, Notification, Pickup, Plane, Play, Question, Return, Settings, Share, Size, Star, Truck, Upload, Warranty.
Show main description as the last tab
Type: Checkbox · Default: Off
Only applies if Show main description as tab is on. By default, the “Description” tab is shown first. Tick this to move it to the end of the tab list instead.
Animation settings
These settings control how vertical-tab accordions open and close. They have no effect on horizontal tabs (which switch instantly).
Animate vertical tabs
Type: Checkbox · Default: On
When on, vertical tabs slide open and shut smoothly. When off, they snap open/closed instantly.
Open animation duration
Type: 100-500 ms (steps of 100) · Default: 200 ms
How long it takes a tab to slide open. Lower = snappier; higher = more leisurely.
Close animation duration
Type: 100-500 ms (steps of 100) · Default: 200 ms
How long it takes a tab to slide closed.
Animation easing
Type: Linear / Ease-out / Ease-in / Ease-in-out · Default: Ease-out
The CSS easing function used. Ease-out (default) feels natural - quick start, gentle stop. Linear is constant speed. Ease-in starts slowly. Ease-in-out is gentle at both ends.
Advanced settings
The defaults work for most themes. You generally only need these settings if Tabs+ isn't finding the right elements on your product page, or if you want to write your own CSS.
Description CSS selector
Type: Free-text CSS selector · Default: empty (auto-detect)
By default, Tabs+ looks for the product description using a list of common selectors that cover most themes. If your theme uses something custom and tabs aren't appearing, you can specify the exact CSS selector here.
For example: .product__description-block .rte.
Tabs CSS selector
Type: Free-text CSS selector · Default: empty
An alternative to the description selector for cases where you want the tabs to render in a specific element on the page (other than where the description is). For best results, use this together with Description CSS selector.
You usually don't need this if you've added the dedicated Product tabs theme block instead. See Theme app extension overview.
Title CSS selector
Type: Free-text CSS selector · Default: empty (auto-detect)
Tabs+ also rewrites the product title when a customer selects a variant with a custom title. By default it auto-detects common title elements; if your theme uses something unusual, specify the exact selector here.
Include default CSS styling
Type: Checkbox · Default: On
When on, Tabs+ injects its built-in CSS to style the tabs. When off, no default styling is loaded - you'll need to write CSS yourself (using the Custom CSS field below or your theme's stylesheet) to make tabs look right.
Most stores leave this on. Turn it off only if the default styling clashes badly with your theme and you prefer total control.
Custom CSS
Type: Free-text CSS · Default: empty
Add your own CSS rules to override or extend the default styling. The CSS is injected into the page in a <style> tag and applies to that product page.
Example - change the icon colour:
:root { --pdpo-icon-color: #c0392b; }
Tabs+ uses CSS variables prefixed with --pdpo- for several visual properties, so you can often override the look without writing entire selectors.
Frequently asked
Where do these settings apply - per product, or store-wide?
The Tabs+ Setup app embed is a single store-wide configuration. All settings here apply to every product page on the storefront.
Can I change the orientation just for one product?
Yes - tag the product with pdpo_horizontal or pdpo_vertical. See Per-product orientation overrides.
How do I preview a setting change before saving?
The theme editor shows a live preview as you change settings. Use the “Theme” section in the Tabs+ admin's Settings page to jump straight into the editor with a product preview already loaded.