Venture theme - mega menu - product order

Hi All!

Please can someone assist me.

I use Venture Theme with the mega menu. The products displayed in the mega menu are the first 3-4 products in the “All” collections for each main menu item which is sorted by price from low to high (see screenshot below).

I would like to change the products displayed in in the mega menu so that they are the best sellers in the “All” collection for each main menu item.

Thanks in advance!

www.electricrideco.com

@Bizzerro

Thanks for your reply. I don’t see any options to change this in the Customization area.

1 Like

Hello @guyv :waving_hand:

I can recommend 2 ways you can try:

If you don’t have experience in coding, you can hire a developer to do the job. Hope that helps!

2 Likes

please share the code of the header file.

@Ahsan_ANC

Thanks for your reply. Please see below:


  

    
    
      {% for link in linklists[section.settings.main_linklist].links %}
        {% assign child_list_handle = link.title | handleize %}

        {% if link.links != blank %}
          - {{ link.title }}
              
              
            

            
              

                  {% include 'drawer-nav' %}
              
            

          

        {% else %}
          - {{ link.title }}
            
          

        {% endif %}
      {% endfor %}

      {% if shop.customer_accounts_enabled %}
        {% if customer %}
          - {{ 'layout.customer.account' | t }}
            
          

          - {{ 'layout.customer.log_out' | t }}
            
          

        {% else %}
          - {{ 'layout.customer.account' | t }}
            
          
        {% endif %}
      {% endif %}
    

  

{% if section.settings.promo_bar_enable and section.settings.promo_bar_text != blank %}
    
      

        {% if section.settings.promo_bar_link != blank %}
          
{% comment %} {{ section.settings.promo_bar_text | escape }} {% endcomment %}
        {{ section.settings.promo_bar_text }}  
        
        {% else %}
{% comment %} {{ section.settings.promo_bar_text | escape }} {% endcomment %}
        {{ section.settings.promo_bar_text }}
        {% endif %}
        
      

    

  {% endif %}

