Use the data-alternate
attribute to add a product hover image.
To use the Swatches to switch the product images on hover and click, add a data-src
url on the swatchanchor
link element for the primary image and optionally a data-alternate
url for hover image.
Use the product-on-model
class to use the taller product image aspect ratio.
Add the data-scroll-activate
attribute and the script will swap a low quality src
attribute for the value in the data-src
attribute when the image is first shown in the viewport. Make sure you also remove the inline onload
event handler from the main <img>
as well.
Fireside Check Classic Murray Shirt
$98.50
product-grid-alternate-small
on the product-grid
element. This works for both the lay down and on-model versions.
Fireside Check Classic Murray Shirt
$98.50
These maximums are available in 2, 3, 4, 5, and 6 wide. Use the following classes instead of product-grid-fullwidth
:
product-grid-2-max
product-grid-3-max
product-grid-4-max
product-grid-5-max
product-grid-6-max
Or, if the design includes a rail, use the following classes instead of product-grid-with-rail
:
product-grid-with-rail-2-max
product-grid-with-rail-3-max
product-grid-with-rail-4-max
product-grid-with-rail-5-max
product-grid-with-rail-6-max