Blog posts card


Card style

There are two styles: 

  • Date and author title uppercase
  • Date and author title capitalize
Show featured image This option makes the featured image visible on a blog post. You can add the featured image to a created blog post in the Shopify Store. 
Image ratio

The image ratio of the blog posts :

  1. Adapt to image
  2. Landscape: This option crops the images to a 3:2 ratio, where the width of the image is 1.5 times the height. It is ideal for images that have a wider or landscape orientation.
  3. Portrait: This option crops the images to a 2:3 ratio, where the height of the image is 1.5 times the width. It is suitable for images that have a taller or portrait orientation.
  4. Square: This option crops the images to a 1:1 ratio, where the width and height of the image are equal. It creates a square-shaped display for your images.
  5. 4:3: This option crops images to a 4:3 ratio, providing a standard rectangular display.
Corner radius Use the slider to adjust the degree of straightness or roundness of the card's image.
Blog card on hover 

There are four options available:

  • Default: This option causes the image to zoom slightly when hovered over.
  • Italic and link color: This option is similar to the default, but it also changes the font color of the links on the card to a different color and applies an italic style.
  • Rounded image and heading color: This option rounds the corners of the image and changes the heading font color to a different color.
  • Rounded image and heading icon: This option rounds the corners of the image and adds an arrow icon to the heading.
Show badges Shows badges on the images.
Heading font

Enables to choose heading font:

  • 'Heading' settings for the font as for heading-font
  • 'Body' settings for the font as for body-font

*Change the font family, font size, and font weight of heading or body style in Theme settings /Typography. Any change in the Typography tab of theme settings will affect the whole theme.

Heading style

This setting enables you to define the capitalization style for text. You have the following options:

  • Default: No capitalization transformation is applied.
  • Uppercase: Converts all text to uppercase letters. For example, "Your cart" becomes "YOUR CART".
Heading color

Select a color for the card heading from the following options:

  • Main
  • Secondary
  • Heading

To choose or modify colors for the heading, navigate to the "Colors" tab in the theme settings. Locate the "General colors" block containing text color options. Changes made to the colors in the theme settings will be applied universally throughout the entire theme.

Heading font size

Blog card heading font size can be :

  • Small
  • Medium
  • Large
Heading font weight Control the thickness or boldness of the heading by selecting the appropriate font weight.
Bottom space Choose a large or small space after heading according to your design preferences.
Heading text shadow on hover This option can be combined with the collection card on hover, allowing you to choose a suitable style with an additional text shadow effect.
Show date Shows the date that the blog post was published.
Show author Shows the author of the blog post.
Show date and author above heading Shows date and author of the blog post.
Show description Show description of the blog post under the title.
Description width You can adjust the card's description width.
Description font size

Blog card description font size can be :

  • Small
  • Medium
  • Large
Description color

Select a color for the card description from the following options:

  • Main
  • Secondary
  • Heading

To select or modify colors for the heading, navigate to the “Colors” tab in the theme settings. Locate the “General colors” block containing text color options. Changes to the colors in the theme settings will be applied universally throughout the theme.

Show comments count Shows the number of published comments on the blog post.
Show "Read More" button Mark the checkbox to show the button. This button will take customers to the blog post detail page. 
Text for button "Read More"

Type a label for the button. By default, the label is “Continue Reading”. 

*If remove label for button, the button will disappear from the section.

Button color style This setting allows to change button color style.
Button style

You can choose from seven different button styles:

  • Default button: This is the standard button style with a solid background color and text.
  • Default button with icon
  • Outline button: This style features a transparent background with a colored outline and text.
  • Outline button with icon
  • Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color.
  • Inline button with underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable.
  • Inline button with underline on hover — this option adds an underline to the text on hover.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us