{% schema %}
{
  "name": {
    "cs": "Záhlaví",
    "da": "Overskrift",
    "de": "Titel",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "it": "Header",
    "ja": "ヘッダー",
    "ko": "헤더",
    "nb": "Header",
    "nl": "Koptekst",
    "pl": "Nagłówek",
    "pt-BR": "Cabeçalho",
    "pt-PT": "Cabeçalho",
    "sv": "Rubrik",
    "th": "ส่วนหัว",
    "tr": "Üstbilgi",
    "vi": "Đầu trang",
    "zh-CN": "标头",
    "zh-TW": "標頭"
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": {
        "cs": "Obrázek loga",
        "da": "Logobillede",
        "de": "Logo-Foto",
        "en": "Logo image",
        "es": "Logo",
        "fi": "Logokuva",
        "fr": "Image du logo",
        "it": "Immagine del logo",
        "ja": "ロゴ画像",
        "ko": "로고 이미지",
        "nb": "Logobilde",
        "nl": "Afbeelding van logo",
        "pl": "Obraz logo",
        "pt-BR": "Imagem do logo",
        "pt-PT": "Imagem do logótipo",
        "sv": "Logobild",
        "th": "รูปภาพโลโก้",
        "tr": "Logo görseli",
        "vi": "Hình ảnh logo",
        "zh-CN": "logo 图片",
        "zh-TW": "標誌圖片"
      }
    },
    {
      "type": "text",
      "id": "logo_max_width",
      "label": {
        "cs": "Šířka vlastního loga (v pixelech)",
        "da": "Tilpasset logobredde (i pixels)",
        "de": "Benutzerdefinierte Logobreite (Pixel)",
        "en": "Custom logo width (in pixels)",
        "es": "Ancho del logo personalizado (en píxeles)",
        "fi": "Mukautettu logon leveys (pikseleinä)",
        "fr": "Largeur personnalisée du logo (en pixels)",
        "it": "Larghezza logo personalizzato (in pixel)",
        "ja": "ロゴの幅をカスタマイズする (ピクセル単位)",
        "ko": "사용자 지정 로고 폭 (픽셀)",
        "nb": "Tilpasset logobredde (i piksler)",
        "nl": "Aangepaste logobreedte (in pixels)",
        "pl": "Niestandardowa szerokość logo (w pikselach)",
        "pt-BR": "Largura do logo personalizado (em pixels)",
        "pt-PT": "Largura de logótipo personalizada (em píxeis)",
        "sv": "Anpassad logotypbredd (i pixlar)",
        "th": "ความกว้างของโลโก้แบบกำหนดเอง (เป็นพิกเซล)",
        "tr": "Özel logo genişliği (piksel)",
        "vi": "Chiều rộng logo tùy chỉnh (pixel)",
        "zh-CN": "自定义 logo 宽度(像素)",
        "zh-TW": "自訂標誌寬度 (單位為像素)"
      },
      "default": {
        "cs": "450",
        "da": "450",
        "de": "450",
        "en": "450",
        "es": "450",
        "fi": "450",
        "fr": "450",
        "it": "450",
        "ja": "450",
        "ko": "450",
        "nb": "450",
        "nl": "450",
        "pl": "450",
        "pt-BR": "450",
        "pt-PT": "450",
        "sv": "450",
        "th": "450",
        "tr": "450",
        "vi": "450",
        "zh-CN": "450",
        "zh-TW": "450"
      }
    },
    {
      "type": "link_list",
      "id": "main_linklist",
      "label": {
        "cs": "Nabídka",
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "nb": "Meny",
        "nl": "Menu",
        "pl": "Menu",
        "pt-BR": "Menu",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "tr": "Menü",
        "vi": "Menu",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu"
    },
    {
      "type": "header",
      "content": {
        "cs": "Panel oznámení",
        "da": "Meddelelseslinje",
        "de": "Ankündigungsleiste",
        "en": "Announcement bar",
        "es": "Barra de anuncios",
        "fi": "Ilmoituspalkki",
        "fr": "Barre d'annonces",
        "it": "Barra degli annunci",
        "ja": "告知バー",
        "ko": "공지 표시줄",
        "nb": "Kunngjøringslinje",
        "nl": "Aankondigingsbalk",
        "pl": "Pasek ogłoszeń",
        "pt-BR": "Barra de avisos",
        "pt-PT": "Barra de comunicado",
        "sv": "Meddelandefält",
        "th": "แถบประกาศ",
        "tr": "Duyuru çubuğu",
        "vi": "Thanh thông báo",
        "zh-CN": "公告栏",
        "zh-TW": "公告列"
      }
    },
    {
      "type": "checkbox",
      "id": "promo_bar_enable",
      "label": {
        "cs": "Zobrazit oznámení",
        "da": "Vis meddelelse",
        "de": "Ankündigung anzeigen",
        "en": "Show announcement",
        "es": "Mostrar anuncio",
        "fi": "Näytä ilmoitus",
        "fr": "Afficher l'annonce",
        "it": "Mostra annuncio",
        "ja": "告知を表示する",
        "ko": "공지 표시",
        "nb": "Vis kunngjøring",
        "nl": "Aankondiging weergeven",
        "pl": "Pokaż ogłoszenie",
        "pt-BR": "Mostrar comunicado",
        "pt-PT": "Mostrar comunicado",
        "sv": "Visa tillkännagivande",
        "th": "แสดงประกาศ",
        "tr": "Duyuruyu göster",
        "vi": "Hiển thị thông báo",
        "zh-CN": "显示公告",
        "zh-TW": "顯示公告"
      }
    },
    {
      "type": "text",
      "id": "promo_bar_text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      }
    },
    {
      "type": "url",
      "id": "promo_bar_link",
      "label": {
        "cs": "Odkaz",
        "da": "Link",
        "de": "Link",
        "en": "Link",
        "es": "Enlace",
        "fi": "Linkki",
        "fr": "Lien",
        "it": "Link",
        "ja": "リンク",
        "ko": "링크",
        "nb": "Kobling",
        "nl": "Link",
        "pl": "Link",
        "pt-BR": "Link",
        "pt-PT": "Ligação",
        "sv": "Länk",
        "th": "ลิงก์",
        "tr": "Bağlantı",
        "vi": "Liên kết",
        "zh-CN": "链接",
        "zh-TW": "連結"
      },
      "info": {
        "cs": "Volitelné",
        "da": "Valgfri",
        "de": "Optional",
        "en": "Optional",
        "es": "Opcional",
        "fi": "Valinnainen",
        "fr": "Facultatif",
        "it": "Facoltativo",
        "ja": "オプション",
        "ko": "선택 사항",
        "nb": "Valgfritt",
        "nl": "Optioneel",
        "pl": "Opcjonalnie",
        "pt-BR": "Opcional",
        "pt-PT": "Opcional",
        "sv": "Valfritt",
        "th": "ไม่จำเป็น",
        "tr": "İsteğe bağlı",
        "vi": "Không bắt buộc",
        "zh-CN": "可选",
        "zh-TW": "(選填)"
      }
    }
  ]
}
{% endschema %}

