Shopify elements – Blog Post Image

In this article, you’ll learn about another Shopify element named Blog Post Image. This element is a new one of PageFly version 3.0.0. 

About Blog Post Image elementClick to copy

The Blog Post Image element is designed to display images of your Shopify blog post on your page to increase your conversion rate. You can use the Blog Post Image element to display your image of a blog post on any non-blog post page or use it on a blog post page.

shopify element blog post image

Access the Blog Post Image elementClick to copy

Step 1: Click on the Shopify icon which is the Add shopify element function

Step 2: Click on the Blog Post Image element in the dropdown menu

Step 3: Drag and drop the element you want into the page editor and then start using it.

Note that you can search for this element by using the search function instead of finding it in the sidebar.

blog post image

Blog Post Image element configurationClick to copy

Blog Post Image element comes with parameters allowing you to fine-tune content appearance for the best possible conversion rate.

Select the element in the layout to see its parameters.

blog post image

General configuration

 

CONTENT
Blog Post Source: When you drag and drop the Blog Post Image element into the editor page, it will be chosen by default in the Blog Post Source section.shopify element blog post image
Custom Blog Post: Select Blog Post that contains the image you want to display on your store.shopify element blog post image
Enable Full Width: Make the Image fit with the width of its container (example: column).shopify element blog post image
Image Width: You can adjust Image Width when turning Enable Full Width off.shopify element blog post image
Image Ratio: There are three types for you to choose from:Original: Image will show in original size

shopify element blog post image

Square: Image will show in a square shape

shopify element blog post image

Custom: You can adjust the height of the image

shopify element blog post image

Image Height: You can adjust Image Height when selecting Custom in Image Ratio.shopify element blog post image
Image Object Fit: In Square and Custom types, you can resize the image to fit its containerCover: Image will stretch to fit with the container

shopify element blog post image

Contain: Image will squeeze to stay inside its container

shopify element blog post image

Image Position: In Square and Custom types, you can select and specify the position for the image inside its container.shopify element blog post image

If the image fits with its container, the Image position will show like this

shopify element blog post image

Link to blog: Turn on this feature to allow customers to direct to your Blog Post when they click on the image.shopify element blog post image

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

Styling configuration

You can check more information about the Styling tab here

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Discover the Shopify Invoice Generator by PageFly, a seamless solution for invoicing in your online store. Try it now!