Product Information

Product Image Sizes

The size options for all product images.

Examples

  • 40px x 40px
  • 60px x 60px
  • 80px x 80px
  • 100px x 100px
  • 120px x 120px
  • 150px x 150px
  • 200px x 200px (not available in colorized images)
  • 250px x 250px
  • 300px x 300px
  • 400px x 400px
  • 500px x 500px
  • 700px x 700px
  • 1400px x 1400px
  • 2000px x 2000px
Notes

Product Image Lookup: https://www.4imprint.com/Images/Lookup

Resources

Sass File(s)None Required
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time

Image Srcset

Serves the correct size image based on viewport size.

Examples

Confetti Stadium Cup
Confetti Stadium Cup®
Code
					
<a class="darkestLink show" href="/product/114238/Confetti-Stadium-Cup-17-oz" title="View the Confetti Stadium Cup">
	<img class="responsiveImg" loading="lazy" srcset="//cdna.4imprint.com/prod/250/404183.jpg 250w,
		//cdna.4imprint.com/prod/150/404183.jpg 150w,
		//cdna.4imprint.com/prod/300/404183.jpg 300w"
			sizes="(max-width: 400px) 250px,
				(max-width: 600px) 300px,
				(max-width: 800px) 150px,
				250px"
		src="//cdna.4imprint.com/prod/250/404183.jpg" alt="Confetti Stadium Cup">
	<figcaption class="textCenter">Confetti Stadium Cup<sup>®</sup></figcaption>
</a>
Code
					
<a class="darkestLink" href="/product/114238/Confetti-Stadium-Cup-17-oz" title="View the Confetti Stadium Cup">
	<picture>
		<img class="responsiveImg" srcset="//cdna.4imprint.com/prod/250/404183.jpg 250w,
			//cdna.4imprint.com/prod/150/404183.jpg 150w,
			//cdna.4imprint.com/prod/300/404183.jpg 300w"
			sizes="(max-width: 400px) 250px,
				(max-width: 600px) 300px,
				(max-width: 800px) 150px,
				250px"
		src="//cdna.4imprint.com/prod/250/404183.jpg" alt="Confetti Stadium Cup"  loading="lazy">
	</picture>
	<figcaption class="textCenter">Confetti Stadium Cup<sup>®</sup></figcaption>
</a>
Notes

If you are using webp images that need a jpg or png fallback, the picture element must be used.

After the image path is the image's inherent width in pixels: 250w - this uses the w unit, not px; This width should be the images real size.

Sizes defines a set of media conditions (screen widths) and indicates what image size would be best for the browser to choose.

The media condition is when the viewport width is 400 pixels or less (in this example).

After the media condition is the width of the area the image will fill when the media condition is true - 250px (in this example).

The last slot has no media condition. This is the default size that is chosen no other media conditions are true.

Resources

Sass File(s)None Required
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Product Layout

The layout for every product listed on the site.

Example

Hanes Authentic T-Shirt - Screen - Colors

Hanes Authentic T-Shirt - Screen - Colors

On Sale!

On sale from $4.95 to $9.89

Order as few as 18

Ships within 5 days.*

Item #6729-S-C

(4.6)

Notes

None at this time

Resources

Sass File(s)None Required
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time

Sale Box

Shown when a product is on sale.

Example

up to 15% off!

normally as low as $33.95

now as low as $31.25

Code
					
<div class="text16 marginTop10">
	 <fieldset>
        		<legend class="textSemiBold roundCorners3 text16 textWhite bkgdDkRed padding5 marginBtm5">up to 15% off!</legend>
        		<p calss="text14 textSemiBold"><span class="visually-hidden">Original price </span&l\gt;normally as low as $33.95</p>
        		<p class="text14 textSemiBold textDkRed"><span class="visually-hidden">Today's price </span>now as low as $31.25</p>
    	</fieldset>
</div>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time

Star Rating

Conveys the rating from customers on the product.

Example

(4.7)

Code
See main site VS file for reusable code snippet
/Views/Shared/_RatingsBarStandard.cshtml
Notes

Outter element must be a block element div.

Do not use a ul li for the stars.

Stars must be wrapped in an inline element; Inline is extremely important to keep the two sets of stars lining up correctly.

Resources

Sass File(s)/sass/components/_ratingstars2024.scss
JS File(s)/views/product/starrating/starrating24.js
JS FunctionsNone
Locale KeysNone

Accessibility

The HTML markup is very important for accessibility success.

The stars each have aria-hidden="true" and focusable="false"applied.

Following outer element, there must be the visually-hidden text that tells the screen reader the average star rating.

To Top