I want to create a banner for blog page & want the banner to change based specific blog.

Solved
sakinur_rahman
Tourist
5 1 0

I want to create a banner for a blog on a merchant's shop and I want the banner to change based on the blog. Is there any way to solve this problem? Please see the attached screenshot to understand my requirements clearly.

Screenshot_299.png

 

0 Likes
Ninthony
Shopify Partner
1634 224 613

This is an accepted solution.

You can make a case statement based off the blog's handle. So lets say you wanted to have a banner for your recipes blog, your travel blog, and a general banner for any other blog. You could do:

{% case blog.handle %}
  {% when 'recipes' %}
    {% assign banner_image = '/path-to-your-recipe-banner.jpg' %}
  {% when 'travel' %}
    {% assign banner_image = '/path-to-your-travel-banner.jpg' %}
  {% else %}
    {% assign banner_image = '/path-to-your-general-banner.jpg' %}
{% endcase %}
<style>
//This is for a background image should you go that route. 
//Alternatively you can put it inside the banner-container div in an image tag.
.banner-container {
height: 300px;
background-image: url('{{ banner_image }}');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="banner-container">

</div>
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
sakinur_rahman
Tourist
5 1 0

This is an accepted solution.

I have another query. If I want to add different little on the banner image, how it would be done? Thank you for your great concept.

0 Likes
Ninthony
Shopify Partner
1634 224 613

This is an accepted solution.

I assume you mean "title" not "little". Let's say you want to put the title of the blog directly in the center of the banner. You need to make your banner container's position relative, and the title's position absolute:

{% case blog.handle %}
  {% when 'recipes' %}
    {% assign banner_image = '/path-to-your-recipe-banner.jpg' %}
  {% when 'travel' %}
    {% assign banner_image = '/path-to-your-travel-banner.jpg' %}
  {% else %}
    {% assign banner_image = '/path-to-your-general-banner.jpg' %}
{% endcase %}
<style>
//This is for a background image should you go that route. 
//Alternatively you can put it inside the banner-container div in an image tag.
.banner-container {
height: 300px;
background-image: url('{{ banner_image }}');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.banner-title {
position: absolute;
left: 50%;
top: 50%
transform: translateX(-50%)translateY(-50%);
}
</style>
<div class="banner-container">
  <div class="banner-title">{{ blog.title }}</div>
</div>

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D