How to create sub collections?

This guide demonstrates how to configure subcollections on Collection page, replicating the functionality showcased in the example video.

Hovering over submenu titles will reveal corresponding images. This setup leverages the metafield name ... structure within the Admin panel.

 

1. Begin by creating a Sub menu. This will serve as the container for your subcollections.

2. Next, configure the metafield setting. This step is crucial for enabling the image to appear when users hover over the submenu title.

Creating a Sub menu

    1. Go to Online store > Navigation, then create a new menu. In this menu, you create the structure of your own collections as you want. For example, this is what we made in our demo:

Please note that every menu item in this menu must be linked to a collection:

  1. Within the theme editor, go to Collection page > Product grid section > Subcollections block > Select menu > choose the menu have just created as the above example Subcollections.

  2. The sub-collection should now be displayed:

Configure the metafield setting.

    1. First, creating a new metafield. This metafield will be displayed in all collections.

      In the Admin dashboard > Settings > Custom data > Collections > Add definition.

      Please follow these precise instructions for setting up this new metafield:

      • Name - Thumbnail

        Namespace and key - theme.thumbnail

      • Type - choose File, then One file.

        Validations - choose Image. Supported file formats are JPEG, PNG, WEBP, SVG, HEIC, and GIF. File size must be under 20 MB.

      Completing the above steps results in the creation of a new metafield named 'Thumbnail'.

    2. Assign an image to the 'Thumbnail' metafield associated with the desired collection. This image will be displayed when hovering over the relevant menu item.

      For instance, let's use the 'Headphones' collection as an example.

      • In Admin dashboard > Products > Collections > choose Headphones collection.

      • In Headphones collection, scroll down and click View all in 'Metafields'.

        Click Thumbnail > choose an image.

        Finally, click Save to finish.

Following these steps will display the selected image when hovering over the 'Headphones' collection. You can repeat the Assign image process for your desired collections.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, don't hesitate to reach out to Roartheme's support team for expert guidance.

Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp

Back to Concept Support