Below are the Graphic and Image dimensions compatible with the AB Commerce platform. Additionally there are some notes on optimising file size. 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. If you have any questions 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 dimensions of:
- 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.
OPTIMISING FILE SIZE
Ideally you will be aiming for the smallest file size possible while maintaining the quality of the image. Some images will get end up with very small file sizes, while others may be close to the limit even with a good bit of compression. This simply depends on the complexity of the image.
The best tool for managing file size is Photoshop, so even if using other tools (e.g. Canva) to create graphics, you should do your optimising in Photoshop where possible. Of course if you are creating via Photoshop, you can follow the export step only.
Download from Canva
If you are using Canva then the best option is to export your artwork from there at 100% quality - either the PNG or PDF Print:
Exporting from Photoshop (recommended)
If you are using Photoshop, then open the image downloaded from Canva. Select File > Export > Export As, not Save As. You can then select between PNG or JPG.
For PNG you'll want to tick the Smaller File Size box, and for JPG you can have a play with the quality options keeping an eye on the preview and file size:
Usually between Fair and Very Good will work best. Sometimes you'll be able to get away with Poor too. This name is unfortunate as it doesn't necessarily mean your image will be poor. Once you are happy with everything, click the Export button.
You can now upload this optimised image to AB Commerce.
Saving from Pixlr
Alternatively, you can use Pixlr Editor https://pixlr.com/e/ - free online tool and not quite as robust as Photoshop. Pixlr only really suits Save As JPG as it offers no settings re: PNG. Also, Pixlr won't open PDF files.
Open your image in Pixlr, then select File > Save. JPG is the default, and you can see there is a slider to adjust quality, and this will alter your file size. There aren't really any options for PNG:
Once you are happy with everything click the Save As button.
You can now upload this optimised image to AB Commerce.
Comments
0 comments
Please sign in to leave a comment.