Add flags to the category product list display in Shadows for sale, discount, new, etc...

Styles: position, top, right, etc, places the flag in the element

<style>
.flag-discount {
	   border-radius: 6px 0 0 6px;		
		display: block;
		float: left;
		padding: 10px 20px;		
	   font-weight: 400;
	position: absolute; 
	top: 3em; 
	right: 0; 
	font-size: 1em;
}
.flag-discount::before,
.flag-discount::after {
	content: "";
	position: absolute;
	left: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	display: block;
}
.flag-discount::before {
	top: 0;
	border-width: 22px 15px 0 0;
}
.flag-discount::after {
	bottom: 0;
	border-width: 0 15px 22px 0;
}
.flag-sale {
	color: #fff;
	background: orange;
	width: 100px; 
	height: 40px; 
}
.flag-sale::before {
	border-color:  orange transparent transparent transparent;
}
.flag-sale::after {
	border-color: transparent transparent orange  transparent;
}
.flag-new {
	color: #fff;
	background: green;
	width: 100px; 
	height: 40px; 
}
.flag-new::before {
	border-color:  green transparent transparent transparent;
}
.flag-new::after {
		border-color: transparent transparent green transparent;
}
.flag-rec {
	color: #fff;
	background: green;
	width: 200px; 
	height: 40px; 
}
.flag-rec::before {
	border-color:  green transparent transparent transparent;
}
.flag-rec::after {
	border-color: transparent transparent green transparent;
}
</style>

flag-rec is for recommended products, flag-new is for new products, and flag-sale is for sale products. Easy enough to add, remove, edit...

HTML: This one has sale flag based on a custom field but the logic can easily be changed to check for difference in cost or whatever.

First we set up the conditions for the flag class and text. Efficient way to set the flag if the product has one.

<section class="x-product-list u-text-center">

<mvt:foreach iterator="product" array="category_listing:products">

<mvt:comment>
#
# set up custom field stuff for flags, msrp, etc
# In this case it's custom fields but you could check product data or any other conditions to do this part
#
</mvt:comment>
		<mvt:assign name="l.settings:product_flag" value="l.settings:product:customfield_values:customfields:product_flag" />
		<mvt:assign name="l.settings:product_msrp" value="l.settings:product:customfield_values:customfields:msrp" />		  
		  
		<mvt:if expr="l.settings:product_flag">
			<mvt:if expr="l.settings:product_flag EQ 'NEW'">
				<mvt:assign name="l.settings:flag_class" value="'flag-new'" />
				<mvt:assign name="l.settings:flag_text" value="'NEW'" />
			<mvt:elseif expr="l.settings:product_flag EQ 'SALE'">
				<mvt:assign name="l.settings:flag_class" value="'flag-sale'" />
				<mvt:assign name="l.settings:flag_text" value="'SALE'" />
			<mvt:elseif expr="l.settings:product_flag EQ 'RECOMMENDED'">
				<mvt:assign name="l.settings:flag_class" value="'flag-rec'" />
				<mvt:assign name="l.settings:flag_text" value="'WCS RECCOMENDS'" />
			</mvt:if>
		<mvt:else>
			<mvt:assign name="l.settings:flag_class" value="''" />
			<mvt:assign name="l.settings:flag_text" value="''" />
		</mvt:if>

		<div class="x-product-list__item">
			<figure class="x-product-list__figure">

<mvt:comment>
#
# display the flag
#
</mvt:comment>

				<mvt:if expr="l.settings:flag_class">
					<span class="flag-discount &mvt:flag_class;">&mvt:flag_text;</span>
				</mvt:if>						
						
				.....

			</figure>
			.....
		</div>
........
</mvt:foreach>