Main Collection Filter

On collection pages, size tabs act as interactive filters that allow customers to quickly find products in the size they want — improving user experience and increasing conversions.

The Materia theme includes built-in styling controls for how these tabs appear when selected (checked). These settings help you match the filter design to your brand style while keeping the interface clean and easy to use.

What Are Product Size Tabs?

Product Size Tabs are clickable filter buttons typically used for:

  • Clothing sizes (S, M, L, XL)

  • Shoe sizes

  • Accessory dimensions

  • Or any tag-based filtering related to product size

They are usually displayed at the top of collection pages or inside filter drawers and are powered by product tags or metafields.

🛠️ Customization Settings

Checked Product Size Background Color

Set the background color for a tab when it’s selected.

Example:

plaintextCopyEdit#202020

Use a bold or dark tone to clearly highlight active selections.

Checked Product Size Text Color

Defines the text color of the active/selected tab.

Example:

plaintextCopyEdit#FEFEFE

Use light or white tones for better contrast with darker backgrounds.

How It Works

  • When a customer clicks a size tab, the corresponding filter is applied

  • The selected tab gets the styles you define above

  • All unselected tabs remain styled with your theme’s default button or filter appearance

  • These settings apply to size tabs only, not all filters

Important Notes

  • These settings only apply to product size tabs — not all collection filters

  • Other filter types (e.g., color, price, tags) may be styled separately

  • If you're using custom collection layouts, certain sections may have their own override settings

💡 Tips

  • Always ensure there’s enough contrast between selected and unselected states

  • Use color cues that match your brand (e.g., primary color or accent shades)

  • Keep the size of the text readable across desktop and mobile

  • Test with both light and dark backgrounds for best visibility

PreviousButtons CustomizationNextProduct Card Settings

Last updated