Tab content
Content split across tabs, so a lot of information fits in one section. Each tab holds text, an FAQ list, or a specifications table.
At a glance: Add it to any page with Add section. Holds up to 4 blocks.
Good for
- Overview, FAQ and Specifications tabs for a product or product range
- Care, shipping and returns information in one compact section
- Comparing product lines without a long scrolling page
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Tab content and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Layout
| Tab alignment | Aligns the tab row left, center or right.
Applies to desktop only. Default: Left. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Specifications block
Inside each Specifications you can add these nested blocks: Spec. Click the block in the sidebar, then Add block beneath it.
| Tab label | Label on the tab. Keep it to one or two words so tabs fit on mobile. |
| Icon | Upload your own icon image.
Choose None (default), Store, Phone, Heart, User, Check, Check circle, Star, Lab, Info, Truck, Free shipping, Ruler, Returning, Return, Secure, Credit card, Gift, Tag, Discount, Map pin, Package, Clock, Wallet, Coupon, Award, Barcode, Diamond, Leaf, Apple, Gluten free, Gluten, Vegan, Dairy, Dairy free, No added sugar, Protein, Droplet, Droplet free, Bolt, Moon, Brain, Recycle, Envelope, Chat, Sparkle, Flame, Recurring, Lock, Globe, Calendar, Nut off, Sprout, Arrow right, Arrow up right, Arrow left, Chevron right, Chevron down, Plus, Minus, Cross, Play, Cart, Shopping cart, Search, Link, Download, Home, Hamburger, Edit, Login, Error, Arrow up, Chevron left, Chevron up, Arrow down, Filter, Trash, Share, Eye, Sound on, Sound off, Expand, Copy, Question, Warning, Sticky note, Notification, Swap, List, Grid or Logout. |
| Custom icon | Your own icon, used instead of the preset icon above.
Overrides the icon above. Use a transparent .svg or .png. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
Image
| Show image | Shows the image for this item.
On by default. |
| Desktop image | Background image used on desktop.
1200 x 900px .jpg recommended. Only appears when Show image is on. |
| Desktop image ratio | Image crop shape on desktop.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. Only appears when Show image is on. |
| Desktop image width | Image width on desktop.
Adjustable from 20% to 60% (default 40%). Only appears when Show image is on. |
| Desktop image position | Which side of the text the image sits on, on desktop.
Choose Left or Right (default). Only appears when Show image is on. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. Only appears when Show image is on. |
| Mobile image ratio | Image crop shape on mobile.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. Only appears when Show image is on. |
| Mobile image position | Whether the image sits above or below the text on mobile.
Choose Top (default) or Bottom. Only appears when Show image is on. |
FAQ block
Inside each FAQ you can add these nested blocks: Item. Click the block in the sidebar, then Add block beneath it.
| Tab label | Label on the tab. Keep it to one or two words so tabs fit on mobile. |
| Icon | Upload your own icon image.
Choose None (default), Store, Phone, Heart, User, Check, Check circle, Star, Lab, Info, Truck, Free shipping, Ruler, Returning, Return, Secure, Credit card, Gift, Tag, Discount, Map pin, Package, Clock, Wallet, Coupon, Award, Barcode, Diamond, Leaf, Apple, Gluten free, Gluten, Vegan, Dairy, Dairy free, No added sugar, Protein, Droplet, Droplet free, Bolt, Moon, Brain, Recycle, Envelope, Chat, Sparkle, Flame, Recurring, Lock, Globe, Calendar, Nut off, Sprout, Arrow right, Arrow up right, Arrow left, Chevron right, Chevron down, Plus, Minus, Cross, Play, Cart, Shopping cart, Search, Link, Download, Home, Hamburger, Edit, Login, Error, Arrow up, Chevron left, Chevron up, Arrow down, Filter, Trash, Share, Eye, Sound on, Sound off, Expand, Copy, Question, Warning, Sticky note, Notification, Swap, List, Grid or Logout. |
| Custom icon | Your own icon, used instead of the preset icon above.
Overrides the icon above. Use a transparent .svg or .png. |
Image
| Show image | Shows the image for this item.
On by default. |
| Desktop image | Background image used on desktop.
1200 x 900px .jpg recommended. Only appears when Show image is on. |
| Desktop image ratio | Image crop shape on desktop.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. Only appears when Show image is on. |
| Desktop image width | Image width on desktop.
Adjustable from 20% to 60% (default 40%). Only appears when Show image is on. |
| Desktop image position | Which side of the text the image sits on, on desktop.
Choose Left or Right (default). Only appears when Show image is on. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. Only appears when Show image is on. |
| Mobile image ratio | Image crop shape on mobile.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. Only appears when Show image is on. |
| Mobile image position | Whether the image sits above or below the text on mobile.
Choose Top (default) or Bottom. Only appears when Show image is on. |
Content block
Inside each Content you can add these nested blocks: Heading, Text, Button group and Divider. Click the block in the sidebar, then Add block beneath it.
| Tab label | Label on the tab. Keep it to one or two words so tabs fit on mobile. |
| Icon | Upload your own icon image.
Choose None (default), Store, Phone, Heart, User, Check, Check circle, Star, Lab, Info, Truck, Free shipping, Ruler, Returning, Return, Secure, Credit card, Gift, Tag, Discount, Map pin, Package, Clock, Wallet, Coupon, Award, Barcode, Diamond, Leaf, Apple, Gluten free, Gluten, Vegan, Dairy, Dairy free, No added sugar, Protein, Droplet, Droplet free, Bolt, Moon, Brain, Recycle, Envelope, Chat, Sparkle, Flame, Recurring, Lock, Globe, Calendar, Nut off, Sprout, Arrow right, Arrow up right, Arrow left, Chevron right, Chevron down, Plus, Minus, Cross, Play, Cart, Shopping cart, Search, Link, Download, Home, Hamburger, Edit, Login, Error, Arrow up, Chevron left, Chevron up, Arrow down, Filter, Trash, Share, Eye, Sound on, Sound off, Expand, Copy, Question, Warning, Sticky note, Notification, Swap, List, Grid or Logout. |
| Custom icon | Your own icon, used instead of the preset icon above.
Overrides the icon above. Use a transparent .svg or .png. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Content position | Where the text block sits over the image, with nine positions from top-left to bottom-right.
Choose Top, Center (default) or Bottom. |
Image
| Show image | Shows the image for this item.
On by default. |
| Desktop image | Background image used on desktop.
1200 x 900px .jpg recommended. Only appears when Show image is on. |
| Desktop image ratio | Image crop shape on desktop.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. Only appears when Show image is on. |
| Desktop image width | Image width on desktop.
Adjustable from 20% to 60% (default 40%). Only appears when Show image is on. |
| Desktop image position | Which side of the text the image sits on, on desktop.
Choose Left or Right (default). Only appears when Show image is on. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. Only appears when Show image is on. |
| Mobile image ratio | Image crop shape on mobile.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. Only appears when Show image is on. |
| Mobile image position | Whether the image sits above or below the text on mobile.
Choose Top (default) or Bottom. Only appears when Show image is on. |
Spec block
| Label | The name of the spec, such as Material or Dimensions. |
| Value | The spec's value. Supports formatting and links, so it can run to a short list if needed. |
Tips
- Put the most important tab first. It's the one shoppers see without clicking.
- Keep tab labels to one or two words so the tab row fits on a phone.
- Add one Spec block per row in a Specifications tab: a label like Material and its value.
Troubleshooting
Where do I add a Spec?
Spec blocks live inside a Specifications tab. Select that tab in the sidebar, then click Add block beneath it.
I can't add a fifth tab
The section holds up to four tabs. Group related content, or add a second Tab content section.