Blog posts section

The blog posts section is a section that gives you the ability to showcase posts from a blog in a flexible way.

Section settings

Heading: Set a title for this section. This is optional.

Link label + Link: With these settings you can create a button that will appear at the top right corner of your blog section. For example, typically you would want to link this button to the rest of the blog.

Blog: Shopify organizes posts under multiple blogs (functioning essentially as categories). This option allows you to select the blog you want to showcase. Only posts from the selected blog will be displayed.

Number of blog posts: You can display up to 12 blog posts on each section.

Show date + Show author: Hide or show blog post meta (date and author) above the title.

Layout

Number of columns on desktop: Sets the number of columns (3 or 4). It is recommended that you couple this choice with “Number of blog posts” for better display. For example, if you choose 3 columns you would want to display either 3 or 6 blog posts to have complete rows.

Card type: Choose between “Card”, “Overlay card”, “Padded card” and “Normal” type for your blog posts. The “Card” type features a bordered appearance (making the posts look like a card), “Overlay card” type shows the card’s text content over the card’s image, “Padded card” type displays a white border around the card (making the posts look like a polaroid photo) and the “Normal” type simply removes the border and padding around the content.

Image ratio: This option allows you to select the ratio of the post card that will appear on the section. “Adapt to image” (default option) means that the ratio of all cards will be the inherent ratio of the first card’s image. Square, Portrait and Landscape will force the images to be displayed as squares, portraits or landscapes respectively.

Stack on mobile: By default, Maranello will try to create a flexible scrollable horizontal list of blog posts on mobile. If you prefer to create a vertical list of blog posts though, simply enable this option.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.