The Index Page in Supply creates a visual navigation with a grid of thumbnail images linking to pages within your site. An Index Page makes a great homepage.
Supply Index Pages can display the following page types:
- Album Pages
- Blog Pages
- Events Pages
- Gallery Pages
- Regular Pages
Tip: Create an Index Page in the Pages Panel and add pages to it with the + icon. Each page must have a page thumbnail to display in the Index.
Index Pages have separate background colors from the rest of the site. To set the background color, open an Index Page in the Pages panel, and then navigate to the Style Editor. The Index Background Color tweak in the Products section adjusts the background color.
Page titles and hover options
Use the Index List Title Style tweak in the Index section of the Style Editor to adjust when the page titles display.
- Overlay - Image dims and title displays on hover.
- Color Overlay - Title displays over a color filter on hover.
- Under - Title displays below the image. Image dims on hover.
- Always Show - Title displays over a color filter. Image brightens slightly on hover.
For Color Overlay or Always Show, use the Image Item Color to set the filter’s color and transparency.
Use the Index Title Color and Index List Font Size tweaks to adjust the page titles. Index Column Width and Index Gutter adjust the size and spacing of the thumbnail images.
The Index Aspect Ratio tweak controls the shape of your thumbnails. Selecting any Aspect Ratio other than Auto will make all the images the same shape.
Use the Index Links tweak in the Navigation section of the Style Editor to control how the Index and its pages display in the sidebar navigation.
- Show Both - Display the Index Page title as a link and its pages as sublinks.
- Parent Link Only - Display only the Index Page title as a link.
- Child Links Only - Display only the pages within the Index as links.
- Show Both While Inside Index - Display the Index Page title as a link on all pages. While on the Index Page or a page within the Index item, the categories display as sublinks.
The thumbnail links for Index Pages stack vertically on mobile. The page background color shows as a border around each product item or thumbnail image.
If the Index List Title Style in the Index section of the Style Editor is set to Under, page titles display below each thumbnail image. If set to Overlay, Color Overlay, or Always Show, titles display centered within each thumbnail.
Note: For general information about styling your site, visit Structure and style.
Showcase your videos and images with a stacked Gallery Page.