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

<div class="product__title" {{ block.shopify_attributes }}>
  <h1>{{ product.title | escape }}</h1>
  <a href="{{ product.url }}" class="product__title">
    <h2 class="h1">
      {{ product.title | escape }}
    </h2>
  </a>
</div>

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 

<style> 

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

</style>

[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' %}
  <div class="product__title" {{ block.shopify_attributes }}>
    <h1>{{ product.title | escape }}</h1>
    <a href="{{ product.url }}" class="product__title">
      <h2 class="h1">
        {{ product.title | escape }}
      </h2>
    </a>
  </div>
  <style>
    .product__title { max- width: 1200px; margin: 0 auto; }
  </style>
  <div class="page-width">
    <div class="product product--{{ section.settings.media_size }} product--{{ section.settings.media_position }} product--{{ section.settings.gallery_layout }} product--mobile-{{ section.settings.mobile_thumbnails }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
      <div class="grid__item product__media-wrapper{% if section.settings.media_position == 'right' %} medium-hide large-up-hide{% endif %}">
        {% render 'product-media-gallery', variant_images: variant_images %}
      </div>
      <div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
        <product-info
          id="ProductInfo-{{ section.id }}"
          data-section="{{ section.id }}"
          data-url="{{ product.url }}"
          class="product__info-container{% if section.settings.enable_sticky_info %} product__column-sticky{% endif %}"
        >
          {%- assign product_form_id = 'product-form-' | append: section.id -%}

          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when '@app' -%}
                {% render block %}
              {%- when 'text' -%}
                <p
                  class="product__text inline-richtext{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}"
                  {{ block.shopify_attributes }}
                >
                  {{- block.settings.text -}}
                </p>
              {%- when 'title' -%}
              {%- when 'price' -%}
                <div class="no-js-hidden" id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
                  {%- render 'price',
                    product: product,
                    use_variant: true,
                    show_badges: true,
                    price_class: 'price--large'
                  -%}
                </div>
                {%- if product.quantity_price_breaks_configured? -%}
                  <div class="volume-pricing-note" id="Volume-Note-{{ section.id }}">
                    <span>{{ 'products.product.volume_pricing.note' | t }}</span>
                  </div>
                {%- endif -%}
                <div class="product__tax caption rte">
                  {%- if cart.taxes_included -%}
                    {{ 'products.product.include_taxes' | t }}
                  {%- endif -%}
                  {%- if shop.shipping_policy.body != blank -%}
                    {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                  {%- endif -%}
                </div>
                <div {{ block.shopify_attributes }}>
                  {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
                  {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
                    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                    {{ form | payment_terms }}
                  {%- endform -%}
                </div>
              {%- when 'inventory' -%}
                <p
                  class="product__inventory no-js-hidden{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
                  {{ block.shopify_attributes }}
                  id="Inventory-{{ section.id }}"
                  role="status"
                >
                  {%- if product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
                    {%- if product.selected_or_first_available_variant.inventory_quantity > 0 -%}
                      {%- if product.selected_or_first_available_variant.inventory_quantity
                          <= block.settings.inventory_threshold
                      -%}
                        <svg width="15" height="15" aria-hidden="true">
                          <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(238,148,65, 0.3)"/>
                          <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(238,148,65)"/>
                        </svg>
                        {%- if block.settings.show_inventory_quantity -%}
                          {{-
                            'products.product.inventory_low_stock_show_count'
                            | t: quantity: product.selected_or_first_available_variant.inventory_quantity
                          -}}
                        {%- else -%}
                          {{- 'products.product.inventory_low_stock' | t -}}
                        {%- endif -%}
                      {%- else -%}
                        <svg width="15" height="15" aria-hidden="true">
                          <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(62,214,96, 0.3)"/>
                          <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(62,214,96)"/>
                        </svg>
                        {%- if block.settings.show_inventory_quantity -%}
                          {{-
                            'products.product.inventory_in_stock_show_count'
                            | t: quantity: product.selected_or_first_available_variant.inventory_quantity
                          -}}
                        {%- else -%}
                          {{- 'products.product.inventory_in_stock' | t -}}
                        {%- endif -%}
                      {%- endif -%}
                    {%- else -%}
                      {%- if product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
                        <svg width="15" height="15" aria-hidden="true">
                          <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(62,214,96, 0.3)"/>
                          <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(62,214,96)"/>
                        </svg>
                        {{- 'products.product.inventory_out_of_stock_continue_selling' | t -}}
                      {%- else -%}
                        <svg width="15" height="15" aria-hidden="true">
                          <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(200,200,200, 0.3)"/>
                          <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(200,200,200)"/>
                        </svg>
                        {{- 'products.product.inventory_out_of_stock' | t -}}
                      {%- endif -%}
                    {%- endif -%}
                  {%- endif -%}
                </p>
              {%- when 'description' -%}
                {%- if product.description != blank -%}
                  <div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
                    {{ product.description }}
                  </div>
                {%- endif -%}
              {%- when 'sku' -%}
                <p
                  class="product__sku no-js-hidden{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.sku.size == 0 %} visibility-hidden{% endif %}"
                  id="Sku-{{ section.id }}"
                  role="status"
                  {{ block.shopify_attributes }}
                >
                  <span class="visually-hidden">{{ 'products.product.sku' | t }}:</span>
                  {{- product.selected_or_first_available_variant.sku -}}
                </p>
              {%- when 'custom_liquid' -%}
                {{ block.settings.custom_liquid }}
              {%- when 'collapsible_tab' -%}
                <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
                  <details id="Details-{{ block.id }}-{{ section.id }}">
                    <summary>
                      <div class="summary__title">
                        {% render 'icon-accordion', icon: block.settings.icon %}
                        <h2 class="h4 accordion__title inline-richtext">
                          {{ block.settings.heading | default: block.settings.page.title }}
                        </h2>
                      </div>
                      {% render 'icon-caret' %}
                    </summary>
                    <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
                      {{ block.settings.content }}
                      {{ block.settings.page.content }}
                    </div>
                  </details>
                </div>
              {%- when 'quantity_selector' -%}
                <div
                  id="Quantity-Form-{{ section.id }}"
                  class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}"
                  {{ block.shopify_attributes }}
                >
                  {% comment %} TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter {% endcomment %}
                  {% # theme-check-disable %}
                  {%- assign cart_qty = cart
                    | item_count_for_variant: product.selected_or_first_available_variant.id
                  -%}
                  {% # theme-check-enable %}
                  <label class="quantity__label form__label" for="Quantity-{{ section.id }}">
                    {{ 'products.product.quantity.label' | t }}
                    <span class="quantity__rules-cart no-js-hidden{% if cart_qty == 0 %} hidden{% endif %}">
                      {%- render 'loading-spinner' -%}
                      <span
                        >(
                        {{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}}
                        )</span
                      >
                    </span>
                  </label>
                  <div class="price-per-item__container">
                    <quantity-input class="quantity" data-url="{{ product.url }}" data-section="{{ section.id }}">
                      <button class="quantity__button no-js-hidden" name="minus" type="button">
                        <span class="visually-hidden">
                          {{- 'products.product.quantity.decrease' | t: product: product.title | escape -}}
                        </span>
                        {% render 'icon-minus' %}
                      </button>
                      <input
                        class="quantity__input"
                        type="number"
                        name="quantity"
                        id="Quantity-{{ section.id }}"
                        data-cart-quantity="{{ cart_qty }}"
                        data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                        min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                        {% if product.selected_or_first_available_variant.quantity_rule.max != null %}
                          data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
                          max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
                        {% endif %}
                        step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
                        value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                        form="{{ product_form_id }}"
                      >
                      <button class="quantity__button no-js-hidden" name="plus" type="button">
                        <span class="visually-hidden">
                          {{- 'products.product.quantity.increase' | t: product: product.title | escape -}}
                        </span>
                        {% render 'icon-plus' %}
                      </button>
                    </quantity-input>
                    {%- liquid
                      assign volume_pricing_array = product.selected_or_first_available_variant.quantity_price_breaks | sort: 'quantity' | reverse
                      assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.min
                      if cart_qty > 0
                        assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.increment
                      endif
                    -%}
                    {%- if product.quantity_price_breaks_configured? -%}
                      <price-per-item
                        class="no-js-hidden"
                        id="Price-Per-Item-{{ section.id }}"
                        data-section-id="{{ section.id }}"
                        data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                      >
                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                          <div class="price-per-item">
                            {%- if variant_price_compare -%}
                              <dl class="price-per-item--current">
                                <dt class="visually-hidden">
                                  {{ 'products.product.price.regular_price' | t }}
                                </dt>
                                <dd>
                                  <s class="variant-item__old-price">
                                    {{ variant_price_compare | money_with_currency }}
                                  </s>
                                </dd>
                              </dl>
                            {%- endif -%}
                            {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
                              {%- assign variant_price = product.selected_or_first_available_variant.price
                                | money_with_currency
                              -%}
                              <span class="price-per-item--current">
                                {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
                              </span>
                            {%- else -%}
                              {%- for price_break in volume_pricing_array -%}
                                {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%}
                                  {%- assign price_break_price = price_break.price | money_with_currency -%}
                                  <span class="price-per-item--current">
                                    {{-
                                      'products.product.volume_pricing.price_at_each'
                                      | t: price: price_break_price
                                    -}}
                                  </span>
                                  {%- break -%}
                                {%- endif -%}
                              {%- endfor -%}
                            {%- endif -%}
                          </div>
                        {%- else -%}
                          {%- assign variant_price = product.selected_or_first_available_variant.price
                            | money_with_currency
                          -%}
                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                          <div class="price-per-item">
                            {%- if variant_price_compare -%}
                              <dl class="price-per-item--current">
                                <dt class="visually-hidden">
                                  {{ 'products.product.price.regular_price' | t }}
                                </dt>
                                <dd>
                                  <s class="variant-item__old-price">
                                    {{ variant_price_compare | money_with_currency }}
                                  </s>
                                </dd>
                                <dt class="visually-hidden">
                                  {{ 'products.product.price.sale_price' | t }}
                                </dt>
                                <dd>
                                  <span class="price-per-item--current">
                                    {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
                                  </span>
                                </dd>
                              </dl>
                            {%- else -%}
                              <span class="price-per-item--current">
                                {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
                              </span>
                            {%- endif -%}
                          </div>
                        {%- endif -%}
                      </price-per-item>
                    {%- endif -%}
                  </div>
                  <div class="quantity__rules caption no-js-hidden" id="Quantity-Rules-{{ section.id }}">
                    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
                      <span class="divider">
                        {{-
                          'products.product.quantity.multiples_of'
                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment
                        -}}
                      </span>
                    {%- endif -%}
                    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
                      <span class="divider">
                        {{-
                          'products.product.quantity.minimum_of'
                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.min
                        -}}
                      </span>
                    {%- endif -%}
                    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
                      <span class="divider">
                        {{-
                          'products.product.quantity.maximum_of'
                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.max
                        -}}
                      </span>
                    {%- endif -%}
                  </div>
                  {%- if product.quantity_price_breaks_configured? -%}
                    <volume-pricing class="parent-display no-js-hidden" id="Volume-{{ section.id }}">
                      {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
                        <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
                        <ul class="list-unstyled no-js-hidden">
                          <li>
                            <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
                            {%- assign price = product.selected_or_first_available_variant.price
                              | money_with_currency
                            -%}
                            <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}">
                              {{- 'sections.quick_order_list.each' | t: money: price -}}
                            </span>
                          </li>
                          {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
                            {%- assign price_break_price = price_break.price | money_with_currency -%}
                            <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
                              <span>
                                {{- price_break.minimum_quantity -}}
                                <span aria-hidden="true">+</span></span
                              >
                              <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}">
                                {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                              </span>
                            </li>
                          {%- endfor -%}
                        </ul>
                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
                          <show-more-button>
                            <button
                              class="button-show-more link underlined-link"
                              id="Show-More-{{ section.id }}"
                              type="button"
                            >
                              <span class="label-show-more label-text"
                                ><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }}
                              </span>
                            </button>
                          </show-more-button>
                        {%- endif -%}
                      {%- endif -%}
                    </volume-pricing>
                  {%- endif -%}
                </div>
              {%- when 'popup' -%}
                <modal-opener
                  class="product-popup-modal__opener no-js-hidden quick-add-hidden"
                  data-modal="#PopupModal-{{ block.id }}"
                  {{ block.shopify_attributes }}
                >
                  <button
                    id="ProductPopup-{{ block.id }}"
                    class="product-popup-modal__button link"
                    type="button"
                    aria-haspopup="dialog"
                  >
                    {{ block.settings.text | default: block.settings.page.title }}
                  </button>
                </modal-opener>
                <a href="{{ block.settings.page.url }}" class="product-popup-modal__button link no-js">
                  {{- block.settings.text -}}
                </a>
              {%- when 'share' -%}
                {% assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin %}
                {% render 'share-button', block: block, share_link: share_url %}

              {%- when 'variant_picker' -%}
                {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
              {%- when 'buy_buttons' -%}
                {%- render 'buy-buttons',
                  block: block,
                  product: product,
                  product_form_id: product_form_id,
                  section_id: section.id,
                  show_pickup_availability: true
                -%}
              {%- when 'rating' -%}
                {%- if product.metafields.reviews.rating.value != blank -%}
                  {% liquid
                    assign rating_decimal = 0
                    assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
                    if decimal >= 0.3 and decimal <= 0.7
                      assign rating_decimal = 0.5
                    elsif decimal > 0.7
                      assign rating_decimal = 1
                    endif
                  %}
                  <div
                    class="rating"
                    role="img"
                    aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}"
                  >
                    <span
                      aria-hidden="true"
                      class="rating-star"
                      style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
                    ></span>
                  </div>
                  <p class="rating-text caption">
                    <span aria-hidden="true">
                      {{- product.metafields.reviews.rating.value }} /
                      {{ product.metafields.reviews.rating.value.scale_max -}}
                    </span>
                  </p>
                  <p class="rating-count caption">
                    <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
                    <span class="visually-hidden">
                      {{- product.metafields.reviews.rating_count }}
                      {{ 'accessibility.total_reviews' | t -}}
                    </span>
                  </p>
                {%- endif -%}
              {%- when 'complementary' -%}
                <product-recommendations
                  class="complementary-products quick-add-hidden no-js-hidden{% if block.settings.make_collapsible_row %} is-accordion{% endif %}{% if block.settings.enable_quick_add %} complementary-products-contains-quick-add{% endif %}"
                  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ block.settings.product_list_limit }}&intent=complementary"
                >
                  {%- if recommendations.performed and recommendations.products_count > 0 -%}
                    <aside
                      aria-label="{{ 'accessibility.complementary_products' | t }}"
                      {{ block.shopify_attributes -}}
                      {% if block.settings.make_collapsible_row %}
                        class="product__accordion accordion"
                      {% endif %}
                    >
                      <div class="complementary-products__container">
                        {%- if block.settings.make_collapsible_row -%}
                          <details id="Details-{{ block.id }}-{{ section.id }}" open>
                        {%- endif %}
                        <summary>
                          <div class="summary__title">
                            {%- if block.settings.make_collapsible_row -%}
                              {% render 'icon-accordion', icon: block.settings.icon %}
                              <h2 class="h4 accordion__title">{{ block.settings.block_heading }}</h2>
                            {%- else -%}
                              <h2 class="h3 accordion__title">{{ block.settings.block_heading }}</h2>
                            {%- endif -%}
                          </div>
                          {%- if block.settings.make_collapsible_row -%}
                            {% render 'icon-caret' %}
                          {%- endif -%}
                        </summary>
                        <slideshow-component class="slider-mobile-gutter">
                          {%- assign number_of_slides = recommendations.products_count
                            | plus: 0.0
                            | divided_by: block.settings.products_per_page
                            | ceil
                          -%}
                          <div
                            id="Slider-{{ block.id }}"
                            class="contains-card contains-card--product complementary-slider grid grid--1-col slider slider--everywhere"
                            role="list"
                            {% if number_of_slides > 1 %}
                              aria-label="{{ 'general.slider.name' | t }}"
                            {% endif %}
                          >
                            {%- for i in (1..number_of_slides) -%}
                              <div
                                id="Slide-{{ block.id }}-{{ forloop.index }}"
                                class="complementary-slide complementary-slide--{{ settings.card_style }} grid__item slider__slide slideshow__slide"
                                tabindex="-1"
                                role="group"
                                {% if number_of_slides > 1 %}
                                  aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
                                  aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                                {% endif %}
                              >
                                <ul class="list-unstyled" role="list">
                                  {%- for product in recommendations.products
                                    limit: block.settings.products_per_page
                                    offset: continue
                                  -%}
                                    <li>
                                      {% render 'card-product',
                                        card_product: product,
                                        media_aspect_ratio: block.settings.image_ratio,
                                        show_secondary_image: false,
                                        lazy_load: false,
                                        show_quick_add: block.settings.enable_quick_add,
                                        section_id: section.id,
                                        horizontal_class: true,
                                        horizontal_quick_add: true
                                      %}
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </div>
                            {%- endfor -%}
                          </div>
                          {%- if number_of_slides > 1 -%}
                            <div class="slider-buttons no-js-hidden">
                              <button
                                type="button"
                                class="slider-button slider-button--prev"
                                name="previous"
                                aria-label="{{ 'general.slider.previous_slide' | t }}"
                              >
                                {% render 'icon-caret' %}
                              </button>
                              <div class="slider-counter slider-counter--{{ block.settings.pagination_style }}{% if block.settings.pagination_style == 'counter' or block.settings.pagination_style == 'numbers' %} caption{% endif %}">
                                {%- if block.settings.pagination_style == 'counter' -%}
                                  <span class="slider-counter--current">1</span>
                                  <span aria-hidden="true"> / </span>
                                  <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
                                  <span class="slider-counter--total">{{ number_of_slides }}</span>
                                {%- else -%}
                                  <div class="slideshow__control-wrapper">
                                    {%- for i in (1..number_of_slides) -%}
                                      <button
                                        class="slider-counter__link slider-counter__link--{{ block.settings.pagination_style }} link"
                                        aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                                        aria-controls="Slider-{{ block.id }}"
                                      >
                                        {%- if block.settings.pagination_style == 'numbers' -%}
                                          {{ forloop.index -}}
                                        {%- else -%}
                                          <span class="dot"></span>
                                        {%- endif -%}
                                      </button>
                                    {%- endfor -%}
                                  </div>
                                {%- endif -%}
                              </div>
                              <button
                                type="button"
                                class="slider-button slider-button--next"
                                name="next"
                                aria-label="{{ 'general.slider.next_slide' | t }}"
                              >
                                {% render 'icon-caret' %}
                              </button>
                            </div>
                          {%- endif -%}
                        </slideshow-component>
                        {%- if block.settings.make_collapsible_row -%}
                          </details>
                        {%- endif -%}
                      </div>
                    </aside>
                  {%- endif -%}
                  {{ 'component-card.css' | asset_url | stylesheet_tag }}
                  {{ 'component-complementary-products.css' | asset_url | stylesheet_tag }}
                  {%- if block.settings.enable_quick_add -%}
                    {{ 'quick-add.css' | asset_url | stylesheet_tag }}
                    <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
                  {%- endif -%}
                </product-recommendations>
              {%- when 'icon-with-text' -%}
                {% render 'icon-with-text', block: block %}
            {%- endcase -%}
          {%- endfor -%}
          <a href="{{ product.url }}" class="link product__view-details animate-arrow">
            {{ 'products.product.view_full_details' | t }}
            {% render 'icon-arrow' %}
          </a>
        </product-info>
      </div>
      {%- if section.settings.media_position == 'right' -%}
        {% comment %} Duplicate gallery to display after product content on tablet/desktop breakpoint {% endcomment %}
        <div class="grid__item product__media-wrapper small-hide">
          {% render 'product-media-gallery', variant_images: variant_images, is_duplicate: true %}
        </div>
      {%- endif -%}
    </div>

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

    {% assign popups = section.blocks | where: 'type', 'popup' %}
    {%- for block in popups -%}
      <modal-dialog id="PopupModal-{{ block.id }}" class="product-popup-modal" {{ block.shopify_attributes }}>
        <div
          role="dialog"
          aria-label="{{ block.settings.text }}"
          aria-modal="true"
          class="product-popup-modal__content"
          tabindex="-1"
        >
          <button
            id="ModalClose-{{ block.id }}"
            type="button"
            class="product-popup-modal__toggle"
            aria-label="{{ 'accessibility.close' | t }}"
          >
            {% render 'icon-close' %}
          </button>
          <div class="product-popup-modal__content-info">
            <h1 class="h2">{{ block.settings.page.title }}</h1>
            {{ block.settings.page.content }}
          </div>
        </div>
      </modal-dialog>
    {%- endfor -%}

[BelgiumBaitShop]

Hi @coalfield ,

For me this worked in dawn theme when I moved the titel div just below the <div class="page-width"> 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' %}
<div class="page-width">

<div class="product__title" {{ block.shopify_attributes }}>
<h1>{{ product.title | escape }}</h1>
<a href="{{ product.url }}" class="product__title">
<h2 class="h1">
{{ product.title | escape }}
</h2>
</a>
</div>

<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' %}
  <div class="page-width">


<div class="product__title" {{ block.shopify_attributes }}>
  <h1>{{ product.title | escape }}</h1>
  <a href="{{ product.url }}" class="product__title">
    <h2 class="h1">
      {{ product.title | escape }}
    </h2>
  </a>
</div>

    
    <div class="product product--{{ section.settings.media_size }} product--{{ section.settings.media_position }} product--{{ section.settings.gallery_layout }} product--mobile-{{ section.settings.mobile_thumbnails }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
      <div class="grid__item product__media-wrapper">
        {% render 'product-media-gallery', variant_images: variant_images %}
      </div>