Blog post image
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
Summary: 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.
To access the Blog Post Image element, you can follow these steps below:
Step 1: Click on the “Element” button icon.
Step 2: Switch to the “Shopify” tab.
Step 3: Scroll down to the “Blog post” section and select the “Blog post image” option.
Step 4: Drag and drop the blog post image element 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 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 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. To preview the blog post element, publish the page for the first time. You can always unpublish later. |
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. To preview the blog post element, publish the page for the first time. You can always unpublish later.
Custom Blog Post: Select Blog Post that contains the image you want to display on your store.
Enable Full Width: Make the Image fit with the width of its container (example: column). Image Width: You can adjust Image Width when turning Enable Full Width off.
Image Ratio: There are three types for you to choose from: Original, Square, and Custom.
Image Height: You can adjust Image Height when selecting Custom in Image Ratio.
Image loading: Choose the loading type for the Blog post image. There are 3 types:
- Lazy Loading: Images load only when visible in the viewport, improving PageSpeed.
- Preload: Images load as soon as the page loads, improving LCP (Largest Contentful Paint).
- Standard: Balances loading time and user experience.
Image Object Fit: In Square and Custom types, you can resize the image to fit its container.
Image Position: In Square and Custom types, you can select and specify the position for the image inside its container.
Link to Blog: Turn on this feature to allow customers to direct to your Blog Post when they click on the image.
Sometimes, images may not scale properly across different devices or screen sizes, resulting in distortion or cutoffs. This problem can occur due to CSS conflicts, improper theme settings, or inconsistencies in image dimensions. Ensuring that images are properly resized and responsive can help mitigate this issue.
1. What is a Shopify blog post image?
Blog Post Image element is designed to display images of your Shopify blog post on your page, to get better SEO rankings.
2. Should I use PNG or JPG for blog posts?
JPGs, as the image weight is smaller, which takes up less space, load faster on the web.
3. Why are my Shopify images blurry?
Sometimes, Shopify lowers the image size and weight, to improve page load times.
Cover: Image will stretch to fit with the container
Contain: Image will squeeze to stay inside its container
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters .
For further details on the Styling tab, please refer to this .
