Collections
The default collection template will be applied to every collection page. The template contains three sections:
- Collection banner
- Collection sub navigation
- Collection grid
Additional sections can be added in the theme editor.
Collection banner
The banner displays the collection title and description. Luxe provides a number of layout options to choose from in relation to the visual design and layout.
| Banner type | Standard banner: The collection image displays as a banner with the collection title and description overlaying the image. Banner with description below: The collection description displays below the banner. This setting is useful if the description is long (too long to comfortably fit within the banner) or if the banner image/s do not provide enough contrast for description text. Stacked with image first: The collection title and description display below the collection image. Stacked with image last: The collection title and description display at the top of the page with the collection image below. Grid: The collection image and text are divided into a grid. On mobile, the image will display above. On wider screens, the image displays adjacent to the collection title and text. This provides an alternative layout to a typical banner. Text only: The collection title and description displays. The collection image does not display. |
| Banner height | Choice of default or full screen. If ‘Full screen’ is selected, the banner height will resize to the height of the screen. |
| Margin | Choice of full width or ‘Default’. ‘Default’ will apply left/right margins according the main theme settings. |
| Text alignment | Choice of left or center alignment |
| Heading size | Set the size of the collection title. Choice of Normal, Small, Medium, Large or Extra Large. |
| Description text size | Set the size of the collection description. Choice of Normal, Large or Extra Large. |
| Grid options | If the banner type is set to ‘Grid’, a number of additional options can be used, such as setting the aspect ratio of the image, the image position and the margin. |
| Color scheme | The color scheme allows you to choose any foreground and background color to give maximum flexibility. |
| Padding | Set the top/bottom padding of the section. |
Collection sub navigation
This can be included if required. By default it is hidden - it can be activated by clicking the eye icon to display the section.
To include collection sub navigation:
1. Create the menu in Online Store > Navigation
2. Within the theme editor, go to Collections and select ‘Default collection’
3. Locate the collection sub navigation section in the left menu
4. Select your menu
Once the menu is inserted, you can also set the style of the menu and the top/bottom padding.
| Alignment | Choose from left or center alignment |
| Menu style | Choose from links, pills or images. If images is selected, the default collection image will display. This is either the collection image you have uploaded to the collection, or if there is no image uploaded Shopify uses the featured image of the first product within the collection. |
| Image aspect ratio | Applies if menu style is set to images. Choose from landscape (default), square, portrait 4:5, portrait 6:4, or circle. |
| Padding | Set the top and bottom padding for the section |
Collection grid
You can change the layout (number of columns) and specify whether to include sorting and filtering. You can also specify what product data is shown within the product cards (such as vendor and price).
Choose the maximum number of products to display, and choose the number of columns on mobile, tablet and desktop. Separate options give flexibility to fine-tune your collection grid layout across different devices.
Mobile: Range from 1-2 columns
Tablet: Range from 2-4 columns
Desktop: Range from 2-6 columns
Filters
Filters are enabled by default. Filters will display based on the filters you have specified in the Shopify Search & Discovery app. The type of filters you choose will depend on your products – common filters are size, material, fabric or gender. However, you can add any filter you require using product metafields.
Enable creative layouts
Enabling this feature allows you to set certain products to different sizes within the product grid. This is useful for making certain products stand out. Note: use this feature carefully - if care is not taken, it can result in unexpected layouts.
Two special size options are available. To make any product larger within the grid, add the following tags to the product:
product-card-full-width
Product will display full width (spanning all columns). A full width card can also include an excerpt (a short summary description). This can be useful for adding an editorial narrative to the product grid.
product-card-double-width
Product will display double width (i.e. on a four column layout the product will span two columns)
Note: if filters are applied, all products are rendered at standard size.
Collection images
You can insert up to three images into the product grid. This feature is useful for adding lifestyle images to the product grid. For each image, you can specify the position within the grid based on numerical order. i.e. setting the number to 1 will make the image appear before the first product.
