Enable labels - the setting is responsible for whether labels (badges/tags) will be shown on the product card. For the label to be displayed, a tag must be added to the product, for example, label_new is the base label that will display NEW with the base color. To change the type of a label, you need to add a :type, such as label__new:primary or label__new:secondary. The number of displayed labels is limited to 3, as well as a soldout label in case the product is not available;
For each type of label, there are color settings. This way you can change the color for the label text: primary, secondary, base, soldout;
The background is specified for each label;
The border color is specified for each label;
Background transparency is specified for each label using a range step range of 10%. The minimum value is 10% and the maximum is 100%.
You can add image labels, like this:
To do this you need add a metafield to the product.
Go to the Admin panel / Settings/ Custom data
Select “Products” metafield:
Click “Add definition” button:
Create a metafield with “Badge image” name. Check the “Namespace and key” is "custom.badge_image”. Choose the “File” type, “List of values” and accept only the images.
You can add a MAXIMUM 3 logo images.
Show vendor - the setting is responsible for showing/hiding the product vendor;
SKU text - the setting is responsible for show a SKU of the product;
Enable quick view - the setting is responsible for enabling/disabling quick view. Otherwise, the user will need to go to the product to see other options and add to the cart;
Quick view button type - the setting is responsible for the appearance of the quick view button;
Show currency code - setting responsible for whether the currency code will be shown;
Enable image change on hover - the setting is responsible for whether the second image (video) will be shown on hover. By default the second product image will be used for the hover. To add an image (video), you need to add the product_card.hover_image metafield, where product_card is the namespace and hover_image is the field name. The Content type must be a file.
If color swatches are disabled, then you need to add this field only to the product;
If color swatches are enabled, you must also add this field to the variant;
If color swatches are enabled and other options are present, for example, size, material, etc., then you need to add an image only to the first variant of each color.
Image aspect ratio - aspect ratio of the image. Can be “Square” or “Portrait”.
Object fit image - the setting is responsible for stretching the image. If Cover(default) is selected - the image will take all the space available for it, that is, it will stretch as much as possible, and if Contain - it will retain its proportions.
Quick buttons background - setting allows you to specify the background color of quick buttons;
Quick buttons border color - setting allows you to specify the border color of quick buttons;
Quick buttons color - setting allows you to specify the icon color of quick buttons.
Text - the setting allows you to set the color of the button text;
Background - the setting allows you to set the color of the button background color;
Border - the setting allows you to set the color of the button border color;
Text (hover) - the setting allows you to set the color of the button text on hover;
Background (hover) - the setting allows you to set the color of the button background color on hover;
Border (hover) - the setting allows you to set the color of the button border color on hover.
Color swatch settings. Color swatches depend on the Color option. The name of the color is split, and the last word is taken and substituted into the CSS palette. There is a chance that this color will not be in the CSS palette, then it will just be a white swatch. In this case, you must add an image to Shopify files of 50*50 px size in .png format with the swatch- prefix. For example, the image name for banana-yellow would be swatch-banana-yellow.png.
Color swatch settings. For example, if a user has a purely German store, whose color option is called - Farbe, thus the user will need to specify the name in the swatch option setting. The default value is Color.
Labels settings. For the label to be displayed, a tag must be added to the product, for example, label_new is the base label that will display NEW with the base color. To change the type of a label, you need to add a :type, such as label__new:primary or label__new:secondary. The number of displayed labels is limited to 3, as well as a soldout label in case the product is not available. Also you can add a 3 images label with metafields.
The second image is on hover settings. To add an image, you need to add the product_card.hover_image metafield, where product_card is the namespace and hover_image is the field name. The Content type must be a file, where only one file is allowed, namely an image.
If color swatches are disabled, then you need to add this field only to the product;
If color swatches are enabled, you must also add this field to the variant;
If color swatches are enabled and other options are present, such as size, material, etc., then you only need to add an image to the first variant of each color.
You can add an extra information about the product:
To do this you need to add a metafield to the product. Add to the product a metafield with a name “Extra properties”. Check the “Namespace and key” is "custom.extra_properties”. Choose the “Single line text” type, “List of values”.
Wrap a name of the property to the <span> tag. Example: <span>DIsplay type</span> OLED.
See the example in the screenshot:
