I need to move Product title above the product image on mobile view

I am using Warehouse theme and unable to find product-template.liquid file to edit it. Kindly suggest me a solution.

1 Like

Hi @Bilalkhan1986

You should try searching for product-item.liquid to edit the product card.

I tried it but it was hiding price section, Buy it now button & also changing the position of text on desktop.

@Bilalkhan1986

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hi @Bilalkhan1986 ,

Can you send me the code of product.json file, I will help you to find it.

Or some OS 2.0 theme changed its name to: main-product.liquid, you can try searching with this file

Thanks for the reply, the problem is resolved but the alignment is out. Kindly help me to resolve the alignment.

Hi @Bilalkhan1986 ,

Can you explain more about it? I really don’t understand your question.

The problem is solved but after adding the code alignment of cart has been out.

Hi @Bilalkhan1986 ,

Hi,

Please change Product-gallery.liquid file:


  {%- if template.name == 'product' and template != 'product.quick-view' -%}
  # {{ product.title }}
  {%- else -%}
  ### 
    {{ product.title }}
  
  {%- endif -%}

  {%- if product.media.size > 0 -%}
  {%- assign show_thumbnails_if_one_media = true -%}

  
    

      

        {%- assign selected_media = product.selected_variant.featured_media | default: product.featured_media -%}

        

          

            {%- for media in product.media -%}
            {%- assign is_media_group = false -%}
            {%- assign is_media_filtered = false -%}
            {%- assign media_alt = media.alt -%}

            {%- if media.alt contains '#' -%}
            {%- assign is_media_group = true -%}
            {%- assign alt_parts = media.alt | split: '#' -%}

            {%- comment -%}
            If the custom ALT tag contains two parts (for instance "My custom alt # color_blue") then the first part is actually used
            as a custom ALT tag
            {%- endcomment -%}

            {%- if alt_parts.size == 2 and alt_parts.first != blank -%}
            {%- assign media_alt = alt_parts.first | strip -%}
            {%- else -%}
            {%- assign media_alt = product.title -%}
            {%- endif -%}

            {%- assign media_group_parts = alt_parts.last | split: '_' -%}

            {%- for option in product.options -%}
            {%- assign downcase_option = option | downcase -%}
            {%- assign downcase_group_option = media_group_parts.first | strip | downcase -%}

            {%- if downcase_option == downcase_group_option -%}
            {%- assign option_setting = 'option' | append: forloop.index -%}
            {%- assign option_value = product.selected_or_first_available_variant[option_setting] | downcase -%}

            {%- assign downcase_group_value = media_group_parts.last | strip | downcase -%}
            {%- assign media_variant_ids = media.variants | map: 'id' -%}

            {%- if option_value != downcase_group_value -%}
            {%- unless media_variant_ids contains product.selected_or_first_available_variant.id -%}
            {%- assign is_media_filtered = true -%}
            {%- endunless -%}
            {%- endif -%}

            {%- break -%}
            {%- endif -%}
            {%- endfor -%}
            {%- endif -%}

            

              {%- case media.media_type -%}
              {%- when 'image' -%}
              

                {%- capture supported_sizes -%}{%- render 'image-size', sizes: '400,500,600,700,800,900,1000,1100,1200', image: media -%}{%- endcapture -%}
                {%- assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                

                  

                  
                

              

              {%- when 'model' -%}
              
                

                  {{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
                

              

              {%- when 'external_video' -%}
              
                

                  {{- media | external_video_tag: image_size: '1024x', loop: section.settings.enable_video_looping -}}
                

              

              {%- when 'video' -%}
              
                

                  {{- media | video_tag: image_size: '1024x', controls: true -}}
                

              

              {%- endcase -%}
            

            {%- endfor -%}
          

          {%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
          {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}

          {%- if first_3d_model -%}
          
          {%- endif -%}

          {%- if template != 'product.quick-view' and section.settings.enable_image_zoom -%}
          
            {% render 'icon', icon: 'zoom' %}
            {{ 'product.general.zoom' | t }}
            {{ 'product.general.zoom_mobile' | t }}
          
          {%- endif -%}
        

        {%- if show_thumbnails_if_one_media -%}
        
          

            

              {%- for media in product.media -%}
              {%- assign is_media_group = false -%}
              {%- assign is_media_filtered = false -%}
              {%- assign media_alt = media.alt -%}

              {%- if media.alt contains '#' -%}
              {%- assign is_media_group = true -%}
              {%- assign alt_parts = media.alt | split: '#' -%}

              {%- comment -%}
              If the custom ALT tag contains two parts (for instance "My custom alt # color_blue") then the first part is actually used
              as a custom ALT tag
              {%- endcomment -%}

              {%- if alt_parts.size == 2 and alt_parts.first != blank -%}
              {%- assign media_alt = alt_parts.first | strip -%}
              {%- else -%}
              {%- assign media_alt = product.title -%}
              {%- endif -%}

              {%- assign media_group_parts = alt_parts.last | split: '_' -%}

              {%- for option in product.options -%}
              {%- assign downcase_option = option | downcase -%}
              {%- assign downcase_group_option = media_group_parts.first | strip | downcase -%}

              {%- if downcase_option == downcase_group_option -%}
              {%- assign option_setting = 'option' | append: forloop.index -%}
              {%- assign option_value = product.selected_or_first_available_variant[option_setting] | downcase -%}

              {%- assign downcase_group_value = media_group_parts.last | strip | downcase -%}
              {%- assign media_variant_ids = media.variants | map: 'id' -%}

              {%- if option_value != downcase_group_value -%}
              {%- unless media_variant_ids contains product.selected_or_first_available_variant.id -%}
              {%- assign is_media_filtered = true -%}
              {%- endunless -%}
              {%- endif -%}

              {%- break -%}
              {%- endif -%}
              {%- endfor -%}
              {%- endif -%}

              
                {%- comment -%}Based on the type of media, we have to add an icon as per Shopify rules{%- endcomment -%}

                {%- case media.media_type -%}
                {%- when 'model' -%}
                {% render 'icon', icon: 'media-model-badge' %}

                {%- when 'video' or 'external_video' -%}
                {% render 'icon', icon: 'media-video-badge' %}
                {%- endcase -%}

                

                  
                

              
              {%- endfor -%}
            

          

        

        {%- endif -%}

        {%- if section.settings.enable_image_zoom -%}
        {%- comment -%}This code is used to power the mobile zoom and must not be removed nor altered{%- endcomment -%}
        
          

          
            

              

              

              

            

            
              

              

                

                
              

              
                 / 
              

            

          

        

        {%- endif -%}
      

    

  

  {%- endif -%}

And code Product-info.liquid file:

{%- assign selected_variant = product.selected_or_first_available_variant -%}
{%- assign product_form_id = 'product_form_' | append: section.id | append: product.id -%}

  {%- if section.settings.enable_image_zoom -%}
  

  {%- endif -%}

  
    {%- form 'product', product, id: product_form_id, class: 'product-form' -%}
    {%- for block in section.blocks -%}
    {%- case block.type -%}
    {%- when 'product_meta' -%}
    {%- if template.name == 'product' and template != 'product.quick-view' -%}
    ## {{ product.title }}
    {%- else -%}
    ### 
      {{ product.title }}
    
    {%- endif -%}
    {%- render 'product-meta', product: product, block: block -%}

    {%- when 'variant_selector' -%}
    {%- render 'product-variant-selector', product: product, form: form, block: block -%}

    {%- when 'buy_buttons' -%}
    {%- render 'product-buy-buttons', product: product, form: form, block: block -%}

    {%- when 'text' -%}
    {%- if block.settings.content != blank -%}
    
      {{- block.settings.content -}}
    

    {%- endif -%}

    {%- when 'store_pickup' -%}
    {%- comment -%}The availability container will be added automatically if there is store pickup available{%- endcomment -%}
    
      {%- render 'store-availability', product_variant: product.selected_or_first_available_variant -%}
    

    {%- when 'featured_description' -%}
    {%- comment -%}This is only shown on the featured product section{%- endcomment -%}
    {%- if product.description != blank -%}
    
      {% capture desctabs %}{{ product.description | remove: 'data-section-type="product"' }}{% endcapture %}{% render 'product-description-tabs' with desctabs %}
    

    {%- endif -%}

    {%- when '@app' -%}
    {%- render block -%}
    {%- endcase -%}
    {%- endfor -%}

    {%- assign product_meta_block = section.blocks | where: 'type', 'product_meta' | first -%}

    {%- if product_meta_block != blank and product_meta_block.settings.show_share_buttons -%}
    
      {{ 'product.general.share' | t }}

      {%- assign share_url = shop.url | append: product.url | url_param_escape -%}
      {%- assign twitter_text = product.title | url_param_escape -%}
      {%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
      {%- assign pinterest_image = product.featured_media | img_url: '1024x' | prepend: 'https:' -%}

      

        - [{%- render 'icon', icon: 'facebook' -%}](https://www.facebook.com/sharer.php?u={{ share_url }})
        

        - [{%- render 'icon', icon: 'pinterest' -%}](https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }})
        

        - [{%- render 'icon', icon: 'twitter' -%}](https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }})
        

        - [{% render 'icon', icon: 'email' %}](mailto:?&subject={{ product.title | escape }}&body={{ share_url }})
        
      

    

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

  {% comment %}
  ------------------------------------------------------------------------------
  Product Data. This must be outputted for all products (including home page).

  IMPORTANT: THIS CODE IS VITAL. DO NOT EDIT IT NOR REMOVE IT. MAKE SURE TO KEEP
  THE EXACT SAME ATTRIBUTES.
  ------------------------------------------------------------------------------
  {% endcomment %}

  {%- assign variant_selector_block = section.blocks | where: 'type', 'variant_selector' | first -%}