Unlock Dynamic Product Displays: Adding Custom Collection Tabs to Shopify Dawn

View original discussion by swarique on Shopify Community →

Hey fellow store owners! As a Shopify migration expert and someone who spends a lot of time in the community forums, I often see common pain points. One that popped up recently, and really resonated, was around adding dynamic collection tabs to the homepage of the Dawn theme. It's a fantastic way to showcase various product categories without overwhelming your visitors, but it can be a bit tricky to get right, especially with older code snippets.

I saw our friend swarique grappling with this exact challenge. They were using Dawn 15.4.1 and found that many existing solutions were buggy or just not working anymore. Sound familiar? Technology moves fast, and what worked a year ago might not play nice with the latest theme versions. swarique was looking for a robust solution that allowed for things like customizing font sizes, ensuring sort and filter options still worked, and generally making the tabs look and feel integrated.

Why Custom Collection Tabs Are a Game Changer

Before we dive into the 'how,' let's quickly touch on the 'why.' Collection tabs on your homepage aren't just a pretty face. They:

  • Improve Navigation: Help customers quickly jump to product categories they're interested in.
  • Optimize Space: Display a lot of products from different collections in a compact, organized way.
  • Boost Engagement: Keep visitors browsing longer by presenting diverse offerings upfront.
  • Enhance Aesthetics: Give your homepage a modern, professional, and interactive feel.

Navigating the Community Solutions: Code vs. No-Code

The beauty of the Shopify community is the diverse expertise. When swarique posted their dilemma, several helpful folks jumped in with different perspectives.

The "Build It Right" Approach: Custom Sections

liquidshop.co and Sajini-Annie from Identixweb both offered excellent foundational advice right off the bat. They highlighted that the cleanest and most future-proof way to implement something like this on Dawn is to build it as a custom section. Why? Because it lives separately from your theme's core files, making it more resilient to theme updates and easier to manage in the long run. They suggested creating a new Liquid section file that loops through collections, renders product cards for each tab, and uses some vanilla JavaScript for the tab switching.

This is where mastroke really shined, providing an incredibly detailed and iteratively improved code solution that addressed every one of swarique's requests. It was a fantastic example of community collaboration!

The "Easy Button" Alternative: Apps

Another great suggestion came from Custom-Cursor, who pointed out that if you're not comfortable with coding, an app like "Section Kit" could provide a built-in collection tabs section directly from the theme editor. This is a brilliant no-code option that saves you from diving into Liquid and CSS, and it's definitely worth considering if you prefer a simpler, app-based approach for easier maintenance and theme switching.

Implementing Custom Collection Tabs (The Code Way)

If you're ready to roll up your sleeves and get into the code, mastroke's solution is comprehensive. It addresses almost everything swarique asked for, from custom titles to button styling and mobile layouts. Here's how you can implement it:

