Collection Heading
Written by Annie
Last updated
The Collection Page will automatically show the collection heading and allows you can customize the display for it.
Note: Some options in this article only apply to Header Transparent.
To enable Header Transparent: Go to Header Section > TRANSPARENT HEADER > Enable transparent header on collection page.
1. Collection Heading Content
This section has a total of 5 blocks: Page heading, Page subheading, Description Collection, Breadcrumb, List collection. However, you can only add maximum 4 blocks of these 5 blocks.
1.1. Page heading
HTML tag, Font family, Font size, Line height, Font weight, Letter spacing, Enable font style italic, Enable font uppercase, and Enable text-shadow, Margin bottom: These options will help you style the page heading. Moreover, you can choose different options on others devices: tablet and mobile.
DESIGN FOR HEADER TRANSPARENT: you can change Color Text for Header Transparent.
1.2. Page subheading
Page Subheading allows you to add the Subheading to the collection page. You can customize it by yourself. The way to customize it is similar to Page Heading. Please refer and freely change it based on the options available here.
If you want to config Subheading for each Collection, you can use dynamic source. Follow this guide to adding metafields:
Step 1: Go to Shopify Settings > Custom data > Collections > Add definition.
You need to configure some options below:
Name: You can add any name here. Example: Subheading.
Namespace and key: you can add theme.subheading_collection key here.
Description: You can add any text for the description.
Select Content Type: This is a required option, you have to choose Single line text or Multi-line text.
Step 2: Go to Collections > Add content for Metafield collection
Step 3: Then you will add block Page Subheading and select Insert Dynamic Source.
1.3. Description Collection
Design description: you can choose "Show all" or "Excerpt"
Excerpt length (integer): You can limit the number of words to show.
Use view more: Enable this option to show the view more button.
View more label: You can change the text of button like "Explore more" Button, etc.
View more button only work when a collection has EXCERPT DESCRIPTION. It will be activate at 'Show description collection' in 'Main collection' options.
The remaining options are similar to Page Heading.
1.4. List Collection
General Options:
Select collections to show: This option allows you to select the collections you want to show. There are 2 types: All and Select collections.
Show thumbnail collection: it will show the image of the collection as a thumbnail.
Sort collections by: Sorting only applies when "All" is selected. This function allows rearranging the order of collections.
Hidden on mobile
OPTIONS FOR ITEMS:
Space between items: You can change the spacing between the items, please drag the range slider.
You also can change the Font color, Font size, Font weight ... for List Collections
Use prev next button: Creates and shows previous & next buttons. Only works when the screen is not enough to show all items.
1.5. Breadcrumb
Breadcrumb color: This option allows you to change the color of the breadcrumb.
Margin bottom: This option allows you can change the spacing.
DESIGN FOR HEADER TRANSPARENT: you can change the Breadcrumb color for Header transparent
2. How to configure Page Heading Section?
2.1. Background image
This option allows you can change the background with the image. It will show when you Disable "Specify other image for particular page" option.
Specify other image for particular page: This option will show the collection image. You can change it please click Products -> Collections -> Select Collection that you want to change -> Edit the Collection Image
Use scroll parallax?: This option will help your image show the Parallax effect for the Collection Heading.
Background color: This option allows you can add color to the background.
Background overlay: You can add the overlay of background color by dragging the range slider.
Padding/Margin space: You can change the spacing item on each device.
Border: You can choose the border-top or bottom of this section.
2.2. BACKGROUND IMAGE CONFIG
Note: These options will work when you Disable “Use Scroll Parallax” option.
Background repeat: Choose the background repeat you want to show for the Background image here. This feature will work when you select background size is Contain. For example Repeat, No-repeat, Vertically, etc.
Background size: Choose the background size you want to show for the Background image here. Example: Auto, Contain, Inherit, etc.
2.3. DESIGN FOR HEADER TRANSPARENT
This option will apply with Header Transparent.
Border and Color border: You can enable the border between Header and Page Heading. Besides, you can config the color and overlay for it.
Background Color, Overlay and Padding Space: these options are the same as general options.
[Private Offer] EComposer Partner Plan
Exclusively for Belyn users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:
FREE 100% EComposer Standard plan for 6 months (save you $114)
Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
Create advanced sections & add to Belyn with ease
Save up to 50 pages/sections
100+ professional, stunning pre-designed templates
Anyone can build pages with live drag-drop editor
How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Belyn+EComposer” to upgrade for free
Cheers,
The4.