Compare feature settings

If compare block is not added on product detail page, we can mark the checkbox “Add to compare” on product cards and see pop-up block as on screenshot on every page.

How this pop-up works:

Customers mark the box of products they want to compare. After this appears a sticky pop-up with image, title and price of these products. Customers can add from 2 to 4 products to compare. To see detail info, Compare button should be clicked. Customers can also clear all products from the pop-up by clicking on the button “Clear All Products” or delete a certain product by cross in the product card.

At first, when we click on “Compare” button in the sticky pop-up, the view of related pop-up with information about chosen products will be empty.

That's why we need to add Compare feature through add section on product detail page in theme editor.

Beside section should be added related blocks.

Inside Compare section without customizable settings, but some blocks in this section have customizable settings.

When you add “Header” block, you will see product cards with image, title, and price. Header doesn't have customizable settings in theme editor as block, but it should be added for such view of products.

When “Header” is hidden or not added, we get a product information without product cards.

How the big pop-up works:

Customers can read characteristics about products added to compare. Customers can click on “View Product” button and visit the detail page of the one of products. Customers can also clear all products from the pop-up by clicking on the button “Clear All Products” or delete a certain product by cross in the product card.

Product characteristics

Settings	Description
Vendor block (Row title)	1) Enter vendor name on every product detail page and customer will see it later through this pop-up. 2) Add the Vendor block under Compare section. 3) Enter the name in Row title field: you can enter Vendor or another custom name for this field.
Product type (Row title)	1) Enter product type in the Product type field on every product detail page, and customer will see it later through this pop-up. 2) Add the Product type block under Compare section. 3) Enter the name in Row title field: you can enter Product type or another custom name for this field.
Product description (Row title)	1) Enter product description in the Product description rich text field on every product detail page, and customer will see it later through this pop-up. 2) Add the Product description block under Compare section. 3) Enter the name in Row title field: you can enter Product type or another custom name for this field.
Product SKU (Row title)	1) Enter product SKU in the SKU field on every product detail page. It can be added to the whole product without variant options or if the product has options, then to the first variant option to be visible in this pop-up. 2) Add the Product SKU block under Compare section. 3) Enter the name in Row title field: you can enter Product SKU or another custom name for this field.
Variant option:	Three variant option blocks can be added to the compare section. Create variant options on the product detail page. Enter the name in Row title field: you can enter Variant option, Product option, or another custom name for this field. Enter the same name of the Variant that you give to the Variant on the product detail page. For example, you create “Material” variant with options, then put the name “Material” in this field to display options in the pop-up.
Metafield	You can create metafield with additional product characteristics and fill it on every detail page, then add it through Connect Dynamic source. You can create a lof of metafield blocks. Each created metafield block is a new characteristic about the product. In Row title, give a name of each metafiled.

On product detail page find Description field, Product type and Vendor

Path: Shopify Dashboard/Products/Products detail page

Variants

Path: Shopify Dashboard/Products/Products detail page/Variants section/Add variant

Product SKU

Path: Shopify Dashboard/Products/Products detail page/Variants section/Group by/First Variant option

Metafield

How to add metafields read more in this article https://docs.muup.co/article/865-using-metafields-and-dynamic-sources or might be this article also useful for you in creating metafield https://docs.muup.co/article/1179-collapsible-row — find here title “To create content in such way, please follow the Creating metafield instruction” and read the detail description.