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 norder 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 and how to test pages in the iOS Simulator.

Links & SpansiOS Simulator

© EverWeb Widgets -