Shopify themes, liquid, logos, and UX
So I've searched both here and Google but can't seem to find an answer. How do I add a sidebar to the blog in the Crave theme? While we're at it, I'd like to add a search bar too - preferably one that only searches blog posts, not the entire site. Thanks!
@CelticSourdoughwelcome to the Shopify Community,
please refer to the sidebar code below you can just create a snippet file called "blog-sidebar" and put this code into that and render that snippet into your main blog template like render "blog-sidebar" and thats it.
<div class="sidebar_blog_search">
<div class="sidebar_blog_search_box">
<form method="get" action="/search">
<input placeholder="SEARCH BLOG" class="searchBox field" type="text" name="q"{% if search.performed %} value="{{ search.terms | escape | downcase }}"{% endif %} />
<input type="hidden" name="type" value="article" />
<input class="searchSubmit" type="submit" value="Search" class="submit" />
</form>
</div>
</div>
<div class="sidebar_item_box most_popular_section">
<h3 class="article--title font--section-heading">most popular</h3>
<div class="most_popular_section_inner">
{% assign counter = 0 %}
{% for article in blogs.indique-blog.articles %}
{% if counter == 3 %}
{% break %}
{% endif %}
{% if article.tags.size > 0 %}
{% for tag in article.tags %}
{% if tag contains 'most popular' %}
{% assign counter = counter | plus: 1 %}
<div class="item_box_inner">
<div class="item_box_left">
{% if article.image %}
<img src="{{ article | img_url: 'large' }}" title="">
{% endif %}
</div>
<div class="item_box_right">
{% if article.tags.size > 0 %}
{% for tag in article.tags %}
<div class="item_tag_title"><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a></div>
{% break %}
{% endfor %}
{% endif %}
<div class="item_title"><a href="{{ article.url }}">{{ article.title }}</a></div>
<div class="item_readmore"><a href="{{ article.url }}" title="read more">read more</a></div>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
thaks
Thank you! That'll put a search bar in, but it's at the bottom of the page, not the side. Also, the sidebar is my main interest, but the search bar is 99% as important, as I plan on having many, many recipes in the blog. I'd like to be able to search using tags and/or categories too. Here's the URL to take a look: https://celticsourdough.com/blogs/recipes
I guess you need to hire an expert who can do this for you and place and change the code accordingly. the code i provided was 100% in working state but upon your requirements it can be change and updated.
thanks
Okay, thank you. You've been extremely helpful in setting me in the right direction. I'll have to look up a few CSS sites to learn how to style it a bit more to my requirements.
GREAT
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025