Feature showcase

Explains what something is made of, like an ingredients list, a materials breakdown or a spec table, alongside supporting imagery.

Feature showcase section in the Sublime theme

At a glance: Add it to any page with Add section. Holds up to 3 blocks.

Good for

  • An ingredients list either side of a product shot
  • Calling out materials and construction details around a hero image
  • A nutrition or specification table beside the product

How to add the section

  1. From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
  2. Open the page you want to edit from the dropdown at the top of the editor.
  3. In the left sidebar, click Add section.
  4. Search for Feature showcase and select it.
  5. 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

Layout direction Applies to desktop only.Choose Horizontal (default) or Vertical.
Media height The minimum height of the central image in the horizontal layout. Increase it when your features' text is longer than the image is tall.Adjustable from 200px to 800px (default 500px). Only appears when Layout direction is Horizontal.

Text sizes

Item heading size Heading size for each item, from the sizes in Theme settings → Typography.Choose Default (default), H1, H2, H3, H4, H5 or H6.

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.

Feature list block

Feature 1

Heading The feature's name, such as an ingredient or material.
Description A sentence or two about the feature. Keep it short so the list stays scannable next to the image.
Image 800 x 1000px .jpg recommended.

Feature 2–4

Each of the 3 features has the same settings, set separately for each one.

Enable feature 2–4 Adds another feature to this list. Each Feature list block holds up to four; features that are turned off don't take up space.On by default.
Heading The feature's name, such as an ingredient or material.Only appears when Enable feature 2–4 is on.
Description A sentence or two about the feature. Keep it short so the list stays scannable next to the image.Only appears when Enable feature 2–4 is on.
Image 800 x 1000px .jpg recommended.Only appears when Enable feature 2–4 is on.

Image

Image ratio Crops images to a fixed shape so a row of mismatched uploads still lines up. Choose Adapt to image to keep each image at its own proportions.Choose Adapt to image, Portrait (3:4), Landscape (4:3) or Square (1:1) (default).
Image corner radius Rounds the corners of the image.Adjustable from 0% to 50% (default 0%).
Desktop image width How much of the row width the image takes.Adjustable from 48px to 180px (default 120px).
Mobile image width Image width on mobile.Adjustable from 24px to 100px (default 80px).

Feature image block

Desktop image Background image used on desktop.2880 x 920px (large) .jpg recommended.
Desktop image size Image size on desktop.Choose Small, Medium (default), Large or Adapt to image. Only appears when Layout direction is Vertical.
Mobile image A separate image used on mobile. Leave empty to reuse the desktop image.800 x 1000px .jpg recommended.
Mobile image size How tall the image is on mobile.Choose Small, Medium (default), Large or Adapt to image. Only appears when Layout direction is Vertical.
Image fit Cover fills the frame and crops the overflow; Contain fits the whole image inside the frame and may leave space at the edges.Choose Cover (default) or Contain.

Information table block

Content

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, H1, H2, H3, H4, H5 (default) or H6.
Icon Upload your own icon image.Choose None, Store, Phone, Heart, User, Check, Check circle, Star (default), 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 selected icon. Use a transparent .svg or .png.
Icon size Displayed size of the icon.Adjustable from 16px to 80px (default 20px).

Table content

Show table header Shows the column headings row.On by default.
Column 1 Heading for the first column.Only appears when Show table header is on.
Column 2 Heading for the second column.Only appears when Show table header is on.
Information Separate label and value with a comma. Use line breaks to add a new row. Use a hyphen to indent rows.

Disclaimer

Disclaimer text Small print shown below the main content, for legal or delivery notes.

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.
Alternate row color Background color of every other row, for easier scanning.
Alternate row text color Text color on alternating rows.

Tips

  • Use one Feature list on each side of the image. Two lists of two to four features balance best.
  • Give features a small image each. A close-up of the ingredient or detail helps shoppers take in the list at a glance.
  • Use the Information table block for numbers. Nutrition facts and sizing read better as rows than as feature cards.

Troubleshooting

Problem Fix
Feature 2, 3 or 4 isn't showing Each extra feature is off until you turn on its Enable feature checkbox inside the Feature list block.
I can't find Media height It only applies to the horizontal layout. Set Layout direction to horizontal to see it.
The section won't let me add another block Feature showcase holds up to three blocks, for example two Feature lists and one Feature image.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.