RuffRuff Tags Help Center

Configure App Blocks (Regular Plan Only)

Configure tag list design and behavior for each theme template.

The Regular-plan app block lets you configure tag list design and behavior separately for each theme template. Use it when product, collection, blog, and blog post templates require different settings.

Prerequisite: Per-template app block settings are available on the Regular plan. Use the "Tag list (Regular Plan)" app block.

The following table compares the scope and priority of each settings location.

Comparison

Customization page

App block

Scope

Shared settings for all pages

Settings for the applicable template

Available plans

All plans

Regular plan

Priority for the same setting

Lower

Higher

Prerequisite: When the same setting exists in both locations, the Regular-plan app block takes priority.

(1) Open the theme editor

From Shopify admin, go to Online Store → Themes and select "Customize" for the applicable theme.

(2) Open the applicable template

Open the product, collection, blog, or blog post template you want to configure.

The following image shows steps (3) through (5): select the app block, change its settings, and save.

(3) Select the Regular-plan app block

Select "Tag list (Regular Plan)" from the left menu in the theme editor.

(4) Change the settings

Change the app block settings and check the result in the theme editor preview.

(5) Save the settings

Select "Save" in the upper-right corner of the theme editor.

The following settings are available in app blocks on product, collection, blog, and blog post pages.

Setting

Description

Title

Text displayed above the tag list

Design pattern

Tag shape

Prefix

Text displayed before each tag name

Exclude tags and matching method

Tags to hide and the matching condition

Priority tags and show priority tags only

Display order and which tags are displayed

Maximum width and alignment

Maximum tag list width and placement

Initial number of tags displayed and Show all button

Number of tags displayed initially and the expand button

Colors

Colors for the tag list, tags, and Show all button

Blog and collection pages also provide settings for tag-based filtering.

Setting

Description

Hide the clear-selection button

Clear button displayed on an active tag

Tag selection mode

Single or multiple selection

Selected-state colors

Colors for active tags and their clear buttons

On product pages, you can configure "Always filter the entire collection on collection pages." This controls whether selecting a tag targets the current collection or all products in the store.

See the following articles for requirements and setup steps.