How to use Shopify collection list element?

The Collection List element allows you to display Shopify collections in a structured and visually appealing layout. It’s ideal for showcasing product categories, seasonal collections, or featured groups on landing pages.

I. Collection List Element - Content Settings

Collection Data

Select the Shopify collections you want to display in the editor.

Important Note
The collection selection in the editor is for preview purposes only.
On the live storefront, the displayed collections are automatically determined by the current page context (such as collection or page templates).

This ensures your content stays dynamic and relevant across different pages.

II. Collection List Element - Basic Settings 

Element ID

Each Collection List element has a unique Element ID.
You can copy this ID for:

• Custom styling

• Advanced customization

• Targeting the element in scripts or CSS

Alignment

Control how the Collection List is aligned within the page:

• Align left

• Center

• Align right

• Distribute evenly

This helps you position the collection layout precisely within your section.

Size (X & Y)

Adjust the position of the Collection List element on the page:

• X: Horizontal position

• Y: Vertical position

Values are measured in pixels (px) for precise layout control.

Width & Height

• Width: Set the maximum width of the Collection List

• Height: Leave as auto to adjust automatically based on content

This allows your collections to remain responsive while fitting your design.

Element Order

Rearrange the content inside each collection item. 

III. Collection List Element – Advanced Settings

The Advanced tab allows you to control interactions, device visibility, animations, and custom styling for your text element.

1. Display on

Control where the text will be visible:

• Desktop – show/hide text on desktop devices.
• Mobile – show/hide text on mobile devices.

This helps you optimize the layout for different screens (responsive design).

2. Animation

Bring your text to life with animation effects.

• Type: Choose an animation style (e.g., fade, slide, bounce).
• Loop: Set how many times the animation repeats.
• Duration: Adjust how long the animation lasts (in seconds).
• Delay: Add a delay before the animation starts.

3. Custom CSS

• Turn this on to apply your own CSS code for advanced styling.
• This is especially useful for developers or advanced users who want unique effects beyond the built-in options.

=> The Advanced tab gives users more control, interactivity, and professional effects, making the text stand out and adapt perfectly to any device.

Thanks for reading! If you have any questions, please contact us via email: support@shopone.io