How to setup Product Icons

This article demonstrates how to setup Product Icons step-by-step.

There are main steps below:

1. Create and add entry [Metaobject] Product spec

   1. Creating [Metaobject] Product spec

      In Admin dashboard > Setup icon^[1] > Custom data^[2] > Add definition^[3] under Metaobject definitions field.

      

      After these clicking, the Add metaobject definition window will appear. You must enter exactly as the below instructions for the function work correctly, even the up:

      

      • Name^[4] - enter Product spec

      • Fields^[5] - click Add field, the goal is to add three fields named: Title, Description, and Icon.

        

        As shown in the image above, the 'Single line text' type is used for the Title and Description, while 'File' is used for the Icon. Configure these three fields according to the table below:

        Title	Description	Icon
        Name - enter Title Choose One value type.	Name - enter Description Choose One value type.	Name - enter Icon Choose One file type. Choose Accept specific file types > Images.

      After these settings, you'll get the Product spec Metaobject with the following information:

      

   2. Adding entry for [Metaobject] Product spec

      Go to Admin dashboard > Content^[6] > Metaobject^[7] > Product spec^[8] > in Entries from: Product spec window click Add entry^[9]

      

      The Add Product Spec window will appear. For example, for USB-C, the settings are shown in the following image:

      

      • Icon - select the image
      • Title - enter text for the 'Title'
      • Description - enter text for the 'Description'

      Follow the same process, just Add entry and insert the required information for any tech spec entries you want to add.

2. Create [Metafield] Product icons

   1. Create [Metafield] Product icons

      In Admin dashboard > Setup icon^[1] > Custom data^[2] > Products^[3] > Add definition^[4].

      

      After these clicking, the Add product metafield definition window will appear.

      

      You must enter exactly as the below instructions for the function work correctly, even the up:

      • Name^[5] - Product icons

      • Namespace and key^[6] - custom.product_icons for referrence.

        Note:

        Here, you may enter any namespace and key, but it must exactly match the value in [Metafield], via Them settings > Product titles > Icon list > Metafield.

        

      • Select type^[7] > Metaobject, then:

        Reference - choose Product spec

        choose List entry

      After this step set up, you'll get the Metafield Product icons with these settings:

      

   2. Assign the Product icons [Metafield] to the desired product

      • Go to the desired product settings. For instance, Flow Harmony Liz product:

        In Admin dashboard > PProducts^[8] > Flow Harmony Liz^[9] product > scroll down to [Metafields] and click on Product icons ^[10

        

      • When you click on the 'Product icons' metafield, a list^[11] will appear containing the entries you added to the previous metaobject.

        Choose the desired ones^[12] you want to display

        

      • Click Save

3. Setup [Block] Icon list

   • In Admin dashboard > Online Store^[1] > Themes^[2] > Customize^[3] of Concept theme.

     

   • Go to Sections^[4] settings of product. For this eample, we'll go with [Flow Harmony Liz] product as an example.

     Under Product information^[5] > Add block^[6] > create Icon list^[7].

     

   • This block automatically connects to the Metafield [Product icons] you setup previously. This means the product icons will automatically appear after enabling this block.

     

     Block settings:

     • Heading - enter text for block heading.
     • Enable carousel on desktop - Toggle this option on or off, depending on your needs.
     • Show below media - Toggle this option on or off, depending on your needs.

   • Click Save to finish.

4. Icon List Settings: Affecting Collection Page

   This part is about: Icon list setup impacts the display of Product cards in the Collection page.

   In Theme customize > Theme settings > Product titles > Icon list.

   

   • Show Icon list - Toggle to on/of the Icon list block.
   • Maximum icons to show - Adjust to show the number of icon in each product card.
   • Enable carousel on desktop - Toggle to on/of carousel on desktop (Icons slide on hover).

That's all about the settings of product icons.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support guys via our Ticket System for assistance within 8 hours.

Scan the QR code below to join our WhatsApp community for updates, news, and announcements.