Blocks

The Blog Posts section allows adding different types of content blocks to enhance the layout and functionality of the page.

Each block provides a way to enrich the blog area with collections, media, product grids, or interactive elements — creating a more engaging and informative user experience. Follow the standard Shopify procedure to modify or manage any block:

Here are all inner blocks available inside the Blog Posts section:

• Banner

• Banner with text outside

• Featured collection

• Gallery

• Grid of products

• Media with text

• Menu

• Recent post

• Social

• Tags

---

Banner

The Banner block in the Blog posts section is designed to display a visually appealing image with overlaying text and a button, serving as a highlight or promotional area within the blog layout. It can be used to draw attention to featured articles, categories, or announcements, combining image, text, and button elements with flexible layout and styling controls.

Option	Explanation
Image	Upload or select the main banner image.
Image hover	Add an alternate image that appears when hovering over the banner.
Image ratio	Define the aspect ratio of the image (Auto, Portrait, Landscape, Square, Round, Social story, Widescreen).
Image mobile	Choose a specific image ratio for mobile devices to ensure proper display.
Roundness of the image	Adjust image corners — keep Default or set Custom roundness.
Image overlay opacity	Set transparency for the color overlay applied on top of the image (0–100%).
Link	Add a clickable link to make the entire banner or its content redirect to another page.
Heading	Enter the main text or title displayed over the banner.
Description	Add supporting text or details below the heading.
Heading after description	Switch text order so the heading appears below the description.
Button	Include a call-to-action button with a customizable label and link.
Heading size	Select the font size for the heading (Extra Large, Large, Medium, Small, Extra small).
Underline on hover	Enable an underline effect when hovering over text elements.
Text position	Choose where the text appears on the banner for desktop view.
Text position mobile	Define text placement on mobile devices separately.
Text align	Align text to the left or center within the content area.
Description width	Set the maximum width for the description text on desktop.
Description width tablet	Adjust description width specifically for tablet screens.
Description width mobile	Control description width on mobile devices.
Show text box	Display or hide a background box behind the text for contrast.
Text box opacity	Adjust how transparent the text box background appears.
Link (Colors)	Choose the color for hyperlinks in the banner text.
Link hover	Set the hover color for hyperlinks.
Description (Colors)	Define the color of the description text.
Show background (Button)	Enable a colored background for the button.
Background (Button)	Select the main background color for the button.
Background gradient (Button)	Apply a gradient to the button background.
Border (Button)	Choose the color of the button’s border.
Text (Button)	Set the color of the button text.
Show background on hover (Button)	Enable a hover-state background for the button.
Background hover (Button)	Choose the hover background color for the button.
Background gradient hover (Button)	Add a gradient to the hover background.
Border hover (Button)	Define the hover border color for the button.
Text hover (Button)	Set the text color for the button on hover.
Enable shadow (Button)	Turn on or off a shadow effect for the button.
Shadow (Button)	Customize the default shadow look of the button.
Shadow hover (Button)	Adjust the button shadow appearance on hover.
Background (Box)	Choose a background color for the entire banner area.
Image overlay color (Other)	Select the color of the overlay applied on top of the image.

Banner with text outside

The Banner with text outside block in the Blog posts section is designed to display an image with accompanying text elements placed outside the image area — usually beside or below it. This layout helps maintain clean visual balance and provides space for additional information, making it ideal for highlighting featured stories, promotions, or editorial content.

Option	Explanation
Image	Upload or select the main image displayed in the banner.
Image hover	Add a secondary image that appears when hovering over the banner.
Image ratio	Set the aspect ratio for the banner image (Auto, Portrait, Landscape, Square, Round, Social story, or Widescreen).
Image mobile	Upload an alternative image specifically for mobile devices.
Image ratio mobile	Choose the image aspect ratio for mobile view to ensure responsive display.
Roundness of the image	Adjust the corner style of the image — Default or Custom roundness.
Link	Add a clickable link to make the banner or text elements redirect to another page.
Heading	Enter the main title text that appears next to or outside the image.
Banner	Add a smaller label or tag-style text above or near the heading for emphasis.
Description	Provide additional supporting text or details under the heading.
Button	Add a call-to-action button with a customizable label and link.
Heading size	Choose the size of the heading text for desktop display.
Heading size tablet	Adjust heading size for tablet devices.
Heading size mobile	Define the heading size for mobile screens.
Underline on hover	Enable or disable an underline effect on text hover.
Text align	Align text content to the left or center within its area.
Link (Colors)	Choose the color for links within the banner text.
Link hover	Set the color of links when hovered.
Description (Colors)	Define the color of the description text.
Show background (Button)	Display a background color behind the button text.
Background (Button)	Choose the main background color for the button.
Background gradient (Button)	Apply a gradient to the button background.
Border (Button)	Select a border color for the button.
Text (Button)	Set the color of the button text.
Show background on hover (Button)	Enable a background color to appear when hovering over the button.
Background hover (Button)	Choose a hover background color for the button.
Background gradient hover (Button)	Add a gradient for the hover background effect.
Border hover (Button)	Define the border color for the button’s hover state.
Text hover (Button)	Set the text color for the button when hovered.
Enable shadow (Button)	Turn on a shadow effect for the button.
Shadow (Button)	Customize the button’s shadow appearance in the normal state.
Shadow hover (Button)	Adjust the shadow style for the button hover state.

