How to use Shopify article tag element?

The Article Tags element displays all tags associated with a Shopify blog article. It helps visitors quickly understand the article topics and navigate to related content, improving both user experience and blog discoverability. 

I. Article Tag 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 article selection is required on the live storefront

This ensures the correct article tags are always displayed.

Tag Display Options

• Link to tagged pages: Enable this option to make each tag clickable, leading visitors to the corresponding tag archive page

• Tag label position: Choose whether tags are displayed horizontally or vertically

• Tag value spacing: Adjust the spacing between tag items for better readability

• Show tag label: Toggle to show or hide the tag label text

II. Article Tag Element - Basic Settings

Use the Basic tab to control the layout and positioning of the Article Tags element:

• Set alignment relative to other elements

• Adjust X / Y position, width, and height

• Fine-tune spacing and visual balance within your article layout

This allows you to seamlessly integrate article tags into any blog design.

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