Move all product TITLES to the TOP of the product page taking the full page width - Dawn 12.0

[coalfield]

I am looking to move the title of my product page (all product page templates) so it take the full width of the screen, opposed to the 1/2 it currently takes. I have not figured out a way to be able to do this in the design editor for Dawn (12.0)

See the link and image below for what I am trying to achieve. This includes moving the brand name subtext currently above the title. The whole title I would like below the breadcrumbs.

Any help gratefully received:

https://gpuconnect.com/products/tiger-gaming-ice-v2-mouse-feet-logitech-g304-gaming

[Dan-From-Ryviu]

Hi @coalfield

Go to your Online store > Themes > Edit code > open main-product.liquid, find this line of code

{%- when 'title' -%}

Copy those code

  # {{ product.title | escape }}
  
    ## 
      {{ product.title | escape }}
    
  

Paste them above this line of code

{% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}

So now it will look like this

After that, please go to Online store > Themes > Customize > Products > Default products > disable Title block in Product information.

[coalfield]

Thank you, I have tried however getting an issue with formatting see below

[Dan-From-Ryviu]

Hi, please add this code below product title code

.product__title { max- width: 1200px; margin: 0 auto; }

[coalfield]

Unfortunately it doesn’t appear to change anything

[Dan-From-Ryviu]

Could you add code so I can check?

[coalfield]

{% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}
  

    # {{ product.title | escape }}
    
      ## 
        {{ product.title | escape }}
      
    
  

  
  
    

      

        {% render 'product-media-gallery', variant_images: variant_images %}
      

      
        
      

      {%- if section.settings.media_position == 'right' -%}
        {% comment %} Duplicate gallery to display after product content on tablet/desktop breakpoint {% endcomment %}
        
          {% render 'product-media-gallery', variant_images: variant_images, is_duplicate: true %}
        

      {%- endif -%}
    

    {% render 'product-media-modal', variant_images: variant_images %}

    {% assign popups = section.blocks | where: 'type', 'popup' %}
    {%- for block in popups -%}
      
    {%- endfor -%}

[BelgiumBaitShop]

Hi @coalfield ,

For me this worked in dawn theme when I moved the titel div just below the

However the {{ block.shopify_attributes }} is now underlined saying “Unknown object block used”, but I don’t think that causes a problem anywhere as there are no additional settings in the customizer for the product titel.

I would look something like this:

…

{% assign variant_images = product.images | where: ‘attached_to_variant?’, true | map: ‘src’ %}

{{ product.title | escape }}

{{ product.title | escape }}

<div class="product product--.....

[laxeoninc]

This worked in the Spotlight Theme as well.

Currently running on my site if you want to look at it.

https://www.laxeon.com/products/cyberpower-1000w-pfc-sinewave-rackmount-ups

# Make sure to add the code above the page-width section in order for it to align with page.
  
  {% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}
  

  # {{ product.title | escape }}
  
    ## 
      {{ product.title | escape }}
    
  

    
    
      

        {% render 'product-media-gallery', variant_images: variant_images %}