Featured collection

The Featured collection block in the Blog posts section allows you to showcase selected products from a specific collection directly within a blog post layout. It helps link editorial content to related products, encouraging readers to explore or purchase items mentioned in the article. The block includes options for layout customization, slider controls, and detailed color and style adjustments.

Option	Explanation
Show heading	Display or hide the section heading. If unchecked, the heading appears only within the accordion tab on mobile.
Collection	Select the Shopify collection whose products will be displayed in this block.
Navigation (Slider settings)	Choose slider navigation style — Disable, Dots, Arrows, or both Dots and Arrows.
Number of columns	Set how many products appear per row on desktop (1–2 columns).
Number of columns tablet	Define the number of products per row on tablet screens (1–3 columns).
Image ratio	Select the image aspect ratio for product photos (Auto, Portrait, Landscape, Square, Round, Social story, Widescreen).
Roundness of the image	Adjust the corner style of product images — Default or Custom roundness.
Products	Choose to display a specific number or set of products from the selected collection.
Customize	Enable product card customization, allowing additional styling or layout changes.
Heading (Colors)	Set the color for the block heading text.
Vendor (Product card color)	Define the color of the vendor name displayed on product cards.
Vendor hover	Choose the hover color for the vendor name.
Product name	Set the text color for product titles.
Product name hover	Choose the color for product titles on hover.
Regular Price	Define the text color for regular (non-discounted) product prices.
Sale Price	Set the color for discounted prices.
Old price	Choose the color for strikethrough or previous prices.
Badges	Set the general background color for all product badges.
Sale badge	Select the color of the sale badge background.
Sale badge text	Define the text color for the sale badge.
Featured badge	Choose the background color for the featured product badge.
Featured badge text	Set the text color for the featured product badge.
Sold out badge	Select the background color for the sold-out badge.
Sold out badge text	Define the text color for the sold-out badge.
Countdown background	Choose the background color for the countdown timer (if active).
Countdown text	Set the text color for the countdown timer.
Slider arrows (Media button)	Choose the color for the slider navigation arrows.
Slider dots (Media button)	Define the color for the slider dots beneath the carousel.
Stars active (Review stars)	Set the color for active (filled) review stars.
Stars base (Review stars)	Choose the color for inactive (base) review stars.

Gallery

The Gallery block in the Blog posts section is designed to showcase multiple images in a clean, grid-based layout. It’s ideal for displaying visual highlights related to blog content — such as event photos, tutorials, inspiration boards, or behind-the-scenes imagery. Each image can include tooltips and optional links, allowing interactive storytelling and enhanced engagement.

Option	Explanation
Heading	Add a title for the gallery section to introduce the image group.
Show heading	Show or hide the heading. If unchecked, the heading will only appear in the accordion tab title on mobile.
Number of columns	Define how many image columns appear per row (from 1 to 6).
Image ratio	Choose the aspect ratio for all gallery images (Auto, Portrait, Landscape, Square, Round, Social story, or Widescreen).
Roundness of the image	Adjust the corner style of gallery images — Default or Custom roundness.
#1 – #18 (Image slots)	Each numbered slot represents one image you can add to the gallery.
Image	Upload or select an image for that specific gallery slot.
Tooltip	Add short descriptive text that appears when hovering over the image.
Link	Assign a link to the image so it redirects users when clicked.
Heading (Colors)	Set the color for the gallery heading text.
Tooltip background	Choose the background color for tooltip boxes.
Tooltip text	Define the text color of the tooltip description.

