Option table with Metaobject and Metafield

Simplify product comparisons with an option table! This user-friendly interface provides clear visuals for effortless comparison, boosting customer confidence and potentially increasing conversions.

Click here to go to our demo

Metafields provide superior flexibility for comparison criteria, unlike product options that impacted store organization.

Metaobjects keep product information well-structured. For instance, imagine a cosmetics store using a table to showcase ingredients clearly. Metaobjects can store this data, while also allowing you to add images or icons for a more intuitive user experience, as seen in the demo above.

This approach streamlines setup and ensures consistency across your product range

REQUIREMENT

You must have Be Yours version 7.2.0. or later.

STEPS

Firstly, set up a Metaobject.

1. Creating a new Metaobject

   1. In Admin dashboard > Settings > Custom data > Add definition under Metaobject definitions

      

      

   2. The metaobject window requires three specific fields to be completed. Please follow the instructions below carefully.

      

      Note: While this example focuses on cosmetics with an "ingredients" Metaobject, you can customize the 'Name' and 'Description' to fit your specific product information.

      • Name ^[1] - Common ingredients

      • Description ^[2] - Common ingredients

      • 

      • Add field ^[3] - Choose Single line text and Files

        • Single line text: Complete three required actions:

          

          • Set the display name by entering Label in the "Name" field.
          • Enable "Use this as a display name."
          • Enable "Required field" as necessary

        • Files: Complete two required actions:

          

          • Set the display name by entering Icon in the "Name" field.
          • Under Accept specific files type, select Images only.

      • Then click Save to finish create a Metaobject.

   3. Once you create a Metaobject, you'll find it listed.

      

2. Add entry for Metaobject

   1. Go to Admin dashboard > Content ¹ > Metaobject ² > choose Common ingredients ³ > Add entry ⁴.

      

      

   2. Choose image for the icon and enter text for the label.

      

      Then click Save to fisnish add one entry.

      To add additional entries, simply repeat this steps.

   3. For example, we assigned 4 entries as the image below.

      

Secondly, set up a Metafield

1. Creating a new metafield

   1. In Admin dashboard > Settings > Custom data > Products under Metafield definitions > Add definition

      

      

   2. The metafield window requires three specific fields to be completed. Please follow the instructions below carefully.

      

      Note: While this example focuses on cosmetics with an "ingredients" Metafield, you can customize the 'Name' and 'Namespace and key' to fit your specific product information.

      • Name ^[1] - ingredients

      • Namespace and key ^[2] - custom.ingredients

      • 

      • Select type ^[3]

        • Type: Metaobject

        • Reference: Common ingredients

        • List of entry

        

      • Then click Save to finish create a Metafield.

   3. Once you create a Metafield, you'll find it listed.

      

2. Assign values for Metafield

   For illustration, we'll assign the values Retinol and Hyaluronic Acid to the metafield of the Anti-Aging Body Cream product.

   1. Go to Product > Anti-Aging Body Cream > locate ingredients under Metafield.

      

      

   2. In metafield ingredients, choose [Retinol] and [Hyaluronic Acid].

      

   3. Then click Save to finish.

Finally, set up the Option table section

1. Turn on the Option table section

   1. On the Themes page, choose Be Yours theme and click on the theme's button Customize.

      

   2. On Home page (or other page template) > Template section group > Add section > Click on the Option table.

      

   3. This Option table section is displayed prominently on your website with placeholder date as shown in the image below. Add up to 5 product blocks to showcase your favorites.

      

2. Set up the Option table section

   1. Setting up Option table section

      

      • To using Metafield, enter exactly the namespace and key of metafield in Criteria option.

        For manual table creation (without metafield), see this link..

      • For example, we enter custom.ingredients here.

        

   2. Setting up Product block

      

      • Choose a product, and select a custom image you want to display. For example, the 'Anti-Aging Body Cream' product.

        

      • This section can accommodate up to 5 products. In the example below, we're showcasing 4 products.

        

      • For optimal displaying, please ensure all product images have transparent backgrounds.

We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.