Instructions for Styling Commerce Product Text Badges

Any product in the Commerce Product Store now can have custom text added on top of the product image.  This upgrade must be enabled by the MatrixMaxx team (Contact Matrix for information!) and then the WWW display must be styled to work with your website.

Here is an example of what the text badges might look like, once styled:

Anyone who works with your stylesheets and stub pages can do this styling, whether that is the Matrix Services team or another vendor/resource.

Following are the styles you will need to add to your site to make it look correct.

.mx-product-detail #productImageOverlayTextFull, .mx-store-wrapper #productImageOverlayText {
  position: absolute;
  top: 25px;
  left: 0px;
  padding: 5px 25px;
  background-color: rgba(75,75,75,.8);
  color: #fdee71;
  text-transform: uppercase;
  font-size: .9em;
  font-weight: 700;
  font-style: italic;
}

You will also need to make sure the containing element is relatively positioned.

productImageOverlayText controls the look on the featured Products page. productImageOverlayTextFull controlls it on the product view page. The above styles have them look the same, but you may style them differently if you would like.