RuffRuff Tags Help Center

Configure with App Blocks (Regular Plan Only)

Available on the Regular Plan only.

App block settings let you apply different designs and behaviors to each page type (blogs, collections, products, blog posts). App block settings take priority over the settings page.

  1. Go to Shopify Admin → "Online Store" → "Themes" → "Customize"

  2. Navigate to the page you want to configure (blogs, collections, products, or blog posts)

  3. Click the "Tag list (Regular Plan)" app block to select it

  4. Change the settings in the right sidebar

  5. Click "Save"

Item

Description

Tag list title

Text displayed above the tag list

Design pattern

Choose from Plain Text, Rectangle, Round, or Underline Text

Prefix

Text displayed before the tag name

Exclude tags

Specify tags to hide from the tag list

Exclude tags matching type

Choose how excluded tags are matched

Priority tags

Tags to display at the top of the tag list

Show only priority tags

Show only priority tags

Set max width

Maximum width of the tag list (px)

Alignment

Align the tag list: Center, Left, or Right

Initial number of tags displayed

Number of tags to show initially

Show all button

Text for the button shown when tags exceed the initial count

Color | Tags (list)

Background, Border, Title

Color | Tag

Background, Border, Title, Prefix

Color | Show all button

Background, Border, Title

Item

Description

Hide deselection button

Hide the deselection button when a tag is selected

Tag selection mode

Switch between Single and Multiple selection

Color | Selected tag

Background, Border, Title, Prefix, Deselection button

Item

Description

Always set the narrowing range on the collection page to the entire collection

Configure the filtering scope when navigating from a collection page

Sets the title text displayed above the tag list. Leave blank if you do not need a title.

Choose the shape of your tags from the following 4 styles.

  • Plain Text: Text only, no background

  • Rectangle: Square-cornered tag

  • Round: Rounded-corner tag (default)

  • Underline Text: Text only with an underline

Text to be displayed before the tag name. For example, setting # will display tags as #Fashion. Leave blank to show only the tag name.

Hides the deselection button that appears when a tag is selected.

Configure the behavior when a tag is clicked.

  • Single: Selecting a new tag replaces the previous selection (default)

  • Multiple: Select multiple tags to filter for content that has all selected tags

Specifies tags to hide from the tag list. If there are multiple tags you wish to exclude, please enter them on a new line.

Choose how to match the tags listed in "Exclude tags" against the tags on your products or articles.

  • Exact match: Excludes only tags that match exactly (default)

  • Prefix match (starts with): Excludes tags that start with the specified text

  • Suffix match (ends with): Excludes tags that end with the specified text

  • Partial match (contains): Excludes tags that contain the specified text

Specifies tags to display at the top of the tag list. If there are multiple priority tags, please enter them on a new line. Tags are displayed first in the specified order.

When enabled, only the tags listed in "Priority tags" are displayed. If no priority tags are set, all tags are shown.

Sets the maximum width of the tag list in pixels. Leave blank if not needed.

Sets the horizontal alignment of the tag list.

  • Center (default)

  • Left

  • Right

Tags are displayed up to the number you enter. Tags beyond this count are hidden and can be revealed by clicking the Show all button. Leave blank to show all tags.

The button that appears when the number of tags exceeds the initial count. Displayed when the number of tags exceeds the initial count. The default text is "Show all."

Sets the filtering scope when a tag is clicked on a product page to filter collections.

  • Enabled: Always filters by all collections (/collections/all).

  • Disabled (default): If the product page URL is in the format /collections/{collection-handle}/products/{product-handle}, filtering is scoped to that collection (/collections/{collection-handle}). Otherwise, all collections (/collections/all) are used.

Set colors for the tag list, tags, and selected tags individually.

Section

Available colors

Tags (list)

Background, Border, Title

Tag

Background, Border, Title, Prefix

Selected tag (Blogs and Collections only)

Background, Border, Title, Prefix, Deselection button

Show all button

Background, Border, Title

Setting

Blogs

Collections

Products

Blog posts

Title

Design pattern

Prefix

Hide deselection button

Tag selection mode

Exclude tags

Exclude tags matching type

Priority tags

Show only priority tags

Set max width

Alignment

Initial number of tags displayed

Show all button

Always set the narrowing range on the collection page to the entire collection

Color | Tags (list)

Color | Tag

Color | Selected tag

Color | Show all button

Blogs and collection pages filter content on the same page when a tag is clicked, so settings for the selected state of tags are available. On product and blog post pages, clicking a tag navigates to a new page, so selected state settings are not available.

Which takes priority — the app block settings or the customization page settings?

The app block settings take priority. On pages where an app block is placed, the customization page settings are overridden.

What if my settings are not reflected in the tag list?

After saving, your browser may be serving a cached version of the page. Try a hard reload (Cmd+Shift+R on Mac / Ctrl+Shift+R on Windows). For more details, see [Settings Changes Not Reflected in the Tag List].