Mini product cards

Compact product cards (thumbnail, name and price) in a tight grid or carousel, with a tab for each collection. Fits a lot of products into very little vertical space.

Mini product cards section in the Sublime theme

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

Good for

  • Accessories, refills or add-ons shown in a small space
  • Tabs such as Singles and Multipacks for one product range
  • A dense product list under a larger feature section

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 Mini product cards 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 button link in a new browser tab. Best kept for links that leave your store.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

Products to show Maximum number of products shown in the section.Adjustable from 2 to 24 (default 8).
Desktop columns How many items sit side by side on desktop.Choose 3 (default) or 4.
Enable carousel on desktop Turns the row into a swipeable carousel on desktop instead of wrapping items onto a second line.Off by default.
Enable carousel on mobile Turns the row into a swipeable carousel on mobile.Off by default.

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.
Card color scheme Color scheme applied to product cards in this section only, overriding the card scheme set in Theme settings → Product card.

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.

Mini collection block

Content

Tab label Label on the tab. Keep it to one or two words so tabs fit on mobile.Uses the collection name when left empty.
Collection The collection this section pulls products from.
Products Choose the products to show, and in what order.Used only when no collection is selected.

Tab icon

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, Logout or Dot.
Custom icon Your own icon, used instead of the preset icon above.Overrides the icon above. Use a transparent .svg or .png.

Tips

  • Use tabs to split one range. Sizes, pack counts or flavors each get their own tab without taking up more of the page.
  • Upload product images at the same size. The thumbnails are small, so mixed crops look messy side by side.

Troubleshooting

Problem Fix
A tab shows a whole collection instead of the products I picked When Collection is set, it takes priority over Products. Clear the collection to use your own list.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.