How to use Shopify article date element?

The Article Date element displays the published date of a Shopify blog article. When placed inside an Article Detail container, it automatically pulls the correct article date, ensuring your blog layout stays dynamic and easy to manage. 

I. Article Date 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 guarantees the correct publish date is always shown for each article.

Date Format

• Choose how the article date is displayed (for example: Oct 28, 2025)

• Helps match your store’s design and regional preferences

Icon Settings

• Enable or disable a date icon next to the article date

• Customize the icon style, color, and size for better visual consistency

II. Article Date Element - Basic Settings

Layout & Positioning

• Adjust alignment to control how the date appears within your layout

• Set width and height to fit different blog designs and screen sizes

Spacing & Styling

• Customize spacing, borders, and text styles

• Fine-tune the appearance to match your theme typography

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