About Collection View Details
Summary: The Collection view details element is designed to display details of your collection on the corresponding collection page to increase conversion rates.
You can use the Collection view details element to promote your collections on any non-Collection page or enhance the attractiveness of Collection pages.
How To Access Collection View Details
You can simply follow these steps to access Collection view details:
- Step 1: Click on the Elements icon in the left menu
- Step 2: Navigate to the Shopify tab, which contains elements from Shopify
- Step 3: Click on the Collection view details element in the dropdown menu
- Step 4: Drag and drop the desired variant of the Collection view details element into the page editor
The Collection view details element comes with three common variations but we will continue to add more variations to help you save time.
Note that you can search for this element by using the search function instead of finding it in the sidebar.
How To Configure For Collection view details
The Collection view details element comes with various parameters that allow you to fine-tune its appearance and functionality for optimal conversion rates.
Click on the Collection view details element you’ve added to your page. Then, go to the General and Styling tabs to access and adjust the available parameters.
General Settings
Legacy Editor
Below are the main settings available in the General tab:
Collection Source
When you drag and drop the Collection view details element into the editor, you have two choices for the Collection source: Auto and Custom collection.
- The Auto option: This option uses the collection assigned when you created the collection page.
- The Custom collection: This option allows you to select a specific collection for the Collection view details element.
The specific case will vary if you’re on a Collection page or not.
- In Collection Page:
When you use the Collection View Details element inside a Collection Details element on a collection page, the Auto option is set as the default.
If you use the Collection view details element outside a Collection details element on a Collection page, you can choose between two options.
- In Non-Collection Page:
On non-collection pages, the Collection source option is disabled, and Custom collection is chosen by default. You can select the specific collection you want to display.
Other Settings
Button Type: There are 3 types of button “View Details”:
|
 |
| Button text: Input the desired text for the “View Details” button. |  |
| Icon Position: This setting is available only when “Text with Icon” is selected as the button type. It allows you to set the position of the icon to either the left or right of the text. |  |
| Enable Full Width: Enable this option to make the button fit the full width of its container (e.g., a column). |  |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters in this General settings guide.
Gen 2 Editor
In addition to the settings available in the Basic section, when using the Collection View Details element in a Flex section, you can choose the “Align Self” option with three styles to align the content:
- Top
- Center
- Bottom
Styling Settings
Legacy Editor
The Styling tab allows you to customize the appearance of your Collection view details element to ensure it aligns with your brand’s design. Here, you can adjust various visual aspects such as font, color, size, spacing, and more to make it stand out and look professional.
For more detailed information, refer to the Styling tab guide.
Gen 2 Editor
When using the Collection View Details element in a Flex section, you can control its width and height in the Styling tab with these three options:
- Fill Container: The Collection View Details will expand to fill the entire space of its parent container.
- Hug Content: The Collection View Details will resize to fit the content inside it.
- Fixed Width / Fixed Height: Set a specific width and/or height for the Collection View Details. You can define the exact dimensions below this option.
Click on “More settings” to set the minimum and maximum width and height for the Collection View Details.
Common Cases
Error When Choosing Auto Collection Source
If you encounter an error when selecting the Auto collection source in a Collection page, it means you haven’t assigned any collection to your page.
Error Message: “The page needs to be assigned to at least 01 collection.”
To resolve this issue, follow these steps:
- In the left menu, click on Page assignment.
- Click the Add collections button and choose your desired collection and click Select.
Alternatively, you can click the Assign collections button to access the Page assignment manager and select your products from there.
By assigning a collection to your page, you will enable the Auto option in the Collection source, and the product price will display correctly.
Frequently Asked Questions
Can I edit the collection source of the Collection view details element from a Regular page?
No, you can’t. The editing option ‘Collection source’ would be disabled, and the custom collection should be chosen by default.
Can I display multiple collections using the Collection view details element?
The Collection view details element is designed to display details for a single collection. If you need to showcase multiple collections, you can add multiple Collection view details elements to the page, each configured for a different collection.
Previous article
