The majority of images within the Avenue theme take the width into consideration and will accommodate a variety of heights.
In this section...
- Logo
- Banners, Backgrounds & Slideshows
- Image with Text plus Overlay
- Product Images
- Blogs
- Theme Setting: Product Grids and Rows > Swatches
- Theme Setting: General > Gift Card
- Theme Setting: Favicon
- Theme Setting: Checkout
- Logo List
- Footer
Logo
When possible, it is always best practice to use a SVG or PNG file for your logos. JPEG may reduce file size, but they will also reduce clarity and you want your brand looking sharp.
It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp. The slider provides a minimum of 40px wide to a max of 250px with 10px steps in between.
The overall height of your logo will determine the height of your Header Navigation to the right.
Banners, Backgrounds & Slideshows
There are 2 slideshow sections & banner images can be found in various sections, collections, products, pages and templates like customer log in.
Width
The banner image has the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:
Setting
Desktop Width
Minimum Image Width
Full width checked
100%
1900px
Full width unchecked
1180px
1180px
Height
The overall height of the banner in relation to the height of the screen. 0-5% is the minimum, and it steps up by 5 to a maximum of 100%.
The height will determine the overall width of the background image. The following would be used to determine the actual necessary width of an image:
Screen Width x Height x Image Ratio = Desired Width
Image with Text/Overlay
The design is based on a 12 column, 1180px wide layout. Image sizes will depend on whether you opt to use a stand alone (default) or background image. Background images will use the image width as the default due to the Height of the section.
Refer to the following table to reference section settings & optimal image sizing:
Use slider for blocks
Setting
Desktop Width
Mobile Width
2
880px
510px
3
460px
300px
4
330px
210px
5
250px
160px
Block container width
Setting
Minimum Image Width
16.5%
580px
25%
580px
33%
580px
50%
580px
66%
880px
75%
880px
87.5%
1180px
100%
1180px
Product Images
To provide a good zoom but keep file sizes low, it is recommended to to use an image with a minimum of 1160px width
Blogs
Post Featured Image
The article featured image is used on the blog category page. The lead article background image dimensions depend on 2 options:
- Whether the Blogs Settings is full width or container width
- The height will depend on your Blogs Settings 'Height' settings
Setting
Desktop Width
Minimum Image Width
Full width checked
100%
1900px
Full width unchecked
1180px
1180px
Post Content Image
Max width of 1180px
Theme Setting: Product Grids and Rows > Swatches
Custom images should be 140px PNG's for the 'Magnified' setting & 72px for standard
General > Gift Card
580px
Favicon
32px
Checkout
Banner
1000 x 400px
Logo
There are 3 sizes available, each with a max height:
- Small: 40px
- Medium: 60px
- Large: 80px
Logo List
When possible, it is always best practice to use a SVG or PNG file for your logos. JPEG may reduce file size, but they will also reduce clarity and you want your brand looking sharp.
It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp. The slider provides a minimum of 40px wide to a max of 250px with 10px steps in between.
Footer
The design is based on a 12 column, 1200px wide layout:
Setting
Minimum Image Width
16.5%
580px
25%
580px
33%
580px
50%
580px
66%
880px
75%
880px
87.5%
1180px
100%
1180px