Categories by BTP provides you with several settings that can help customize the way the app works for you. These settings may seem daunting at first, but they provide functionality that will ultimately speed up your category creation process. All of these settings are available through the Settings tab and are elaborated below.
This section allows you to select how your categories appear in your storefront.
With the sidebar style, your categories will display in a vertical fashion. This style works best with these that allow for a sidebar. Your tree will appear similar to the screenshot below.
With the top menu style, your categories will look and behave like a standard horizontal navigation menu. This is suitable for spanning the width of the entire page and works best at the top of your store. It will appear similar to the screenshot below.
With the super button style, your categories will expand from a single button. This is suitable for minimalist themes when you don't want your entire tree displayed at once. It will appear similar to the screenshot below.
Attach to Element
With the attach to element style, your categories will expand from any element of your choosing. This is best used when you want to present the users with your category tree when they hover over a link in your existing navigation bar. The element you choose will need to be given the following class:
With this option enabled, any collection that is a part of your category hierarchy will have two additional tags added to the list of their conditions. These two tags have slight differences in their purpose as outlined below and can be viewed for each collection either on the collection's edit page within Shopify or by clicking the View Category Tags button on the collection within the app.
Please note that upon adding these tags, the collections will also be set to include products that match ANY of the listed conditions. This does not make a difference for new collections created through this app, but may have undesired effects when using it in conjunction with existing collections that contain multiple conditions set to include products that match all of them. The app will warn you if this is the case for any collection you add.
This tag will follow the format btpcat_main_<id> where <id> is the id of the collection itself. When this tag is present on a product, it will not only appear within the collection, but visiting the product's page will also provide breadcrumbs back to that collection when using the btp-categories-productbreadcrumbs snippet for your breadcrumbs. Use this tag on products that actually belong in a category.
Please note for the breadcrumbs to behave correctly, there should only be one main tag present on any one product.
This tag will follow the format btpcat_other_<id> where <id> is the id of the collection itself. When this tag is present on a product, the product will appear within the collection with no impact on the breadcrumbs of the product. Use this tag on products that you want featured in a category that isn't the same as their usual main category.
Update Handle to Match Hierarchies
With this option enabled, any collection that is a part of your category hierarchy will have their handles updated every time you change their hierarchical position. The new handles will include their parents' handles as well. This can help with your categories' SEO since it will include its hierarchy in its URL.
For example, assume you have a collection named Office with the handle office. Adding this collection as a subcategory to Microsoft with the handle microsoft will cause the handle to change from office to microsoft-office.
This option will automatically create a 301 redirect from the old URL to the new URL.
Update Collection Titles
With this option enabled, any collection that is a part of your category hierarchy will have their titles updated every time you change their hierarchical position. The new title will include the title of their parents' separated by the value in the Title Delimiter box. This can help with your categories' SEO since it will include the entire hierarchy in the title.
For example, assume you have a collection named Office. Adding this collection as a subcategory to Microsoft with the title delimiter set to " > " will cause the title to change from Office to Microsoft > Office.
If you ever change your mind and would like to remove the parents' names from their children, click on the Clean titles button.
As the name suggests, this section contains features that are for more advanced users. Tread lightly!
Copy Tree to Other Theme
As mentioned in another article, the categories defined in this app are stored within your selected theme. If you change your theme and would like to transfer your tree from your old theme, this feature allows you to do so easily. Just select your old theme in the Copy from box and your new theme in the Copy to box and click Copy!
Storefront Tree Generation Snippet
Every time you deploy your categories, we generate the HTML structure that defines your tree and save it in the btp-categories-tree snippet. If you ever need to customize the layout of this HTML, this is the place to do it. Bear in mind that this is a complex process and might not be easy to understand at first. If you are simply looking to change the style of your tree or anything that can be done via CSS, we recommend doing so in a separate CSS document and including it in your theme.
These tags can be placed anywhere and anything placed within them will only appear during the first pass of the data and will not be repeated for subsequent iterations.
Anything placed within these tags will be repeated for each iteration of sibling nodes.
This tag can only be placed within <%REPEAT_START%>...<%REPEAT_END%> and it causes the entire snippet to be repeated for each node's children recursively.
This tag can only be placed within <%REPEAT_START%>...<%REPEAT_END%> and it outputs anything inside of it only if the current node has children.
This tag can only be placed within <%REPEAT_START%>...<%REPEAT_END%> and it will be replaced with collections['my-category-handle'] liquid code. For example, <%COLLECTION%>.id would be transformed to collections['my-category-handle'].id in the generated snippet.
This tag can only be placed within <%REPEAT_START%>...<%REPEAT_END%> and it will be replaced with the title of the collection. This will remove parent names from the current collection if you are using the setting to automatically update titles to match hierarchy.