Step-by-Step Instructions:

  1. Access Your Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme (preferably a duplicate to test on!) and click Actions > Edit code.
  2. Create a New Section File: In the `sections` folder, click Add a new section. Name it `custom-collection-tabs`.
  3. Paste the Code: Replace all the default code in the new `custom-collection-tabs.liquid` file with the following code provided by mastroke. This is the most updated and complete version from the thread: 
    {{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == 'blob' %}
  {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- unless section.settings.quick_add == 'none' -%}
  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
  
{%- endunless -%}

{%- if section.settings.quick_add == 'standard' -%}
  
{%- endif -%}

{%- if section.settings.quick_add == 'bulk' -%}
  
  
  
  
{%- endif -%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
  .tab-link-custom {
    padding: 12px 24px;
    border: 1px solid {{ section.settings.button_border_color }};
    background: {{ section.settings.tab_btn_bg_color }};
    color: {{ section.settings.tab_btn_color }};
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
    transition: all 0.3s ease;
  }
  .tab-link-custom.active {
    background: {{ section.settings.tab_btn_bg_color_hover }};
    color: {{ section.settings.tab_btn_color_hover }};
    border-color: #000;
  }
  .tab-panel-custom {
    animation: fadeInTabs 0.5s ease;
  }
  @keyframes fadeInTabs {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .button-row.center {
    margin-top: 4rem;
  }
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .collection-tabs-container.page-width.mobile-layout-carousel {
      padding: 0;
    }
  }
  @media screen and (max-width: 749px) {
    .mobile-layout-stacked .tabs-wrapper {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .mobile-layout-stacked .tab-link-custom {
      width: 100%;
    }
    .mobile-layout-flex .tabs-header {
      justify-content: flex-start !important;
      flex-wrap: nowrap !important;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      gap: 10px;
      padding-bottom: 5px;
    }
    .mobile-layout-flex .tab-link-custom {
      flex: 0 0 auto;
      white-space: nowrap;
      scroll-snap-align: start;
    }
    .mobile-layout-flex .tabs-header::-webkit-scrollbar {
      display: none;
    }
    .collection-tabs-container.page-width.mobile-layout-carousel {
      padding-right: 0;
    }
    .mobile-layout-carousel .tabs-content ul {
      margin-left: -1.5rem !important;
      width: auto !important;
    }
    .mobile-layout-stacked .tabs-header.center {
      margin-right: -1.5rem;
    }
  }
{%- endstyle -%}

    
  
    
    {{ section.settings.heading }}
  
    

  
    
    {% for block in section.blocks %}
      
    
        
      
    
    {% endfor %}
  
    

  
    
    {% for block in section.blocks %}
      
    
        {% if section.settings.mobile_layout == 'carousel' %}
          
        {% endif %}

        
      
          {%- if block.settings.collection != blank -%}
            {%- for product in block.settings.collection.products limit: section.settings.columns_desktop -%}
              
    • 
                {% render 'card-product',
                  card_product: product,
                  media_aspect_ratio: section.settings.image_ratio,
                  image_shape: section.settings.image_shape,
                  show_secondary_image: section.settings.show_secondary_image,
                  show_vendor: section.settings.show_vendor,
                  show_rating: section.settings.show_rating,
                  section_id: section.id,
                  quick_add: section.settings.quick_add
                %}
              
      • 
            {%- endfor -%}
          {%- else -%}
            
      Please select a collection in the customizer.
      
          {%- endif -%}
        
    

        {% if section.settings.mobile_layout == 'carousel' %}
              
        {% endif %}

        {% if block.settings.collection != blank and block.settings.collection.all_products_count > section.settings.columns_desktop %}
          
    
            
              View All
            
          
    
        {% endif %}
      
    
    {% endfor %}
  
    

    

{% schema %}
{
  "name": "Custom Collection Tabs",
  "settings": [
    { 
      "type": "text",
      "id": "heading", 
      "label": "Section Heading", 
      "default": "PALMONAS TOP STYLES" 
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "left"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header_collection.content"
    },    
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.featured-collection.settings.image_ratio.label"
    },
    {
      "type": "select",
      "id": "image_shape",
      "options": [
        {
          "value": "default",
          "label": "t:sections.all.image_shape.options__1.label"
        },
        {
          "value": "arch",
          "label": "t:sections.all.image_shape.options__2.label"
        },
        {
          "value": "blob",
          "label": "t:sections.all.image_shape.options__3.label"
        },
        {
          "value": "chevronleft",
          "label": "t:sections.all.image_shape.options__4.label"
        },
        {
          "value": "chevronright",
          "label": "t:sections.all.image_shape.options__5.label"
        },
        {
          "value": "diamond",
          "label": "t:sections.all.image_shape.options__6.label"
        },
        {
          "value": "parallelogram",
          "label": "t:sections.all.image_shape.options__7.label"
        },
        {
          "value": "round",
          "label": "t:sections.all.image_shape.options__8.label"
        }
      ],
      "default": "default",
      "label": "t:sections.all.image_shape.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_rating.label",
      "info": "t:sections.featured-collection.settings.show_rating.info"
    },
    {
      "type": "select",
      "id": "quick_add",
      "default": "none",
      "label": "t:sections.main-collection-product-grid.settings.quick_add.label",
      "options": [
        {
          "value": "none",
          "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
        },
        {
          "value": "standard",
          "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
        },
        {
          "value": "bulk",
          "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
        }
      ]
    },
    {
      "type": "header",
      "content": "Set background and text color for tab button"
    },
    {
      "type": "color",
      "id": "tab_btn_bg_color",
      "label": "Button Background Color"
    },
    {
      "type": "color",
      "id": "tab_btn_color",
      "label": "Button Text Color"
    },
    {
      "type": "color",
      "id": "tab_btn_bg_color_hover",
      "label": "Button Background Color (Active)"
    },
    {
      "type": "color",
      "id": "tab_btn_color_hover",
      "label": "Button Text Color (Active)"
    },
    {
      "type": "color",
      "id": "button_border_color",
      "label": "Button Border Color",
      "default": "#000000"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
      "type": "select",
      "id": "mobile_layout",
      "label": "Mobile Layout",
      "options": [
        {
          "value": "stacked",
          "label": "Stacked"
        },
        {
          "value": "carousel",
          "label": "Carousel"
        }
      ],
      "default": "stacked"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection Tab",
      "limit": 8,
      "settings": [
        { 
          "type": "collection",
          "id": "collection",
          "label": "Select Collection"
        },
        { 
          "type": "text",
          "id": "title",
          "label": "Title"
        }
      ]
    }
  ],
  "presets": [
    { 
      "name": "Custom Collection Tabs" 
    }
  ]
}
{% endschema %}
  4. Save the File: Click Save.
  5. Add to Your Homepage: Go back to Online Store > Themes and click Customize. In the theme editor, click Add section and you should find "Custom Collection Tabs" as an option.
  6. Configure Your Tabs: Once added, you can click on the section to open its settings. Here, you can:
    • Set a main Section Heading and its alignment (left, center, right).
    • Add Collection Tabs (up to 8 blocks). For each block, select a collection and optionally give it a custom Title (if left blank, it uses the collection name).
    • Control the number of columns on desktop (1-4).
    • Adjust image ratio and shape, and choose to show secondary image, vendor, or rating.
    • Enable Quick Add (Add to Cart button) with options for 'standard' or 'bulk'. This was a key point for swarique, who initially thought it was missing, but mastroke confirmed it's configurable here! Shopify Theme Customizer settings for collection tabs
    • Customize button colors (background, text, and their active/hover states) and the button border color.
    • Set padding top and bottom for the section.
    • Choose a Mobile Layout: 'stacked' (tabs appear as a vertical list) or 'carousel' (tabs scroll horizontally).
    • A "View All" button will automatically appear if a collection has more products than you've set to display in the tab, linking directly to the full collection page.

Initially, swarique noticed that images weren't displaying, and products weren't clickable after an earlier code version. Mastroke quickly resolved this, ensuring the `card-product` render snippet works correctly within the tabs. So you should see your products with images and be able to click them!

Shopify Theme Customizer settings with quick add and color scheme options

Addressing Font Size Customization

One of swarique's initial questions was about customizing font size. If you look at the CSS within the `