Demonstrate Blog Sidebar.
View this pattern on the live demo site
Sidebar stack (topics, CTA, related posts) included from blog layouts.
{% comment %}
Displays a sidebar next to blog posts and other blog content.
This template makes one additional modification to the input, which is that if there is both related content and recent posts, the related content will automatically be excluded from recent posts
Inputs:
show_sidebar_search - The sidebar serach will only be displayed when this is true
Inputs passed through to the search widget:
sidebar_search_target - the URL to submit searches to. Must be specified for the searchform to be displayed
sidebar_search_title - the title for the search widget. Optional
sidebar_search_param - The query parameter to use for the search term. Defaults to 'q'
sidebar_search_placeholder - The placeholder to use in the search field
search_term - optional current search term to prefill the form
Inputs passed through to the related content widget:
sidebar_related_content - the list of related content to display in the sidebar
sidebar_related_content_title - the title for the related content widget. Optional
Inputs passed through to the context widget:
sidebar_context_title - optional title for context content
sidebar_context_html - optional HTML content for context content
Inputs passed through to the topics widget:
sidebar_topics - optional list of topics/tags to display
sidebar_topics_title - optional title for the topics widget
Inputs passed through to the recent posts widget:
sidebar_recent_posts_count - the number of recent posts to display. If not specified, the recent posts will not be displayed
sidebar_recent_posts_title - the title for the recent posts widget. Optional
sidebar_recent_posts_exclude - posts to exclude from the recent posts
sidebar_recent_posts_filters - filters to use for the recent posts.
Inputs passed through to the CTA widget:
none. It uses custom fields instead
{% endcomment -%}
{%- if sidebar_related_content is_valid and sidebar_recent_posts_count is_int and sidebar_recent_posts_count > 0 -%}
{%- assign sidebar_recent_posts_exclude = sidebar_recent_posts_exclude | concat: sidebar_related_content -%}
{%- endif -%}
<aside class="blog-sidebar d-flex flex-column gap-4">
{%- if show_sidebar_search %}{% include "/partials/blog_sidebar/_searchform.liquid" %}{% endif -%}
{%- comment %}CTA early so mobile visitors see Visit Us before scrolling past the full post grid{% endcomment -%}
{%- include "/partials/blog_sidebar/_simple_cta.liquid" -%}
{%- include "/partials/blog_sidebar/_topics.liquid" -%}
{%- include "/partials/blog_sidebar/_contextcard.liquid" -%}
{%- include "/partials/blog_sidebar/_relatedcontent.liquid" -%}
{%- include "/partials/blog_sidebar/_recentposts.liquid" -%}
</aside>
Optional search widget at the top of the sidebar.
{% comment %}
Displays a form to search the blog in the sidebar.
Inputs:
sidebar_search_target - the URL to submit searches to. If not specified, the searchform will not be displayed
sidebar_search_title - the title for the search widget. Optional
sidebar_search_param - The query parameter to use for the search term. Defaults to 'q'
sidebar_search_placeholder - The placeholder to use in the search field
search_term - Optional. Prefills the search field
{% endcomment -%}
{%- if sidebar_search_target is_valid -%}
{%- var search_param = sidebar_search_param | default: 'q' -%}
<div class="card border-0 shadow-sm text-bg-light">
<div class="card-body p-3 p-lg-4">
{%- if sidebar_search_title is_valid -%}
{%- include '/common/_title.liquid' title:sidebar_search_title title_classname:'h6 text-uppercase fw-bold mb-3' -%}
{%- endif -%}
{%- include '/partials/_search_form.liquid' search_action:sidebar_search_target search_param:search_param search_placeholder:sidebar_search_placeholder -%}
</div>
</div>
{%- endif -%}
Visit-us CTA card owned by the sidebar (shown early on mobile).
{% comment %}
Displays a simple CTA in the sidebar.
Inputs: (none)
Custom Fields:
show_sidebar_cta
sidebar_cta_heading
sidebar_cta_text
sidebar_cta_button_url
sidebar_cta_button_label
{% endcomment -%}
{%- if entity.show_sidebar_cta.on -%}
<div class="card border-0 shadow-sm text-bg-dark overflow-hidden">
<div class="card-body p-4 p-lg-4 text-center">
{%- include "/partials/_simple_cta.liquid" heading:entity.sidebar_cta_heading text:entity.sidebar_cta_text button_url:entity.sidebar_cta_button_url button_label:entity.sidebar_cta_button_label cta_invert:true -%}
</div>
</div>
{%- endif -%}
Custom fields owned by the sidebar CTA widget.
[
{
"Type": "toggle",
"FieldID": "show_sidebar_cta",
"Label": "Show Sidebar CTA",
"OnValue": "show",
"OffValue": "hide",
"OnColor": "green",
"OffColor": "red",
"OnLabel": "Show",
"OffLabel": "Hide"
},
{
"Type": "group",
"Fields": [
{
"Type": "text",
"FieldID": "sidebar_cta_heading",
"Label": "Heading"
},
{
"Type": "html",
"FieldID": "sidebar_cta_text",
"Label": "Text"
},
{
"Type": "url",
"FieldID": "sidebar_cta_button_url",
"Label": "Button URL"
},
{
"Type": "text",
"FieldID": "sidebar_cta_button_label",
"Label": "Button Label"
}
],
"Label": "Sidebar CTA"
}
]
Tag/topic list widget.
{% comment %}
Displays related topics/tags in the sidebar.
Inputs:
sidebar_topics - collection of tags/topics
sidebar_topics_title - optional title for topics widget
{% endcomment -%}
{%- if sidebar_topics is_valid -%}
<div class="card border-0 shadow-sm">
<div class="card-body p-3 p-lg-4">
{%- if sidebar_topics_title is_valid -%}
{%- include '/common/_title.liquid' title:sidebar_topics_title title_classname:'h6 text-uppercase fw-bold mb-3' -%}
{%- endif -%}
{%- include '/partials/_taglist.liquid' tags:sidebar_topics -%}
</div>
</div>
{%- endif -%}
Optional HTML context card (author bio, tag description).
{% comment %}
Displays optional contextual content in the sidebar.
Inputs:
sidebar_context_title - optional title for context content
sidebar_context_html - optional HTML content to render
{% endcomment -%}
{%- if sidebar_context_html is_valid -%}
<div class="card border-0 shadow-sm text-bg-light">
<div class="card-body p-3 p-lg-4">
{%- if sidebar_context_title is_valid -%}
{%- include '/common/_title.liquid' title:sidebar_context_title title_classname:'h6 text-uppercase fw-bold mb-3' -%}
{%- endif -%}
<div class="small mb-0">
{{ sidebar_context_html }}
</div>
</div>
</div>
{%- endif -%}
Related posts widget from a field on the parent section.
{% comment %}
Displays related content in the sidebar
Inputs:
sidebar_related_content - the list of related content to display in the sidebar
sidebar_related_content_title - the title for the related content widget. Optional
img_preset_blog_thumb - optional image preset for thumbnails
{% endcomment -%}
{%- if sidebar_related_content is_list and sidebar_related_content is_valid -%}
<div class="card border-0 shadow-sm">
<div class="card-body p-3 p-lg-4">
{%- if sidebar_related_content_title is_valid -%}
{%- include '/common/_title.liquid' title:sidebar_related_content_title title_classname:'h6 text-uppercase fw-bold mb-3' -%}
{%- endif -%}
<ul class="list-unstyled mb-0">
{%- for item in sidebar_related_content -%}
<li class="{% unless forloop.last %}mb-3 pb-3 border-bottom{% endunless %}">
{%- var hasUrl = item.has_url -%}
{%- var itemUrl = item.full_url -%}
{%- var itemImage = item.image -%}
{%- var itemTitle = item.title -%}
{%- var itemDate = '' -%}
{%- if item.object_type == 'blog_post' -%}
{%- set itemDate = item.post_date -%}
{%- endif -%}
{%- unless hasUrl -%}
{%- comment %}This is where you might add logic to determine an alternate URL if one might be determined programatically or from a separate property{% endcomment -%}
{%- endunless -%}
{%- var tagType = 'span' %}{% if hasUrl %}{% set tagType = 'a' %}{% endif -%}
{%- if hasUrl -%}
<a href="{{ itemUrl }}" class="text-decoration-none link-dark d-flex gap-3 align-items-start">
{%- else -%}
<div class="d-flex gap-3 align-items-start">
{%- endif -%}
{%- if itemImage.is_valid -%}
{%- img itemImage link:false preset:img_preset_blog_thumb class:'rounded flex-shrink-0' style:'width: 4.5rem; height: 4.5rem; object-fit: cover;' -%}
{%- endif -%}
<span class="flex-grow-1">
<span class="d-block fw-semibold">{{ itemTitle }}</span>
{%- if itemDate is_valid -%}
<span class="small text-muted">{{ itemDate | date: 'MMM d, yyyy' }}</span>
{%- endif -%}
</span>
{%- if hasUrl %}</a>{% else %}</div>{% endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
{%- endif %}Recent posts widget; excludes related items when both are shown.
{% comment %}
Displays recent blog posts in the sidebar
Inputs:
sidebar_recent_posts_count - the number of recent posts to display. If not specified, the recent posts will not be displayed
sidebar_recent_posts_title - the title for the recent posts widget. Optional
sidebar_recent_posts_exclude - posts to exclude from the recent posts
sidebar_recent_posts_filters - filters to use for the recent posts.
img_preset_blog_thumb - optional image preset for thumbnails
{% endcomment -%}
{%- if sidebar_recent_posts_count is_int and sidebar_recent_posts_count > 0 -%}
{%- blog_posts var recent_posts = *sidebar_recent_posts_filters sort_by:'post_date' sort_direction:'desc' limit:sidebar_recent_posts_count exclude:sidebar_recent_posts_exclude -%}
{%- if recent_posts.is_valid -%}
<div class="card border-0 shadow-sm">
<div class="card-body p-3 p-lg-4">
{%- var title = sidebar_recent_posts_title | default: 'Recent Posts' -%}
{%- include '/common/_title.liquid' title_classname:'h6 text-uppercase fw-bold mb-3' -%}
<ul class="list-unstyled mb-0">
{%- for post in recent_posts -%}
<li class="{% unless forloop.last %}mb-3 pb-3 border-bottom{% endunless %}">
{%- if post.has_url -%}
<a href="{{ post.full_url }}" class="text-decoration-none link-dark d-flex gap-3 align-items-start">
{%- if post.image.is_valid -%}
{%- img post.image link:false preset:img_preset_blog_thumb class:'rounded flex-shrink-0' style:'width: 4.5rem; height: 4.5rem; object-fit: cover;' -%}
{%- endif -%}
<span class="flex-grow-1">
<span class="d-block fw-semibold">{{ post.title }}</span>
<span class="small text-muted">{{ post.post_date | date: 'MMM d, yyyy' }}</span>
</span>
</a>
{%- else -%}
<span class="fw-semibold">{{ post.title }}</span>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
{%- endif -%}
{%- endif %}