How to Use Shopify Blog Post Image

1. About Blog Post Image ElementClick to copy

1.1. What is Blog Post Image Element?Click to copy

Blog Post Image element is designed to display images of your Shopify blog post on your page, to get better SEO rankings. 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.

Blog Post Image element

1.2. Where can I find the Blog Post Image element?Click 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 element

2. 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 element

2.1. General ConfigurationClick to copy

2.1.1. Blog Post SourceClick to copy

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.

Blog Post Image element

2.1.2. Custom Blog PostClick to copy

Select Blog Post that contains the image you want to display on your store.

Blog Post Image element

2.1.3. Enable Full WidthClick to copy

Make the Image fit with the width of its container (example: column).

Blog Post Image element

2.1.4. Image WidthClick to copy

You can adjust Image Width when turning Enable Full Width off.

Blog Post Image element

2.1.5. Image RatioClick to copy

There are three types for you to choose from:

Original: Image will show in original size

Blog Post Image element

Square: Image will show in a square shape

Blog Post Image element

Custom: You can adjust the height of the image

Blog Post Image element

2.1.6. Image HeightClick to copy

You can adjust Image Height when selecting Custom in Image Ratio.

Blog Post Image element

2.1.7. Image Display TypesClick to copy

Image Object Fit: In Square and Custom types, you can resize the image to fit its container

Cover: Image will stretch to fit with the container

Blog Post Image element

Contain: Image will squeeze to stay inside its container

Blog Post Image element

2.1.8. Image PositionClick to copy

In Square and Custom types, you can select and specify the position for the image inside its container.

Blog Post Image element

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

Blog Post Image element

2.1.9. Link to BlogClick to copy

Turn on this feature to allow customers to direct to your Blog Post when they click on the image.

Blog Post Image element

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

2.2. Styling ConfigurationClick to copy

You can check more information about the PageFly Element Styling.

You can check the video below about creating a blog post page:

3. Frequently Asked QuestionsClick to copy

3.1. OverviewClick to copy

What is the best image size for Shopify blog post? 1800x1000pixel
What is the best image ratio for Shopify blog post? 16:9
What is the optimal image weight for a image appeared on Shopify Page? Under 20 MB

3.2. What is Shopify Blog Post Image?Click to copy

Blog Post Image element is designed to display images of your Shopify blog post on your page, to get better SEO rankings.

3.3. Should I use PNG or JPG for blog post?Click to copy

JPGs, as the image weight is smaller, which takes up less space, load faster on the web.

3.4. Why are my Shopify images blurry?Click to copy

Sometimes, Shopify lowers the image size and weight, to improve page load times.

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now