How to find these settings...
- Online Store
- Customize (Theme Editor)
- Top, middle dropdown
- Collections
- Pick a collection template
- Collection pages
Recommended reading
- Set a focal point on a theme image
- Collections
- Menus and links
- Theme Settings Sub Collections
- Transfers from suppliers
In this section...
Banner
Enable heading *
To accommodate customizations using other sections and headings, you can opt to exclude the default heading
Heading
Title of the section or page, either default or custom
Use h1 tag
For SEO purposes, set the 'Heading' to use an h1 tag. NOTE: This should only be used once per page
Heading size
Set the heading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Subheading
Secondary title of the section or feature
Subheading size
Set the subheading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Text *
A text block for basic formatting including bold, italic & linked text
Text color
Choose a custom color for the text
Text hover color *
Choose a custom color for links when hovered over
Button text color *
Choose a custom color for the default button text and the outlined button hover text
Text alignment
Text can be aligned to the left, right or centered to the container
Content width
The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths:
Setting
Desktop Width
Mobile Width
33%
380px
100%
50%
580px
100%
66%
780px
100%
75%
800px
100%
Horizontal position
After setting the content width, content can be aligned to the left, right or centered
Vertical position
After setting the content width, content can be aligned to the top, bottom or middle
Desktop/Mobile/Custom Image
The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to 'Full width' below
- The height will depend on your 'Height' settings below
Full width
The banner image and background color have 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 Desktop/Mobile Width
Full width checked
100%
1900px/600px
Full width unchecked
1180px
1180px/600px
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
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%.
Some sections may have Desktop & Mobile options:
- Desktop: Used on screens larger than 768px
- Mobile: Used on screens smaller than 768px
Overlay color
A color may be applied to background images to help the text clarity
Overlay gradient
A gradient may be applied to background images to help the text clarity
Overlay opacity
When an 'Overlay' color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 5 to a maximum of 100%
* May not be available in all Banners
Text over image
The collection title may be displayed over the image & background color or below the image, pagination, breadcrumbs, & sorting options.
- Image available: If unchecked, the title will appear above the product list
- No image available or 'Show collection image' unchecked: The background color will be displayed. Unchecking this option turns off the background color, and leaves the title at the top
Show collection image
If a collection image is available, you can choose to display it. If an image is not available, you can set the Background Color below. The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to Full width above
- The height will depend on your Height settings above
NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points
Image position
Not all images can have a Focal Points assigned, so this will set one for the default collection image
Sub Collections
Unlike other e-commerce content management systems, Shopify does not have a method of creating sub-collections. Avenue achieves this by using Navigation menus to relate collections.
Show sub collections
After creating your menu of collections, you can choose whether to display the sub-collections at the top of the page. REMEMBER: You can only use a collection link once!
Collections per row
Select how many collections to display per row from 2-5. 2 is the minimum, and the slider steps up by 1 to a maximum of 5
Show first product image
If a collection has a featured image, by default this image will be displayed. You can override the default and choose to display the first product image.
Enable square image (1:1) formatting
The image container will be squared and the image will fit proportionally regardless of the width or height
Heading size
Set the collection title size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 48px
Use slider for sub collections
Enable a slider for the sub collections. If left disabled, the sub collections will remain in a grid
Options
Show description
The collection description has 3 options:
- Above products: The description will display above the product grid, row or form
- Below products: The description will display below the product grid, row or form
- None: The description will not be displayed
Text alignment
Description can be aligned to the left, right or centered to the container
Show products per page
Display the option to allow users to control how many products display per page. This feature is not available with the Order Form
Show breadcrumbs
Display a site navigation showing visitors where they are on a site's hierarchy of content. Stores with a large number of collections can use a menu to relate sub-collections that will display on each page.
Show product sorting options
Display sorting options. Sorting allows the user to list the products in the following orders:
- Featured
- Best Selling
- Oldest to newest
- Newest to oldest
- Lowest price to highest (Not available with the Order Form)
- Highest price to lowest (Not available with the Order Form)
- Alphabetically by product title
- Reverse alphabetically by product title
Product layout
Collection products can be displayed in 1 of 3 layouts:
- Grid: The grid is a traditional layout with 2-5 products per row. The product image will be above the title, pricing, call to action & more
- Row: Each product will occupy 1 full row. The product image will be to the left of the title, pricing, call to action & more
- Order Form: Each product variant will occupy 1 full row. The product image will be to the left of the title, pricing, call to action & more
Each layout can include the following elements:
- Product image featuring an option to display a rollover image
- Product title linked to the product
- Pricing including compared at, free & pricing variations
- Product vendor
- Inventory transfers from suppliers
- Call to action button(s)
The Order Form displays a list of all the product variants within each collection product. This allows users to add multiple items to their cart at once
Products per page
Select how many products to display per page from 12-48. 12 is the minimum, and the slider steps up by 12 to a maximum of 48.
Store users can change this using the 'Show products per page' option. This feature is not available with the Order Form
Products grid columns
Select how many columns to display per collection from 2-5. 2 is the minimum, and the slider steps up by 1 to a maximum of 5.
The grid columns will include the left hand column containing filters, plus the remaining product grid
Mobile grid layout
- Row: Product details will be displayed horizontally, 1 per row
- 2 columns: By default, products will be displayed side by side on mobile views
Section
Lazy load images *
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Background color
Choose a custom color for the background
Background gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
* May not be available in all Sections
* NOTE: May not be available on all sections, blocks or templates