Best Sellers & New Arrivals next to each other

Store Design
, , , ,

Topic summary

A user wants to display two Shopify collections (“Best Sellers” and “New Arrivals”) side by side on the same page, with each showing a 2×4 product grid that updates when clicked, rather than stacking vertically.

Proposed Solutions:

  • Multi-column layout: Use a template section with 50% width columns for each collection, limiting display to 2 rows × 4 products. For click-to-swap functionality without page reload, implement tabs or collapsible sections—either through built-in theme features or apps like EasyTabs.

  • Custom AJAX implementation: A more technical solution involves creating three custom Liquid files (collection-ajax-products.liquid, collection-ajax.liquid, and collection-tabs.liquid) to enable dynamic collection loading via AJAX. This approach includes schema configuration for desktop/mobile column settings and supports up to 10 collection blocks.

Both solutions require testing across desktop and mobile devices before publishing. The custom code approach offers more control but requires theme customization knowledge.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone, need help.

So I have made two collections namely “Best Sellers” & “New Arrivals”

Using templates I can add them one below another but I want them next to each other.

When I click on one of it it should one 2x4 output on the same page

Thank you, I am unable to upload the image

The query I have is used by most websites.

2

Hello,
To display Best Sellers and New Arrivals side by side, use a multi-column section in your store’s template, setting each collection to 50% width. Limit each to 2 rows × 4 products for a clean grid. If you want them to swap on click without leaving the page, use Tabs or Collapsible sections, either built into your theme or added via an app like EasyTabs. Preview the layout on desktop and mobile before publishing. Let me know if you need further tweaks!

3

Hi @ChiragShah
I am from Mageplaza - Shopify solution expert.

You can configure it to display two collections side by side as follows:

ajaxsolution.png
ajaxsolution.png1577×915 216 KB


To enable loading collections via AJAX, you can customize your theme:

  • Create the file: sections/collection-ajax-products.liquid

  {% for product in collection.products limit: 8 %}
    

      {% render 'product-card', product: product %}
    

  {% endfor %}
  • Create the file: sections/collection-ajax.liquid
{% section 'collection-ajax-products' %}
  • Create the file: sections/collection-tabs.liquid
{% comment %} Section: Collection Tabs {% endcomment %}

  

    {% for block in section.blocks %}
      {% assign collection = collections[block.settings.collection] %}
      {% if collection %}
        - {% if collection.image %}
              
              {% endif %}
              ### {{ collection.title }}
          
        
      {% endif %}
    {% endfor %}
  

  

{% schema %}
{
  "name": "Collection Tabs",
  "tag": "section",
  "class": "collection-tabs-section",
  "settings": [
    {
      "type": "range",
      "id": "columns_desktop",
      "label": "Columns on desktop",
      "min": 1,
      "max": 5,
      "default": 3
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "options": [
        { "value": "1", "label": "1" },
        { "value": "2", "label": "2" }
      ],
      "default": "1"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Select collection"
        }
      ]
    }
  ],
  "max_blocks": 10,
  "presets": [
    {
      "name": "Collection Tabs",
      "category": "Collections",
      "blocks": []
    }
  ]
}

{% endschema %}

Note: Customize the HTML according to your specific requirements.
After that, you can add the Collection Tabs section similarly to how you create a collection list.

Please let me know if you have any questions or concerns. Thank you very much!