Below are the Graphic and Image dimensions compatible with the Graphic Widget type in the AB Commerce platform. You must adhere to these requirements otherwise your site will not display or function properly.
We strongly recommend that you engage the services of a professional designer
if you do not have an in house designer.
KEY POINTS:
- Any flat graphics (for example, text on a solid background or logos) should be saved as .png files,
- Photographic imagery should always be .jpg
- Pixel width dimensions are exact (dimensions listed as Width x Height below)
- If using a tool like Canva, download artwork at full quality and optimise file size via Photoshop
- Don't use special characters or punctuation in your file names (e.g. Supersale20%Off!.jpg will fail upload)
- Unlike product photos which are uploaded at 100% quality, images being used in a feature widget must be optimised for web (compressed/reduced file size)
Download a sample set of graphics (280KB ZIP) >
FEATURE GRAPHIC SIZES & USES
A few examples are listed below, but there are other layouts and styles you may wish to use. You will have been provided with Photoshop templates for your own site at the time of go live. If you have any questions or need these files reshared, please contact helpdesk@magico.com for additional assistance.
A NOTE ON HEIGHTS
While heights are variable, please ensure that within a single widget container you use a consistent height. For example, if using a triple widget you would not have three graphics with different heights:
- Graphic 1: 600w x 300h pixels
- Graphic 2: 600w x 600h pixels
- Graphic 3: 600w x 400h pixels
You must select one height and use that. For example:
- Graphic 1: 600w x 400h pixels
- Graphic 2: 600w x 400h pixels
- Graphic 3: 600w x 400h pixels
Single widget (full-width)
| Suggested use | Width | Height | Notes |
| Primary features, graphic headings | 1830 pixels | 600 pixels* | File size should be around 80KB, and no more than 180KB. |
*The height is variable, a good size for a primary full width feature is around 600 pixels high as this allows prominence and the ability to keep file size within constraints.
Single widget (full-width banner style)
| Suggested use | Width | Height | Notes |
| Primary features, graphic headings | 1830 pixels | 150 pixels* | File size should be around 40KB, and no more than 80KB. |
*You can vary the height to anything needed, but a reasonable height for a banner/narrow graphic is 150px.
Double widget (half-width)
| Suggested use | Width | Height | Notes |
| Primary features, Secondary features | 915 pixels | 450 pixels* | File size should be around 50KB, and no more than 100KB. |
*As with single widgets you can vary the height depending on how important the graphic feature is.
Triple widget (third-width)
| Suggested use | Width | Height | Notes |
| Primary features, Secondary features | 600 pixels | 600 pixels* | File size should be around 50KB, and no more than 100KB. |
*These work well squared, but can be any height. As with single widgets you can vary the height depending on how important the graphic feature is.
Quadruple widget (quarter-width)
| Suggested use | Width | Height | Notes |
| Secondary features, Highlighted category or brand | 450 pixels | 450 pixels* | File size should be around 40KB, and no more than 80KB. |
*These work well squared, but can be any height. As with single widgets you can vary the height depending on how important the graphic feature is.
Six section widget
| Suggested use | Width | Height | Notes |
|
Featured category, Featured brand, Product range |
450 pixels | 450 pixels* | File size should be around 40KB, and no more than 80KB. |
*Again these can work well square, but you can vary the height.
Eight section widget
| Suggested use | Width | Height | Notes |
|
Brand logos, Featured category |
250 pixels | 250 pixels* | File size should be around 15KB, and no more than 30KB. Don't forget any flat graphics (not photos) should be saved as PNG files, this is almost always the case with logos. |
*Again these can work well square, but you can vary the height.
Twelve section widget
| Suggested use | Width | Height | Notes |
|
Brand logos |
250 pixels | 125 pixels* | File size should be around 10KB, and no more than 25KB. This widget is useful if you have many brands to feature |
*Again these can work well square, but you can vary the height.
Comments
0 comments
Please sign in to leave a comment.