How can I display product vendor name in an accordion tab?

Hello! I want to display the product vendor name within the accordion tab (“expandable boxes” as they say in the default template) on the product template page. I have chosen to create a new page called vendor and collecting vendor information using the following piece of code with the text value:

{{ product.vendor }}

But it seems to not work and the data is not been collected.

Storefront:

I would like to get some technical help here from the forum.

Hi @dwiemas , you can share the required details, will help you out.

Hi @dwiemas . Could you clarify what do you mean by “collecting vendor information” and where did you put the mentioned code.

The code that you provided is intended to display the vendor from a product:

Is the field that what you want to display?

I have added the code in the page editor for the Vendor page.

I want the vendor name to be shown in one of the accordion tabs instead of the usual place which is above the product title. And of course, I want it to be dynamic in all the product pages.

Unfortunately it is not possible to do without changing the source code of your theme.

If you want to do this I would ask you to share your store URL address so I can understand where the tabs are and then I’ll ask you to share the screenshot of a file from your store source code so I could tell you what you need to change.

@dwiemas yes, kindly share the url, so that we can look into the issu

Which source code file would you specifically need to have a look at? @Evgeniy-M

@dwiemas First, I would like to see the website, so I can understand approximately what source file I need to see :slightly_smiling_face:

Let me get back you with the link, since it’s password protected now.

@Evgeniy-M Here’s the link to the product page: https://dwi-emas-bazaar.myshopify.com/products/bottles

Enter with password: dwiemas

Could you show a screenshot of the sections/product-template.liquid ?

There should be the following line:


@Evgeniy-M This is what’s in my product-template.liquid:

{%
  render 'product-form',
    section: section,
    product: product,
    is_featured_product: false
%}

