Circle Stamps CSS for featured products/stock

Add the style code below to your content.css stylesheet file. This code is provided as-is and may not work on all templates so if there are any issues remove the code to revert. This code can be tweaked to your template or applied on your behalf for a fee please contact support.

By putting the code in your content.css stylesheet the code will remain if you change themes. If you change to a theme that has existing stamps you may need to remove this custom code if there are issues. No free support is offered to resolve issues related to the code, or any modifications made.

Out of Stock / Back Order settings

Out of stock will show if stock = 0. Back Order will show if stock = 0 and back orders are allowed.

Promotion Settings Required

To set the promotion tags (new/feat/sale/hot) choose a promotion status.

Setting a product to a template promotion e.g  TEMPLATE ON SALE will apply the class .cmsFeaturedProduct_OnSale to the product.

Setting a product to a homepage promotion e.g  HOME PAGE - ON SALE will apply the class .cmsFeaturedProduct_HomePageOnSale to the product.

Setting stamps on the homepage featured content or sliders

To add stamps to the homepage featured items or featured items sliders add the css section FEATURED STAMPS css. Otherwise leave out.

STYLE CODE BELOW:

You can change the text shown via the CONTENT RULE. Note different css styling might be needed to contain the text added.

/*-------------------------------------
STAMPS
--------------------------------------*/

.cmsFeaturedProduct_OnSale .cmsImage:before,
.cmsFeaturedProduct_HomePageOnSale .cmsImage:before {content: "SALE";}

.cmsFeaturedProduct_NewItem .cmsImage:before,
.cmsFeaturedProduct_HomePageNewProducts .cmsImage:before {content:"NEW";}

.cmsFeaturedProduct_BestSeller .cmsImage:before,
.cmsFeaturedProduct_HomePageBestSeller .cmsImage:before {content:"HOT";}

.cmsFeaturedProduct_Featured .cmsImage:before,
.cmsFeaturedProduct_HomePageFeatured .cmsImage:before{content:"LOOK";}

.AvailabilityOutOfStock .cmsImage:before{content:"SOLD OUT";}
.AvailabilityBackOrder .cmsImage:before{ content: "BACK ORDER"; }

.cmsFeaturedProduct .cmsImage:before,
.featuredProduct .cmsImage:before,
.AvailabilityOutOfStock .cmsImage:before,
.featuredProductStamp_On_Sale,
.featuredProductStamp_New_Item,
.featuredProductStamp_Best_Seller
{

position: absolute;
right: 0.5rem;
top: 0.5rem;
z-index: 3;
height: 50px;
width: 50px;
text-transform: uppercase;
color: [WSCOL_PAGE];
background-color: [WSCOL_THEME_PRIMARY];
opacity: 1;
font-size: 0.85rem;
font-weight: 500;
text-align: center;
display: FLEX;
align-items: center;
justify-content: center;
border-radius: 50px;
line-height: 1;
}

/*-------------------------------------
FEATURED STAMPS
--------------------------------------*/

.featuredProduct_Home_Page_-_Best_Seller .cmsImage:before{content: "HOT";}
.featuredProduct_Home_Page_-_Featured .cmsImage:before{content: "LOOK";}
.featuredProduct_Home_Page_-_On_Sale .cmsImage:before{content: "SALE";}
.featuredProduct_Home_Page_-_New_Products .cmsImage:before{content:"NEW";}