How to use Shopify article author element?

The Article Author element displays the author information of a Shopify blog article. When used inside an Article Detail container, it automatically pulls the author assigned to the article, helping readers identify who wrote the content. 

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

This ensures the correct article author is always displayed.

Author Display Options

• Add a custom prefix (for example, “By”) before the author name

• Enable or disable the author icon

• Customize the icon style, color, and size

II. Article Author Element - Basic Settings

Layout & Positioning

Control how the author element appears within your layout:

• Alignment (left, center, right)

• Horizontal and vertical positioning

• Width and height settings

Styling

Customize the visual appearance of the author text:

• Text style and typography

• Spacing and padding

• Border and radius options

• Hover and state styles

Border & Radius

Add borders or rounded corners to visually separate the content block if needed.

Space

Adjust inner and outer spacing to improve readability and layout balance.

Text

Customize text properties such as font size, color, line height, and font weight to match your brand.

State

Control how the content appears in different states (for example, normal or hover), useful when combined with links.

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