How to use Shopify article category element?

The Article Category element displays the category (blog or topic) assigned to a Shopify blog article. It helps visitors quickly understand the context of the article and improves blog navigation and content organization.

When used inside an Article Detail container, the category is automatically pulled from the selected article, ensuring accurate and dynamic content display.

I. Article Category Element - Content Settings

Automatic Article Source

This block is designed to work inside an Article Detail container.

• It automatically uses the article selected in the parent Article Detail element

• No manual category selection is required on the live storefront

This guarantees that the correct article category is always shown.

II. Article Category Element - Basic Settings

Layout & Positioning

Control how the article category appears on your page:

• Element ID – Unique identifier for custom styling or scripts

• Alignment – Adjust horizontal and vertical alignment

• Size & Dimensions – Set width and position for responsive layouts

Additional options allow you to customize spacing, borders, and text styling to match your store’s design.

III. Article Category 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