How to use Shopify article title element?

The Article Title element displays the title of a Shopify blog article. When used inside an Article Detail container, it automatically pulls the title from the selected article, ensuring your content stays dynamic and consistent.

I. Article Title 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 keeps your article layouts clean and easy to manage.

Link

Enable this option to make the article title clickable.

Options include:

• Go to article after click

• Open link in a new tab

This is useful when displaying article titles in lists or promotional sections.

Display Option

Control how the article title is shown, such as text style or visibility, depending on your layout needs.

II. Article Title Element - Basic Settings

Element ID

Each Article Title element has a unique Element ID.
You can copy this ID for advanced styling or customization.

Alignment

Control how the title is aligned within its container:

• Align left

• Center

• Align right

• Distribute evenly

Proper alignment improves readability and visual hierarchy.

Size (X & Y)

Adjust the position of the article title:

• X: Horizontal position

• Y: Vertical position

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

Width & Height

• Width: Set a fixed or responsive width

• Height: Leave as auto to fit the title text naturally

Style

Customize the appearance of the title, including colors and background styles, to match your brand.

Border & Radius

Add borders or rounded corners to highlight the article title if needed.

Space

Adjust inner and outer spacing to create proper breathing room around the title.

Text

Control text properties such as font size, weight, line height, and color for better readability.

State

Customize how the title appears in different states:

• Normal

• Hover

• Active

This is especially useful when the title is clickable.

Best Use Cases

• Blog post headers

• Article detail pages

• Featured content sections

• Content previews

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