Shopify Collection Tabs: Code or App? Expert Guide for Dawn Theme

Hey everyone! As a Shopify migration expert and someone who spends a lot of time diving into the community forums, I often see store owners grappling with similar challenges. One common request that pops up is how to display collections in a more dynamic, engaging way on the homepage – specifically, using interactive tabs. It’s a fantastic idea for showcasing different product categories without overwhelming visitors, but getting it right, especially with themes like Dawn, can be a bit tricky.

I recently followed a really insightful thread titled "Adding collection tabs and products view associated with it" started by a store owner named swarique. They were looking for a reliable solution for their Dawn 15.4.1 theme after older snippets caused bugs. What unfolded was a great example of community collaboration, with experts iterating on a code solution to meet every need.

The Quest for Homepage Collection Tabs

Swarique’s initial problem was familiar: they wanted collection tabs on their homepage but found existing code snippets buggy or incompatible with newer Dawn versions. Beyond just getting the tabs to show, they had specific customization needs:

Customizing font sizes for the tabs.
Ensuring sorting and filtering worked (this was an initial concern, but as we'll see, custom sections usually display curated products, linking to full collections for advanced filtering).
Making sure product images displayed correctly and were clickable.
Adding "Add to Cart" buttons.
Customizing tab button colors, text, and borders.
Adding a "View All" button for each tab.
Controlling heading alignment.
Implementing different mobile layouts (stacked or carousel).

That's a pretty comprehensive wish list, right? Let's see how the community tackled it.

Two Paths to Dynamic Tabs: Custom Code or a Ready-Made App

The discussion highlighted two main approaches, each with its merits:

Option 1: The Robust Custom Code Solution (Community-Driven)

liquidshop.co rightly pointed out that Dawn doesn't have native tabbed collections, and relying on old snippets is a recipe for disaster. The best practice, they advised, is to build it as a custom section. This way, it lives separately from your theme's core files, making it more resilient to theme updates. This became the foundation for the code solution.

A user named topnewyork jumped in with an initial code snippet to create a `custom-collection-tabs.liquid` section. While it got the basic tab structure working, swarique quickly found that product images weren't displaying, products weren't clickable, and there weren't many styling options.

This is where mastroke really stepped up. Through several iterations, they refined the code, progressively adding more functionality and customizer settings based on swarique's feedback. It was a fantastic collaborative effort!

Here's a quick look at the evolution of the code, addressing swarique's points:

Images & Clickability: Mastroke ensured the `card-product` render was correct, bringing back product images and making them clickable.
Custom Tab Titles: A new setting was added to allow store owners to define a custom title for each tab, defaulting to the collection name if left blank.
Tab Button Styling: Dedicated settings for background color, text color, and hover states were introduced, along with an option for button border color.
"View All" Button: Code was added to display a "View All" button when a collection had more products than those displayed in the tab, linking directly to the full collection page.
Add to Cart: Mastroke clarified that the "Add to Cart" (or Quick Add) functionality was already part of the `card-product` render and could be enabled via theme customizer settings.
Heading Alignment & Mobile Layouts: Finally, settings for heading alignment (left, center, right) and mobile layout options (stacked or carousel) were integrated, making the section incredibly flexible.

The original concern about sorting and filtering is an important one to clarify. A custom collection tab section like this is designed to display a curated selection of products. When you click the "View All" button, you're taken to the actual collection page, where Dawn's native sorting and filtering options would then apply. So, while the tabs themselves don't offer live filtering, they serve as an excellent gateway to those capabilities.

Implementing the Comprehensive Code Solution

If you're comfortable with a bit of code and want maximum control, this is a fantastic, robust solution. Here's how you can implement the final, comprehensive version provided by mastroke:

Backup Your Theme: Always, always, always duplicate your live theme before making any code changes. Go to Online Store > Themes, find your current theme, click Actions > Duplicate.
Create a New Section File:
- In your Shopify admin, go to Online Store > Themes.
- Click Actions > Edit code on your duplicated theme.
- Under the "Sections" folder, click Add a new section.
- Name the file `custom-collection-tabs` (it will automatically add `.liquid`).
- Delete any default code in the new file.

Paste the Code: Copy the entire code block below and paste it into your newly created `custom-collection-tabs.liquid` file. Save the file.

{{ '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 %}

Add the Section to Your Homepage:
- Go back to your Shopify admin and navigate to Online Store > Themes.
- Click Customize on your duplicated theme.
- On the left sidebar, click Add section.
- Search for "Custom Collection Tabs" and add it to your homepage.
Configure Your Tabs:
- Click on the newly added "Custom Collection Tabs" section.
- You'll see settings for the section heading, alignment, padding, and mobile layout.
- Under "Blocks," click Add Collection Tab.
- For each block, you can Select Collection and optionally provide a custom Title for the tab.
- Adjust the number of desktop columns, image ratio, image shape, and other product card display options.
- Crucially, customize your tab button colors (background, text, hover states) and border color to match your brand.
- For "Add to Cart" buttons, look for the "Quick add" setting and choose "standard" or "bulk".
Font Size Customization: The provided CSS in the `

Unlock Dynamic Product Displays: Your Ultimate Guide to Shopify Collection Tabs

The Quest for Homepage Collection Tabs

Two Paths to Dynamic Tabs: Custom Code or a Ready-Made App

Option 1: The Robust Custom Code Solution (Community-Driven)

Implementing the Comprehensive Code Solution

{{ section.settings.heading }}