Tag Page (awoo Page)

✨ Preface

The Tag Page, also known as the awoo Page, serves as a landing page for a composed tag. This page not only displays products associated with the composed tag but also provides SEO-friendly Titles, Descriptions, and other essential information. Additionally, it offers another set of related composed tags for linking to more tag pages. Last, but not least, it includes the option of using the tag filtering feature, allowing users to refine their product results

On the tag page, it provides a maximum of 20 related composed tags. If you integrate via API, you can determine the sorting order of products and the number of products per page. If you integrate via SDK, please contact us for settings.

🫧 Tag Filter

The Tag Filter is a feature that offers a group of tags, enabling users to refine their product results. Since each base tag is linked to a specific attribute, it becomes convenient for you as a merchant to determine which attributes are significant for consumers as they explore tag pages.

⚙️ Tag Filter Settings

1️⃣ Go to Tag Filter -> Filter Settings -> Tag Settings

2️⃣ You will encounter a list of inactive attributes with none of the tags chosen. This step is mandatory, and you must choose base tags and enable attributes once you finish.

3️⃣ Assign tags to each attribute:

1. First, click on the edit icon to enter the tag selection view. Choose base tags from the left recommendation list, search for tags by typing in the search bar, or use the toggle to batch-select the top 100 tags. For each attribute, a maximum of 100 base tags can be chosen.
2. The numbers in parentheses (numbers) next to each tag represent the number of items associated with that tag. They are displayed in descending order.
3. You may rename the attribute. It will be displayed on the website.
4. Lastly, don't forget to enable the settings on the attribute list! You may do it later if you are planning.

⚙️ Pin Tags on a Specific Tag Page

From the user page view, you will see five recommended tags. By default, these five tags are the ones with the most products within this awoo Page. Alternatively, you have the option to select these five tags yourself.

1️⃣ Go to Tag Filter -> Filter Settings -> Pin Tags

2️⃣ First, click the "Add New Rule" button, then select a composed tag (awoo page). You may keep the tag in text form or add customized pictures to highlight each tag.

3️⃣ Once you choose a composed tag, you can select up to five tags from the list on the left, representing the awoo page you want to specify. Drag and drop to reorganize their order. Disabled tags with a triangle warning sign indicating not selected base tags in the Tag Settings.

4️⃣ In addition to plain text tags, you can enhance engagement by incorporating images. Select "Picture + text" option, and Select Image for each tag. You can either choose a picture directly from the product image or upload your situational images.

✏️ Defining Layouts and Styles for Tag Filter.

⚙️ Layout

In the layout settings, you can choose the expand direction of the filter list and the arrangement of tags within the list. Three positions available are left, right, and bottom. To prevent any impact on the existing visual setup of your website, all three expand directions are off-canvas. Furthermore, you can select between two types of tag arrangements: list form (vertical) or inline (in a row, wrapping to a new line when reaching the set width).

⚙️ Element Style

In the style settings, you can customize the display copy by renaming it and selecting a font that fits your website. Additionally, you have the flexibility to adjust the radius and border of the pinned tags. Furthermore, you can also determine the minimum and maximum number of tags under each attribute. If you choose to display a maximum of 20 tags in the attribute, it's advisable to include a 'View More' button underneath for better mobile user-friendliness.

🚧

Layout and style are only available with awoo SDK!

If you are obtaining filter data via API, you will need to configure the visual aspects yourself on your own interface or have an engineer do it. In such cases, all visual setting options will not function.