EverWeb Widgets

Sale Tag Product Grid

product tag grid 1
On Sale
Design Trophy$64$90

Low Stock - Order Now

product tag grid 2
Messenger Bag$249

Pre Order Only

product tag grid 3
Insulated Flask$39

Ampersand Logo

product tag grid 4
Organiser$149

Contents NOT Included

product tag grid 5
Mouse Pad$49

Premium Leather - Size XL

product tag grid 6
On Sale
Mug Set$120$149

Set of Six

Product Grid - Sale Tags

Each grid item has an image with alt text which can be configured as a link to internal or external pages and open in a new window if required.
NOTE: The images in this example are NOT hyperlinks.
The caption and price are inline and there is a paragraph below for more info.
A sale price can be indicated with a different color. When this is present, there is a checkbox to strike through the list price.
Items are added and their data entered as described below …

  • Crop all the images to the same size, give them file names with sequential numbers and store them in a folder.
  • Select all the images in the Finder folder and drag them all together and drop them onto the Assets List in the Widget Setting panel
  • Change the order of the images if required by dragging them up or down the list
  • Select the first image in the list, hit the Tab key and enter the alt text for the search engines
  • Tab again and enter the item description
  • Tab down and enter the price
  • If it is a sale item, check the box to strike through the price
  • Check the box next to "Display Sale Price"
  • Enter the sale price
  • Check the box to "Display Sale Tag"
  • Enter the tag text
  • Enter a relative or absolute file path into the URL box and check the box if it is to open in a new window

Responsive CSS Grid

The number of items per row can be set for each device type - computer, tablet landscape mode, tablet portrait mode and mobile phone.
The gap between the columns and rows can be adjusted as can the left/right padding. There is a Vertical Spacing control for adjusting the distance from the items above and below.
The grid items can have a border and/or a box shadow and the wrap background can be adjusted for background color and its opacity.
Links
The image links are set up by entering a relative file path for an internal link and an absolute file path for an external link. Follow the links below to find out about relative file paths.
Gallery
There is a gallery version of this widget which opens a lightbox slideshow when any grid image is clicked. It adds a CTA style link at the bottom of the grid item. Click the "Gallery" link below to see it.

File PathsTag Gallery

© EverWeb Widgets -