Grid of products

The Grid of products block in the Blog posts section allows you to display a selection of products in a structured grid layout directly within a blog post. It’s ideal for linking editorial content to featured items, collections, or curated product recommendations. The block provides layout, styling, and visibility settings to control how products and their details appear across devices.

Option	Explanation
Show heading	Show or hide the section heading. If unchecked, the heading appears in the accordion tab header on mobile.
Heading	Add a title for the product grid to introduce the selection.
Collection	Choose a collection from which the displayed products will be taken.
Number of columns	Set how many products are shown per row on desktop (1–2 columns).
Number of columns tablet	Define how many products appear per row on tablet (1–3 columns).
Link name	Add a label for an optional link (e.g., “View all”) that leads to the full collection or another page.
Products	Select specific products to feature or let them auto-load from the chosen collection.
Align text relative to image	Choose where text elements (title, price, etc.) appear in relation to the image — Top or Center.
Image ratio	Set the aspect ratio for product images (Auto, Portrait, Landscape, Square, Round, Social story, Widescreen).
Roundness of the image	Adjust image corners — keep Default or define Custom roundness.
Show second image on hover	Display a secondary product image when hovering over the product card.
Show vendor	Show or hide the product vendor’s name.
Show price	Display product pricing below the title.
Enable review stars	Show customer rating stars on product cards.
Truncate product name	Shorten long product titles to keep layout tidy.
Underline on hover	Add an underline effect to product names when hovered.
Show badge "Sale"	Display a “Sale” badge on discounted products.
Show badge "Sold Out"	Show a “Sold Out” badge for unavailable products.
Show badge "Feature"	Add a “Featured” badge for highlighted items.
Heading (Colors)	Set the color for the section heading text.
Vendor (Product card color)	Define the color for the vendor’s name.
Vendor hover	Choose the hover color for the vendor name.
Product name	Set the color for the product title.
Product name hover	Define the hover color for product titles.
Regular Price	Choose the color for regular (non-sale) prices.
Sale Price	Set the color for discounted prices.
Old price	Define the color for the strikethrough old price.
Link	Choose the default color for links in the product area.
Link hover	Define the hover color for links.
Stars active (Review stars)	Set the color for filled (active) rating stars.
Stars base (Review stars)	Choose the color for unfilled (base) stars.

Media with text

The Media with text block in the Blog posts section combines an image (or icon) with descriptive text and an optional button. It is used to visually highlight key points, services, or features within a blog post — blending visual media with short, clear messages. The layout is flexible and can include multiple small media-text pairs to create visually balanced storytelling.

Option	Explanation
Image display	Choose whether to show or hide the image in the block.
Image ratio	Select the aspect ratio for the image (Auto, Portrait, Landscape, Square, Round, Social story, or Widescreen).
Image	Upload or select the main image to display beside the text.
Link	Add a clickable link for the block or image, leading to another page or section.
Heading	Enter the main title text displayed with the media.
Show heading	Display or hide the heading. If unchecked, it will appear in the accordion tab heading on mobile.
Align text relative to icon	Define how text aligns vertically relative to the icon — Top or Center.
#1 – #5 (Icon items)	Each numbered slot allows adding one icon-and-text pair.
Preset icon name	Select a predefined icon from the available icon list.
Description	Add explanatory text or a short message next to the icon.
Show background (Button)	Enable or disable a solid background behind the button.
Background (Button)	Choose the button’s main background color.
Background gradient (Button)	Apply a gradient effect to the button background.
Border (Button)	Set the color for the button’s border.
Text (Button)	Define the color of the button text.
Show background on hover (Button)	Enable a background color change when hovering over the button.
Background hover (Button)	Choose the background color for the hover state.
Background gradient hover (Button)	Add a gradient effect for the button hover background.
Border hover (Button)	Define the border color for the button when hovered.
Text hover (Button)	Set the hover text color for the button.
Enable shadow (Button)	Turn on or off the button shadow effect.
Shadow (Button)	Adjust the button’s default shadow appearance.
Shadow hover (Button)	Define the shadow effect for the button when hovered.

Menu

The Menu block in the Blog posts section is used to display a list of navigational links or quick-access items related to the blog content. It can serve as a compact navigation panel, a list of related articles, or useful resource links for readers. The block allows customization of heading visibility and link colors to maintain a consistent design with the blog layout.