{% schema %}
  {
    "name": "Product pages",
    "class": "section-product-template",
    "settings": [
      {
        "type": "header",
        "content": "Page Layout"
      },
      {
        "type": "select",
        "id": "media_style",
        "label": "Display style",
        "default": "one-column",
        "options": [
          {
            "value": "one-column",
            "label": "One column"
          },
          {
            "value": "two-column",
            "label": "Two column"
          }
        ]
      },
      {
        "type": "select",
        "id": "variant_style",
        "default": "underlined",
        "label": "Variant display style",
        "options": [
          {
            "label": "Dropdown",
            "value": "dropdown"
          },
          {
            "label": "Underlined",
            "value": "underlined"
          }
        ]
      },
      {
        "type": "select",
        "id": "cart_type",
        "label": "When 'Add to Cart' is clicked",
        "default": "",
        "options": [
          {
            "value": "",
            "label": "Stay on the same page"
          },
          {
            "value": "add_in_modal",
            "label": "Open popup with checkout button"
          },
          {
            "value": "add_in_modal_no_checkout",
            "label": "Open popup without checkout button"
          },
          {
            "value": "go_to_cart",
            "label": "Go to cart page"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "full_width",
        "default": true,
        "label": "Page is full width of the screen"
      },
      {
        "type": "checkbox",
        "id": "sticky_product_form",
        "default": true,
        "label": "Product details stick on scroll"
      },
      {
        "type": "checkbox",
        "id": "description_under_title",
        "label": "Show the product description under the product title",
        "default": false
      },
      {
        "type": "header",
        "content": "Product Details"
      },
      {
        "type": "checkbox",
        "id": "show_tax_and_shipping",
        "label": "Show tax status and shipping policy link",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "default": true,
        "label": "Show product vendor"
      },
      {
        "type": "checkbox",
        "id": "show_sku",
        "label": "Show SKU",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_type",
        "default": false,
        "label": "Show type"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_selector",
        "default": true,
        "label": "Show quantity selector"
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_mobile_sticky_cart",
        "label": "Show a sticky Add to Cart button on mobile",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_sharing_links",
        "label": "Show social sharing icons",
        "default": true
      },
      {
        "type": "header",
        "content": "Inventory"
      },
      {
        "type": "checkbox",
        "id": "show_backorder_text",
        "label": "Show backorder text",
        "default": true,
        "info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock."
      },
      {
        "type": "checkbox",
        "id": "show_inventory_notice",
        "label": "Show inventory notice",
        "default": false
      },
      {
        "type": "range",
        "id": "inventory_notice_threshold",
        "min": 0,
        "max": 100,
        "step": 1,
        "label": "Inventory threshold",
        "info": "Show inventory quantities below this threshold. Choose 0 to show full amount.",
        "default": 10
      },
      {
        "type": "checkbox",
        "id": "show_realtime_availability",
        "label": "Cross out unavailable options every time someone changes a variant",
        "info": "Only applies when the 'Variant display style' is Underlined.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_pickup_availability",
        "label": "Show pickup availability",
        "default": true,
        "info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup)"
      },
      {
        "type": "header",
        "content": "Media"
      },
      {
        "type": "paragraph",
        "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
      },
      {
        "type": "select",
        "id": "slide_nav_style",
        "label": "Slide navigation style",
        "default": "dots",
        "options": [
          {
            "value": "dots",
            "label": "Dots"
          },
          {
            "value": "arrows",
            "label": "Arrows"
          }
        ],
        "info": "Only applies to mobile"
      },
      {
        "type": "checkbox",
        "id": "show_thumbnails",
        "default": true,
        "label": "Show thumbnails",
        "info": "Only applies to a One Column display style"
      },
      {
        "type": "checkbox",
        "id": "enable_zoom",
        "default": true,
        "label": "Enable image zoom"
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "scroll_to_variant_media",
        "label": "Scroll to the relevant media when the variant is changed",
        "info": "Only applies to desktop",
        "default": true
      },
      {
        "type": "header",
        "content": "Description"
      },
      {
        "type": "select",
        "id": "description_style",
        "label": "Display style",
        "default": "accordion",
        "options": [
          {
            "value": "accordion",
            "label": "Expandable boxes"
          },
          {
            "value": "tab",
            "label": "Tabs"
          }
        ]
      },
      {
        "type": "page",
        "id": "tab_2_page",
        "label": "First page"
      },
      {
        "type": "page",
        "id": "tab_3_page",
        "label": "Second page"
      },
      {
        "type": "header",
        "content": "Size chart"
      },
      {
        "type": "checkbox",
        "id": "show_size_chart",
        "label": "Enable",
        "default": false
      },
      {
        "type": "text",
        "id": "size_chart_variant",
        "label": "Option name",
        "default": "Size",
        "info": "Enter the name of the option which changes the size of the product. For example, 'Size' or 'Length'. [Learn more](https://cleancanvas.co.uk/support/general/size-chart)"
      },
      {
        "type": "page",
        "id": "size_chart_page",
        "label": "Page containing size chart"
      }
    ]
  }
{% endschema %}

{% if product.metafields.loox.num_reviews %}

{% endif %}

Hey @dwiemas

Thank you for sharing. I see from this template that the actual code is in the snippets/product-form.liquid file.

If you don’t mind could you share that file too?

I need the part with the following line:

<div class="cc-tabs__tab" role="tablist">

Again, you may take a look at the entire code of product-form.liquid:

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
{%- assign media_columns_to_show = 1 %}
{%- assign swatch_option_name_lowercase = settings.swatch_option_name | downcase -%}

{%- if section.settings.media_style != 'one-column' and product.media.size > 1 -%}
  {%- if section.settings.media_style == 'two-column' -%}
    {%- assign media_columns_to_show = 2 -%}
    {%- elsif section.settings.media_style == 'three-column' -%}
    {%- assign media_columns_to_show = 3 -%}
  {%- endif -%}
{%- endif -%}

  

  {% if section.settings.enable_mobile_sticky_cart %}
    
      
    

  {% endif %}

  

    

      

        

          {% if product != blank %}
            {% for media in product.media %}
              

                {%- if media_columns_to_show != 1 -%}
                  {% render 'media', media: media, animation_type: 'cc-fade-in' %}
                {%- else -%}
                  {%- if is_featured_product -%}
                    {% assign animate_delay = forloop.index | times: 0.15 %}
                    {% render 'media', media: media, animate: false, animation_type: "cc-fade-in-up" %}
                  {%- else -%}
                    {% render 'media', media: media %}
                  {%- endif -%}
                {%- endif -%}

              

            {% endfor %}
            {% elsif is_featured_product %}
            {% for i in (1..5) %}
              
                {% capture placeholder_svg_name %}product-{{ i }}{% endcapture %}
                
{{ placeholder_svg_name | placeholder_svg_tag }}

              

            {% endfor %}
          {% endif %}
        

        

        {% render 'svg-chevron-left' %}
        {% render 'svg-chevron-right' %}
      

    

    {%- assign models = product.media | where: 'media_type', 'model' -%}
    {% if models.size > 0 %}
      

      
    {% endif %}
  

  
    

      {%- if section.settings.show_thumbnails and product.media.size > 1 and media_columns_to_show == 1 -%}
        

          

            

              {% for media in product.media %}
                

                  
                    {% render 'responsive-image', image: media.preview_image %}

                    {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                      

                        {% render 'icon-video-badge-full-color' %}
                      

                    {%- endif -%}

                    {%- if media.media_type == 'model' -%}
                      
                        {% render 'icon-3d-badge-full-color' %}
                      

                    {%- endif -%}
                  
                

              {% endfor %}
            

          

        

      {%- endif -%}

      {% if section.settings.show_type and product.type != blank %}
        {% assign type_empty = false %}
      {% else %}
        {% assign type_empty = true %}
      {% endif %}

      {% if section.settings.show_vendor and product.vendor != blank %}
        {% assign vendor_empty = false %}
      {% else %}
        {% assign vendor_empty = true %}
      {% endif %}

      {%- capture price_html -%}
      
        

          

            {% if product != blank %}
              {% if current_variant.compare_at_price > current_variant.price %}
                {{ current_variant.compare_at_price | money }}
              {% endif %}
              
{{ current_variant.price | money }}

          
              {% render 'unit-price', variant: current_variant %}
            {% else %}
              {{ 2999 | money }}
              
{{ 1999 | money }}

            {% endif %}
          

           
        

       
          {% if product.compare_at_price_max > product.price %}You Save 
         {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
         {% endif %}
         {% if current_variant.compare_at_price > current_variant.price %}
         ({{  current_variant.price | minus: current_variant.compare_at_price  | money  }})
          {% endif %}
        

    
      

     
       
      {%- endcapture -%}
     

      
        {% if type_empty == false or vendor_empty == false %}
          

            

              

                {% if section.settings.show_vendor %}
                  {% comment %}
                    Do we have a collection that has the same name as our product vendor name?
                    If we do, let's have the vendor link point to it.
                    If not, we will point to the automatic vendor collection.
                  {% endcomment %}
                  {% assign product_vendor_handle = product.vendor | handle %}
                  {% if collections[product_vendor_handle].handle == product_vendor_handle %}
                    {% assign vendor_url = collections[product_vendor_handle].url %}
                  {% else %}
                    {% assign vendor_url = product.vendor | url_for_vendor %}
                  {% endif %}
                  
                    {{ product.vendor }}
                  
                {% endif %}

                {% if section.settings.show_type %}
                  {% assign product_type_handle = product.type | handle %}
                  {% if collections[product_type_handle].handle == product_type_handle %}
                    {% assign type_url = collections[product_type_handle].url %}
                  {% else %}
                    {% assign type_url = product.type | url_for_type %}
                  {% endif %}

                  {% if product.type != blank %}
                    {% if vendor_url != blank %}•{% endif %}

                    
                      
                        {{ product.type }}
                      
                    
                  {% endif %}
                {% endif %}
              

            

            {{ price_html }}
          

        {% endif %}

        
          

            {% if is_featured_product %}
              
                {% if product != blank %}
                  {{ product.title }}
                {% else %}
                  {{ 'onboarding.product.title' | t }}
                {% endif %}
              
            {% else %}
              # {{ product.title }}
            {% endif %}
            {% if settings.enable_reviews %}
              
                
              

            {% endif %}
          

          {% if type_empty == false or vendor_empty == false %}
            
            

          {% else %}
            {{ price_html }}
          {% endif %}
        

      

      
        {% if section.settings.description_under_title %}
          

            {%- if is_featured_product -%}
              {{ section.settings.description }}
            {%- else -%}
              {{ product.description }}
            {%- endif -%}

            {% if section.settings.show_sku and product.selected_or_first_available_variant.sku != blank %}
              

                {{ 'products.product.sku' | t }} {{ product.selected_or_first_available_variant.sku }}
              

            {% endif %}
          

        {%- endif -%}

        {% if product != blank %}
          {% capture product_form_class %}feedback-{{ section.settings.cart_type }}{% endcapture %}
          {%- if product.featured_image == blank -%}
            {%- assign image_thumb = product.media[0].preview_image.src | img_url: '300x300' %}
          {%- else -%}
            {% assign image_thumb = product.featured_image.src | img_url: '300x300' %}
          {%- endif -%}

          {%- if settings.swatch_enabled and settings.swatch_images -%}
            
          {%- endif -%}

          {% form 'product',
            product,
            class: product_form_class,
            data-ajax-add-to-cart: true,
            data-show-realtime-availability: section.settings.show_realtime_availability,
            data-product-id: product.id,
            data-enable-history-state: 'true' %}

            
              

                {% if product.variants.size > 1 %}
                  

                    {% for option in product.options_with_values %}

                      {% assign show_swatches = false %}
                      {% assign option_name_lowercase = option.name | downcase %}
                      {% if settings.swatch_enabled and option_name_lowercase == swatch_option_name_lowercase %}
                        {% assign show_swatches = true %}
                      {% endif %}

                      

                        {% capture size_chart_html %}

                        {%- assign option_name_lower = option.name | downcase -%}
                        {%- assign target_option_name_lower = section.settings.size_chart_variant | downcase -%}
                          {%- if section.settings.show_size_chart and option_name_lower == target_option_name_lower -%}
                            

                              {{ 'products.product.size_chart' | t }}
                              

                                

                                  

                                    ## {{ pages[section.settings.size_chart_page].title }}
                                    {{ pages[section.settings.size_chart_page].content }}
                                  

                                

                              

                            

                          {%- endif -%}
                        {% endcapture %}
                        
                        
                        {% if section.settings.variant_style == 'dropdown' or show_swatches %}{{ size_chart_html }}{% endif %}
                      

                    {% endfor %}
                  

                  

                {% else %}
                  

                  {% unless show_single_variant_details == false or product.has_only_default_variant %}
                    {% assign swatches_shown = false %}
                    {%- for option in product.options -%}
                      {% assign show_swatches = false %}
                      {% assign option_name_lowercase = option | downcase %}
                      {% if settings.swatch_enabled and option_name_lowercase == swatch_option_name_lowercase %}
                        {% assign show_swatches = true %}
                        {% assign swatches_shown = true %}
                      {% endif %}

                      

                        {%- if option != 'Title' -%}
                          {%- assign opt_idx = 'option' | append: forloop.index -%}
                          

                            {%- capture size_chart_html -%}
                            {%- assign option_name_lower = option | downcase -%}
                            {%- assign target_option_name_lower = section.settings.size_chart_variant | downcase -%}
                              {%- if section.settings.show_size_chart and option_name_lower == target_option_name_lower -%}
                                

                                  {{ 'products.product.size_chart' | t }}
                                  

                                    

                                      

                                        ## {{ pages[section.settings.size_chart_page].title }}
                                        {{ pages[section.settings.size_chart_page].content }}
                                      

                                    

                                  

                                

                              {%- endif -%}
                            {%- endcapture -%}

                            

                            {% if show_swatches %}
                              

                              {{- size_chart_html -}}
                            {% else %}
                              {{ product.variants.first[opt_idx] }}
                            {% endif %}
                          

                        {%- endif -%}
                      

                    {%- endfor -%}
                  {% endunless %}

                  {% unless swatches_shown %}
                    
                  {% endunless %}
                {% endif %}
              

              {% if product.available %}
                {% if section.settings.show_inventory_notice %}
                  {%- capture inventory_notice -%}
                    {%- if current_variant.inventory_management == 'shopify' and current_variant.inventory_quantity > 0 -%}
                      {%- if section.settings.inventory_notice_threshold == 0 or current_variant.inventory_quantity <= section.settings.inventory_notice_threshold -%}
                        
                          {{- 'products.labels.only_x_left' | t: quantity: current_variant.inventory_quantity -}}
                        

                      {%- else -%}
                        

                      {%- endif -%}
                    {%- else -%}
                      

                    {%- endif -%}
                  {%- endcapture -%}
                {% endif %}

                {{ inventory_notice }}

                {%- if section.settings.show_tax_and_shipping -%}
                  {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
                    
                      

                        {%- if shop.taxes_included -%}
                          {{ 'products.general.include_taxes' | t }}
                        {%- endif -%}
                        {%- if shop.shipping_policy.body != blank -%}
                          {{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                        {%- endif -%}
                      

                    

                  {%- endif -%}
                {%- endif -%}

                

                

                  {% if section.settings.show_quantity_selector %}
                    

                      −
                      
                      +
                    

                  {% else %}
                    
                  {% endif %}
                  

                  {% if section.settings.enable_payment_button and product.selling_plan_groups == empty %}
                    {{ form | payment_button }}
                  {% endif %}
                

              {% else %}
                

{{ 'products.product.product_unavailable' | t }}

              {% endif %}
            

            
              {{ form | payment_terms }}
            

            {% if section.settings.show_pickup_availability == true %}
              
                {% render 'store-availability', product: product, current_variant: current_variant %}
              

            {% endif %}

            {% if section.settings.show_backorder_text == true %}
              
                {% render 'backorder', variant: product.selected_variant %}
              

            {% endif %}
          {% endform %}
        {% else %}
          

            

              −
              
              +
            

            
          

        {% endif %}
      

      
        {%- assign product_description_title = 'products.product.description' | t -%}

        {% capture product_description %}
          {%- if is_featured_product -%}
            {%- if section.settings.description_under_title == false -%}
              {{ section.settings.description }}
            {%- endif -%}
          {%- else -%}
            {{ product.description }}
          {%- endif -%}

          {% unless section.settings.description_under_title %}
            {% if section.settings.show_sku and product.selected_or_first_available_variant.sku != blank %}
              

                {{ 'products.product.sku' | t }} {{ product.selected_or_first_available_variant.sku }}
              

            {% endif %}
          {% endunless %}

          {%- if is_featured_product -%}
            

              {{ 'products.product.view_details' | t }}
            

          {%- endif -%}
        {% endcapture %}

        {% if section.settings.description_under_title and is_featured_product == false %}
          {% assign product_description_title = "" %}
          {% assign product_description = "" %}
        {% endif %}

        {%
          render "tabs",
          product: product,
          display_type: section.settings.description_style,
          show_reviews: settings.enable_reviews,
          tab1_title: product_description_title,
          tab1_content: product_description,
          tab2_title: pages[section.settings.tab_2_page].title,
          tab2_content: pages[section.settings.tab_2_page].content,
          tab3_title: pages[section.settings.tab_3_page].title,
          tab3_content: pages[section.settings.tab_3_page].content
        %}
      

      {% if collection.previous_product or collection.next_product %}
        
          {% if collection.previous_product %}
            
              {{ 'products.product.previous' | t }}
            
          {% endif %}

          {% if collection.previous_product and collection.next_product %}/{% endif %}

          {% if collection.next_product %}
            
              {{ 'products.product.next' | t }}
            
          {% endif %}
        

      {% endif %}

      {% if section.settings.show_sharing_links %}
        
          {% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        

      {% endif %}

    

  

{% render 'structured-data-product', product: product, current_variant: current_variant %}

{{ product.metafields.loox.reviews }}

It might be an ineffective method to solve this issue but I tried to add {{ product.vendor }} within tab3_content since the content of the Vendor Tab in the product page was coming from tabs.liquid.

So I located tab3_content within tabs.liquid nd replaced {{ tab3_content }} with {{ product.vendor }}:

{%- if tab3_title != blank and tab3_content != blank -%}
    
      {%- if display_type == "accordion" -%}
        
          {{ tab3_title }}
        
      {%- endif -%}
      

        {{ product.vendor }}
      

    

  {%- endif -%}

It is doing the job for now, but might encounter problems later on.

See how the product vendor renders within the tabs on product page below:

Thanks for the help everybody!!

1 Like