search
Learn more

Product template

As products are usually assigned to multiple collections, Ultra Categories automatically determines the most relevant "base category" for each product using a smart priority system:

  • Use the collection context from the product URL: Some themes allow "collection-aware" product URLs, meaning that the product URL specifies the collection the product was found it, e.g. collections/jackets/products/jacket . When present, the app prioritizes that collection as the "base category".

  • Check the "Base collection" product metafield: The app creates a "Base collection" product metafield where you can manually assign the collection that should be used instead for a specific product, instead of using the app's logic.

    A "Base collection" product metafield is automatically created by the app

  • Find the deepest category the product belongs to: When the product lives in multiple collections within your category tree, the deepest (most specific) category is chosen.

  • Choose the smallest collection the product is in: If no structured category exists, Ultra Categories falls back to the collection the product belongs to with the least number of products – which is usually the most specific.

  • Fallback to “All products”: If all else fails, the product breadcrumb starts at the global “All products” level.

circle-info

Before this block can display anything, you’ll need to create your category tree. See instructions here.

hashtag
Add the "Breadcrumbs" block

  • In the Theme editor, navigate to the Product template (Note: if you have multiple templates, you'll need to follow these steps for each template – or copy and paste the block)

  • Make sure you're previewing a product that belongs to collections that exist in your category tree

  • Go to Add a new section > Apps; you'll see the Breadcrumbs block listed:

  • You should already see your breadcrumbs appear! If you're happy with the design, hit Save – otherwise check out the customization settings below.

hashtag
Settings

circle-info

Some of these settings are only available on the Pro Plan.

  • Content and behavior:

    • Show prefix label (Optional): Add an optional prefix label in front of the breadcrumbs, e.g. "You are in". When enabled, a text field appears below to set the text.

    Prefix label (optional)

    • Show home link: Enabled by default.

      • Home link style: Choose between Text (specify the text in the field below) or Icon

      • Home link text: E.g. "Home"

    • Show current page: Choose if the product itself should be included in the breadcrumbs, in the final position. Enabled by default (recommended).

      • Link current page: If the current page is shown, choose whether it should be linked. Disabled by default (recommended).

    • Enable structured data: Adds structured data for breadcrumbsarrow-up-right. Enable only if your store’s breadcrumb structure is appropriate for SEO, and be aware that invalid or mismatched markup may be ignored or flagged by search engines.

  • Appearance:

    • Override colors: By default, the text and separator inherit the current color scheme's text color. Enable this option to override those colors.

    • Separator: Choose between Chevron (>), Slash (/), Bar (|) or a Custom character.

    • Font size: Leave blank to default to the theme's font size. When using this setting, enter a value with a unit (e.g. 1.25rem).

  • Layout and spacing:

    • Content width: The app can't ascertain your theme's page width, so you can set the specific value here. Popular theme widths:

    • Space between items: This is the gap between each breadcrumb. Generally, the larger the font scale, the larger you might want to set the space.

    • Vertical padding: The space at the top and bottom of the breadcrumbs. Many themes' app sections already have a padding setting, so you might want to keep this setting at 0px and default to your theme's spacing.

Last updated