How to use Shopify article list element?

The Article List element lets you display blog articles from your Shopify store in a clean, organized layout. It’s perfect for showcasing latest posts, educational content, or marketing stories on landing pages and blog sections.

I. Article List Element - Content Settings

Source

Choose the Blog you want to display articles from.

This allows you to:

• Show articles from a specific blog

• Keep content automatically updated when new articles are published

Items per Loading

Set how many articles are loaded at one time.

• Smaller numbers improve page speed

• Larger numbers show more content upfront

This helps you balance performance and content visibility.

Gap

Adjust the spacing between article items.

Increasing the gap improves readability and creates a more spacious layout.

Layout settings

Control how article items are arranged, such as grid or list layouts, to match your page design.

II. Article List Element - Basic Settings

Element ID

Each Article List element has a unique Element ID.
You can copy this ID to apply custom styles or advanced targeting.

Alignment

Control how the Article List is aligned within the page:

• Align left

• Center

• Align right

• Distribute evenly

This helps position the article section neatly within your layout.

Size (X & Y)

Adjust the placement of the Article List on the page:

• X: Horizontal position

• Y: Vertical position

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

Width & Height

• Width: Set a fixed or responsive width (e.g. 1200px)

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

This ensures the article list remains responsive across devices.

Style

Customize the visual appearance of the article list, including background and layout styling, to match your brand.

Items

Choose which article information to display:

• Image

• Title

• Content

• Excerpt

• Author

• Date

• Category

• Tags

You can show or hide each item to create a simple or detailed article layout.

Best Use Cases

• Blog index pages

• Content marketing landing pages

• SEO-focused pages

• Educational or storytelling sections

III. Article List Element – Advanced Settings

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

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).

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.

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