Option	Explanation
Heading	Add a title for the menu section to describe or categorize the links.
Menu	Select a predefined menu from your store’s navigation to display as a list of links.
Heading (Colors)	Set the color for the menu heading text.
Link (Colors)	Choose the default color for the menu links.
Link hover (Colors)	Define the color for menu links when hovered.

Recent post

The Recent post block in the Blog posts section displays a selection of the most recent articles from a chosen blog. It helps readers discover additional content, increasing engagement and time spent on the site. The block includes layout, image, and text display options to ensure consistent visual presentation with the rest of the blog design.

Option	Explanation
Heading	Add a title for the recent posts section to introduce the content.
Recent post	Enable or define how recent blog posts are displayed within the block.
Show heading	Show or hide the heading. If unchecked, it appears in the accordion tab heading on mobile.
Number of columns	Set how many posts appear per row on desktop (1–2 columns).
Number of columns tablet	Define how many posts appear per row on tablet screens (1–3 columns).
Blog	Select which blog to pull recent posts from.
Blog posts	Choose specific posts to feature or allow automatic loading of the latest ones.
Align text relative to image	Set text placement relative to the post image — Top or Center.
Image ratio	Define the aspect ratio for post images (Auto, Portrait, Landscape, Square, Round, Social story, or Widescreen).
Show featured image	Display or hide the main featured image for each post.
Roundness of the image	Adjust the corner style of post images — Default or Custom roundness.
Truncate post heading	Shorten long post titles to fit neatly within the layout.
Underline on hover	Add an underline effect to post titles when hovered.
Show tags	Display the tags associated with each post.
Show date	Show the publication date of the post.
Show author	Display the author’s name under each post.
Show comment count	Show the number of comments for each post.
Excerpt	Choose whether to hide, show, or show a truncated preview of the post content.
Colors	Options to customize colors in the block:
Heading	Set the color for the section heading text.
Link	Choose the color for post titles and links.
Link hover	Define the hover color for links.
Description	Set the color for the post excerpt or description text.

Socials

The Socials block in the Blog posts section allows you to combine an email signup form with social media icons, making it easy for readers to subscribe to newsletters and follow your brand on social platforms. It includes layout, text, and color options for headings, descriptions, inputs, and interactive elements.

Option	Explanation
Email Signup	Subscribers added automatically to your “accepted marketing” customer list. Learn more
Heading size	Choose the size of the heading text (Biggest, Large, Medium, Small, Extra small).
Heading	Enter the main heading text for the email signup section.
Description	Add a short message encouraging users to sign up (e.g., special offers).
Show email signup	Toggle to display or hide the email signup form.
Terms and conditions message	Set the text informing users about Privacy Policy and Terms acceptance.
Social media icons	To display your social media accounts, link them in your theme settings.
Show social media icons	Enable or disable the display of social media icons.
Enable Follow on Shop	Allow customers to follow your store directly via Shopify.
Colors	Customize colors for headings, descriptions, links, and social icons:
Heading	Set the color of the block heading.
Description	Choose the color of the description text.
Text link	Set the color of text links.
Text link hover	Define the hover color for text links.
Soci

Tags

The Tags block in the Blog posts section displays a list of tags related to your blog posts. It helps readers discover content by topics or categories. Each tag can have a clickable link, and the block allows customization of headings, colors, buttons, and hover effects for a consistent design.

Option	Explanation
Heading	Add a title for the tags section.
Popular Tags	Display a selection of the most frequently used tags.
Show heading	Show or hide the heading. If unchecked, it appears only in the accordion tab heading on mobile.
#1 – #18 (Tag slots)	Each numbered slot allows adding a tag with a name and link.
Button name	Set the text displayed on each tag button.
Link	Assign a URL for each tag to redirect users to a filtered list of posts.
Colors	Options to customize colors in the block:
Heading	Set the color of the section heading text.
Button	Customize the appearance of the tag buttons:
Show background	Enable or disable a background color for the buttons.
Background	Choose the main background color of the buttons.
Background gradient	Apply a gradient effect to the button background.
Border	Set the border color for the buttons.
Text	Define the color of the button text.
Show background on hover	Enable a hover background effect for buttons.
Background hover	Set the background color when the button is hovered.
Background gradient hover	Apply a gradient effect for the hover state of the button.
Border hover	Define the border color for the button on hover.
Text hover	Set the text color for the button when hovered.
Enable shadow	Turn on or off the shadow effect for buttons.