Please send “site-nav” from the snippets folder

@Ahsan_ANC

Please see code below:

{% comment %}
  Meganav has 5 columns, up to 7 links per column.
  Remaining columns are products from parent collection.

  1. Get # of links in subnav
  2. Calculate # of rows, based on 7 links per column
  3. Max 5 columns, so 5 - # of columns = # of products to display
{% endcomment %}
{% assign fixed_width = false %}
{% assign show_links = true %}

{% assign display_products = true %}
{% assign display_title = true %}

{% if link.type == 'collection_link' %}
  {% if link.object.products_count == 0 %}
    {% assign display_products = false %}
    {% assign display_title = false %}
  {% endif %}
{% else %}
  {% assign display_products = false %}
  {% assign display_title = false %}
{% endif %}

{% assign max_columns = 5 %}
{% assign links_per_column = 7 %}
{% assign max_links = max_columns | times: links_per_column %}

{% if display_products == false and link.links.size > max_links %}
  {% assign links_per_column = link.links.size | divided_by: max_columns %}
  {% assign remainder = link.links.size | modulo: max_columns %}
  {% if remainder > 0 %}
    {% assign links_per_column = links_per_column | plus: 1 %}
  {% endif %}
{% endif %}

{% assign number_of_links = link.links.size %}
{% if display_products %}
  {% assign number_of_links = number_of_links | plus: 1 %}
{% endif %}

{% assign number_of_link_columns = number_of_links | divided_by: links_per_column %}
{% assign number_of_link_columns_remainder = number_of_links | modulo: links_per_column %}
{% unless number_of_link_columns_remainder == 0 %}
  {% assign number_of_link_columns = number_of_link_columns | plus: 1 %}
{% endunless %}

{% assign number_of_product_columns = max_columns | minus: number_of_link_columns %}

  

    {% if display_title %}
      ##### {{ link.title }}
    {% endif %}

    {% if display_products %}
      

            
          {% endunless %}
        {% endif %}
      {% endfor %}
    {% endfor %}
  

  {% for product in link.object.products limit: number_of_product_columns %}
    
      {% include 'product-card', product: product %}
    

  {% endfor %}

How are you selecting products to show on a menu?

At the moment the Mega Menu is automatically using the first 3-4 products that are displayed in the “All” collection which is the first link in the Mega Menu (see screenshot below).

I know that I can change the sort order in the collection which is currently set to sort by price from low to high but I do not want to do this.

in the customizer?

No, I cannot find any options to customize the mega menu in the customize area.

Actually, I am figuring out how a collection is selected for a particular menu item.

@Ahsan_ANC

Are you able to assist further? Do you need any additional info?

Hi, @guyv there is not any way Shopify provides data for sorting products for Best selling.

Shopify does not have any way to count the units sold for any product.

One way is you can create a new collection and set the position of its products as per your choice.

1 Like

@Ahsan_ANC

If I create a new collection just for the mega menu (as I don’t want to change the sort order of the “All” collections) then do you know what code I could use to link this collection to display its products in the mega menu?

You can create one and we can test it.

1 Like

Okay, I already have a collection called best sellers: https://electricrideco.com/collections/best-sellers

Can we try to display these products on my “E-BIKES” menu?

Can you add me to your store so I can test some code there?

1 Like

@Ahsan_ANC

Sorry for my late reply, I’ve been away. Would you mind posting code here as I would like to make the changes myself if possible.