How to use Shopify article image element?

The Article Image element displays the featured image of a Shopify blog article. When used inside an Article Detail container, it automatically pulls the correct image from the selected article, keeping your blog layout dynamic and consistent. 

I. Article Image Element - Content Settings

Automatic Article Source

This block works inside an Article Detail container.

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

• No manual image selection is needed on the live storefront

This ensures the correct article image is always shown.

Image Scale

Control how the article image fits inside its container:

• Fill image: The image fills the container completely

• Other scale options can help preserve aspect ratio or fit content better

Choose the option that best matches your design layout.

Link

Enable this option to make the article image clickable.

Available options:

• Redirect users to the article after clicking

• Open the article in a new tab

This is useful when the image is used as a visual entry point to the article.

II. Article Image Element - Basic Settings

Element ID

Each Article Image element has a unique Element ID.
You can copy this ID for custom styling or advanced targeting.

Alignment

Control how the image is aligned within its container:

• Align left

• Center

• Align right

• Distribute evenly

Proper alignment helps maintain a clean and balanced layout.

Size (X & Y)

Adjust the image position on the page:

• X: Horizontal position

• Y: Vertical position

Values are set in pixels (px) for precise placement.

Width & Height

• Width: Define a fixed or responsive image width

• Height: Leave as auto to keep the image proportional

This ensures images look good across different screen sizes.

Border & Radius

Add borders or rounded corners to style the image and match your brand design.

Best Use Cases

• Blog article headers

• Featured article sections

• Article previews

• Content-focused landing pages

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