product flag in CTGY Page

[kitdang]

Matt,

I like to incorporate a little "sales" or "new" flag overlaying the product image in the CTGY page. I know I've seen this in other theme. Is there a quick how to for this feature?

From a style perspective, I like to have a rectangle either on the upper left of the image or a bar across the bottom.

Thanks

[Matt Zimmermann]

As a starting point, create a custom product field named Product Label using the code product_label ; I would recommending using a drop-down, but text input would be fine as well. Then, enable the custom field on the category page and modify your layout code to something like this:

<div class="o-layout__item u-text-center x-product-list__item">
    <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:product_label AND l.settings:product:customfield_values:customfields:product_label NE 'none'">
        <span class="x-product-label u-bg-black u-color-white u-font-tiny u-text-uppercase">&mvt:product:customfield_values:customfields:product_label;</span>
    </mvt:if>

In your theme-styles.css file, add this:

.x-product-list__item {
    position: relative;
}

.x-product-label {
    display: inline-block;
    padding: 0.125em 3.5em;
    position: absolute;
    top: 2em;
    right: 2.5em;
    user-select: none;
}

[kitdang]

Thank you Matt!! That will help me get started.