Upgrade Your Blog Layout - Tag Badges

Shopify is really great for ecommerce, but I often wished they had some better blog features.

In this customization, we’re upgrading the Shopify blog pages by adding your blog tags.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

Links:

• Blog Sidebar customization

 

 

Add Custom Blog Badge Settings

Edit config file settings_schema.json

  {
    "name": "Blog Custom Badge",
    "settings": [

      {
        "type": "checkbox",
        "id": "show_tag_badge",
        "default": false,
        "label": "Show Tag Badge On Cards"
      },
      {
        "type": "select",
        "id": "show_article_tag",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "badge_link",
            "label": "Badge with link"
          },
          {
            "value": "badge_nolink",
            "label": "Badge no link"
          }
        ],
        "default": "none",
        "label": "Show Article Tags"
      },
      {
        "type": "text",
        "id": "excluded_tags",
        "label": "Excluded Tags",
        "placeholder": "tag1,tag2,tag3",
        "info": "Enter tags to exclude, separated by commas"
      },
      {
        "type": "color_scheme",
        "id": "blog_tag_color_scheme",
        "label": "Blog Tag Color Scheme",
        "default": "scheme-2"
      },
      {
        "type": "select",
        "id": "blog_tag_hover_effect",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "underline",
            "label": "Underline"
          },
          {
            "value": "bold",
            "label": "Bold"
          }
        ],
        "default": "none",
        "label": "Tag Hover Effect"
      }
    ]
  },

Add Tag Badges to Blog Cards

Edit main-blog.liquid

Add stylesheet to top of file

{{ 'component-blog-badges-custom.css' | asset_url | stylesheet_tag }}

Add show_tag_badge: section.settings.show_tag_badge to the article-card render

          {%- render 'article-card',
            article: article,
            media_height: section.settings.image_height,
            media_aspect_ratio: article.image.aspect_ratio,
            show_image: section.settings.show_image,
            show_date: section.settings.show_date,
            show_author: section.settings.show_author,
            show_excerpt: true,
            show_tag_badge: settings.show_tag_badge
          -%}

Edit snippet article-card.liquid

        {%- if show_tag_badge -%}
          <div class="card__badge {{ settings.badge_position }}">

            {%- assign excluded_tags = settings.excluded_tags | split: ',' -%}
            {%- assign cleaned_excluded_tags = '' -%}
            {%- for tag in excluded_tags -%}
              {%- assign cleaned_tag = tag | strip | downcase -%} 
              {%- assign cleaned_excluded_tags = cleaned_excluded_tags | append: cleaned_tag | append: ',' -%}
            {%- endfor -%}
            {%- assign final_excluded_tags = cleaned_excluded_tags | split: ',' -%}
            {%- for tag in article.tags -%}
              {%- assign current_tag = tag | downcase -%} 
              {%- unless final_excluded_tags contains current_tag -%}
                <span class="tag-badge badge color-{{ settings.blog_tag_color_scheme }}">
                  {{ tag }}
                </span>
              {%- endunless -%}
            {%- endfor -%}
          </div>
        {%- endif -%}

Add Tag Badges to Blog Articles

Edit section main-article.liquid

Add stylesheet to top of file

{{ 'component-blog-badges-custom.css' | asset_url | stylesheet_tag }}

Add code to include tag badges in article header

{% if settings.show_article_tag != 'none' %}
          
            
  {%- assign excluded_tags = settings.excluded_tags | split: ',' -%}
  {%- assign cleaned_excluded_tags = '' -%}
  {%- for tag in excluded_tags -%}
    {%- assign cleaned_tag = tag | strip | downcase -%} 
    {%- assign cleaned_excluded_tags = cleaned_excluded_tags | append: cleaned_tag | append: ',' -%}
  {%- endfor -%}
  {%- assign final_excluded_tags = cleaned_excluded_tags | split: ',' -%}
  
  <div class="tag-buttons">
    {%- for tag in article.tags -%}
      {%- assign current_tag = tag | downcase -%} 
      {%- unless final_excluded_tags contains current_tag -%}
  
  
        {% if settings.show_article_tag == 'badge_link' %}
        <a href="{{ blog.url }}/tagged/{{ tag | handle }}"
           class="tag-badge badge color-{{ settings.blog_tag_color_scheme }}
                  {%- if settings.blog_tag_hover_effect == 'underline' -%} hover-underline
                  {%- elsif settings.blog_tag_hover_effect == 'bold' -%} hover-bold
                  {%- endif -%}">
          {{ tag }}
        </a>
  {% elsif settings.show_article_tag == 'badge_nolink' %}
        <span class="tag-badge badge color-{{ settings.blog_tag_color_scheme }}
                {%- if settings.blog_tag_hover_effect == 'underline' -%} hover-underline
                {%- elsif settings.blog_tag_hover_effect == 'bold' -%} hover-bold
                {%- endif -%}">
          {{ tag }}
        </span>
  {% endif %}
        
      {%- endunless -%}
    {%- endfor -%}
  </div>
            
            
{% endif %}

Add Custom Styling

Create new asset component-blog-badges-custom.css

  .tag-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px; /* Adjust spacing above the tag list */ 
    gap: 5px; /* Adjust the spacing between tags */
  }
  
  .badge.tag-badge {
    text-decoration: none; 
  }
  
  .badge.tag-badge.hover-underline:hover {
    text-decoration: underline; /* Underline on hover */
  }
  
  .badge.tag-badge.hover-bold:hover {
    font-weight: bold; /* Bold text on hover */
  }
  
  .card__badge .tag-badge {
    margin-right: 5px;
  }

  .tag-buttons .tag-badge.active { 
    background-color: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    border: 1px solid rgb(var(--color-background));
  }