Product image full Width on product page

Outer_net
Pathfinder
89 3 26

Hello,

I have this product here and I would like to make the image full width.

Does anyone know how I could do this? 

I'm not sure where to put the title yet, this may go above or to the side of the image.

Template code below,

I need to do it in the template so it doesn't effect other products.

Thanks in advance for any help!

 

{% if section.settings.product_breadcrumb == false %}
  {% style %}
    .breadcrumb__wrapper {
      display: none !important;
    }
  {% endstyle %}
{% endif %}

<div class="container main content main-wrapper">
  <div class="breadcrumb__wrapper sixteen columns">
    <div class="breadcrumb breadcrumb--text" itemscope itemtype="http://schema.org/BreadcrumbList">
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="item"><span itemprop="name">{{ 'general.breadcrumbs.home' | t }}</span></a></span>
      <span class="icon-arrow-right"></span>
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        {% if collection %}
          <a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="item"><span itemprop="name">{{ collection.title }}</span></a>
        {% else %}
          <a href="/collections/all" title="{{ collections.all.title }}">{{ collections.all.title }}</a>
        {% endif %}
      </span>
      <span class="icon-arrow-right"></span>
      {{ product.title }}
    </div>
  </div>
  <div class="sixteen columns">
    <div class="product-{{ product.id }}">

     <div class="section product_section js-product_section clearfix
     {% if product.images.size > 1 %} thumbnail_position--{{settings.thumbnail_position}} {% endif %} product_slideshow_animation--{{settings.product_slideshow_animation}}"
         data-thumbnail="{{settings.thumbnail_position}}"
         data-slideshow-animation="{{settings.product_slideshow_animation}}"
         data-slideshow-speed="{{settings.slideshow_speed}}"
         itemscope itemtype="http://schema.org/Product">

      <div class="nine columns {% if product-images == blank %}{% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %} {% if section.settings.product_images_position == 'right' %}mobile_only{% endif %}">
        {% include 'product-images' %}
      </div>

      <div class="seven columns {% if section.settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">

        {% assign collection_handles = product.collections | map: 'handle' %}
        {% assign variant = product.selected_or_first_available_variant %}
        <h1 class="product_name" itemprop="name">{{ product.title }}</h1>

        {% if section.settings.display_vendor %}
          <p class="vendor">
            <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
          </p>
        {% endif %}

        {% if variant.sku != blank and section.settings.display_sku %}
          <p class="sku">
            <span itemprop="sku">{{ variant.sku }}</span>
          </p>
        {% endif %}

        {% if settings.enable_shopify_product_badges %}
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
        {% endif %}

        {% unless collection_handles contains 'coming-soon' %}
          <p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
            <meta itemprop="seller" content="{{ shop.name | escape }}" />
            <link itemprop="availability" href="http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}">
            <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition"/>

            <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
            <span itemprop="price" content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
              <span class="current_price {% if product.available == false %}hidden{% endif %}">
                {% if variant.price > 0 %}
                  <span class="money">{{ variant.price | money }}</span>
                {% else %}
                  {{ settings.free_price_text }}
                {% endif %}
              </span>
            </span>
            <span class="was_price">
              {% if variant.price < variant.compare_at_price and variant.available %}
                <span class="money">{{ variant.compare_at_price | money }}</span>
              {% endif %}
            </span>
          </p>
          {% if settings.notify_me_form %}
            {% include 'product-notify-me' %}
          {% endif %}
        {% endunless %}

 
        <!--Start tab labels-->
        <ul class="tabs">
          <li>
            <a class="active" href="#tab1">
   				{{ product.collections[0].title }} 
            </a>
          </li>
          <li>
            <a href="#tab2" class="">
              
                More Options
            </a>
          </li>
        </ul>
        <!--Start tab content-->
        <ul class="tabs-content">
          <li class="active" id="tab1" style="display: block;">
            <div>
            <p>{{ product.description | split: '<!-- split -->' | first }}</p><p><span style="font-style: normal;">{% unless collection_handles contains 'coming-soon' %}</span></p><p>          {% include 'product-form' with 'product' %}</p><p>        {% endunless %}</p>
                    {% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
        {% endif %}

        <div class="meta">
          {% if section.settings.display_social_buttons %}
            {% include "social-buttons" with "product" %}
          {% endif %}

          {% if section.settings.display_collections %}
            <p>
              <span class="label">{{ 'products.product.collections' | t }}:</span>
              <span>
               {% for col in product.collections %}
                 <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
               {% endfor %}
             </span>
           </p>
          {% endif %}

          {% if section.settings.display_tags %}
             <p>
               {% for tag in product.tags %}
                 {% if forloop.first %}
                   <span class="label">{{ 'products.product.tags' | t }}:</span>
                 {% endif %}

                 {% unless tag contains 'meta_' %}
                   <span>
                     <a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
                   </span>
                 {% endunless %}
               {% endfor %}
             </p>
          {% endif %}

         {% if section.settings.display_type %}
            <p>
              <span class="label">{{ 'products.product.product_types' | t }}:</span>
              <span>{{ product.type | link_to_type }}</span>
            </p>
         {% endif %}
        </div>
      </div>
            </div>
          </li>
          <li id="tab2" class="" style="display: none;">
            <div>

              <!-- HC - Product page changes - 26 Sep '19 -->
              {% include 'more-options' %}

            </div>
          </li>
            </div>
          </li>
        </ul>
    
        
        {% if section.settings.product_description_position == "top" %}
          {% if product.description != blank %}
           <div class="description" itemprop="description">
           </div>
         {% endif %}
        {% endif %}
 


        {% if section.settings.product_description_position == "bottom" %}
          {% if product.description != blank %}
           <div class="description" itemprop="description">
            {{ product.description | split: '<!-- split -->' | first }}
           </div>
          {% endif %}
        {% endif %}

        {% if settings.enable_shopify_review_comments and settings.review_position == "top" %}
          <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
        {% endif %}



      {% if section.settings.product_images_position == 'right' %}
        <div class="nine columns {% if product-images == blank %}{% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %} mobile_hidden">
          {% include 'product-images' %}
        </div>
      {% endif %}
    </div>

    {% if product.description contains "<!-- split -->"  %}
      <br class="clear" />
      <div class="section clearfix">
        <div class="description">
          {{ product.description | split: '<!-- split -->' | last }}
        </div>
      </div>
    {% endif %}

    {% if settings.enable_shopify_review_comments and settings.review_position == "bottom" %}
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    {% endif %}
    </div>
  </div>
</div>

<div class="product-details">
  {% for block in section.blocks %}
    {% if block.type == 'rich_text_and_image' %}
      <div class="container">
        <div class="twelve columns offset-by-two center featured-content-section block__{{block.type}}" {{ block.shopify_attributes }} data-block-id="{{block.id}}" id="block__{{ block.id }}">
          {% if block.settings.image %}
            <img  src="{{ block.settings.image | img_url: '300x' }}"
                  alt="{{ block.settings.image.alt }}"
                  data-src="{{ block.settings.image | img_url: '2048x' }}"
                  class="lazyload lazyload--fade-in"
                  style="max-width: {{- block.settings.image -}}px"
                  data-sizes="auto"
                  data-srcset=" {{ block.settings.image | img_url: '2048x' }} 2048w,
                                {{ block.settings.image | img_url: '1600x' }} 1600w,
                                {{ block.settings.image | img_url: '1200x' }} 1200w,
                                {{ block.settings.image | img_url: '1000x' }} 1000w,
                                {{ block.settings.image | img_url: '800x' }} 800w,
                                {{ block.settings.image | img_url: '600x' }} 600w,
                                {{ block.settings.image | img_url: '400x' }} 400w"
                   />
          {% endif %}
          {% if block.settings.title != blank %}
            <h2 class="{{ block.settings.text_alignment }}">{{ block.settings.title | escape }}</h2>
            <div class="feature_divider {% if block.settings.text_alignment == "align_left" %}feature_divider_left{% endif %}"></div>
          {% endif %}
          <div class="{{ block.settings.text_size }} {{ block.settings.text_alignment }}">
            {% if block.settings.content != blank %}
              {{ block.settings.content }}
            {% endif %}
            {% if block.settings.button_label != blank %}
              <a {% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}" {% endif %} class="action_button block_button">
                {{ block.settings.button_label | escape }}
              </a>
            {% endif %}
          </div>
        </div>
      </div>

    {% elsif block.type == 'image_gallery' %}
      <div class="container">
        <div class="sixteen columns block__{{block.type}}" {{ block.shopify_attributes }} data-block-id="{{block.id}}" id="block__{{ block.id }}">
          <div class="one-third column alpha">
            {% if block.settings.product_detail_image_1 %}
              <a href="{{ block.settings.product_detail_image_1 | img_url: '1520x' }}" class="lightbox" rel="gallery">
                <img  src="{{ block.settings.product_detail_image_1 | img_url: '300x' }}"
                      alt="{{ block.settings.product_detail_image_1.alt }}"
                      data-src="{{ block.settings.product_detail_image_1 | img_url: '2048x' }}"
                      class="lazyload lazyload--fade-in"
                      style="max-width: {{- block.settings.product_detail_image_1 -}}px"
                      data-sizes="auto"
                      data-srcset=" {{ block.settings.product_detail_image_1 | img_url: '2048x' }} 2048w,
                                    {{ block.settings.product_detail_image_1 | img_url: '1600x' }} 1600w,
                                    {{ block.settings.product_detail_image_1 | img_url: '1200x' }} 1200w,
                                    {{ block.settings.product_detail_image_1 | img_url: '1000x' }} 1000w,
                                    {{ block.settings.product_detail_image_1 | img_url: '800x' }} 800w,
                                    {{ block.settings.product_detail_image_1 | img_url: '600x' }} 600w,
                                    {{ block.settings.product_detail_image_1 | img_url: '400x' }} 400w"
                       />
              </a>
            {% else %}
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
          <div class="one-third column">
            {% if block.settings.product_detail_image_2 %}
              <a href="{{ block.settings.product_detail_image_2 | img_url: '1520x' }}" class="lightbox" rel="gallery">
                <img  src="{{ block.settings.product_detail_image_2 | img_url: '300x' }}"
                      alt="{{ block.settings.product_detail_image_2.alt }}"
                      data-src="{{ block.settings.product_detail_image_2 | img_url: '2048x' }}"
                      class="lazyload lazyload--fade-in"
                      style="max-width: {{- block.settings.product_detail_image_2 -}}px"
                      data-sizes="auto"
                      data-srcset=" {{ block.settings.product_detail_image_2 | img_url: '2048x' }} 2048w,
                                    {{ block.settings.product_detail_image_2 | img_url: '1600x' }} 1600w,
                                    {{ block.settings.product_detail_image_2 | img_url: '1200x' }} 1200w,
                                    {{ block.settings.product_detail_image_2 | img_url: '1000x' }} 1000w,
                                    {{ block.settings.product_detail_image_2 | img_url: '800x' }} 800w,
                                    {{ block.settings.product_detail_image_2 | img_url: '600x' }} 600w,
                                    {{ block.settings.product_detail_image_2 | img_url: '400x' }} 400w"
                       />
              </a>
            {% else %}
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
          <div class="one-third column omega">
            {% if block.settings.product_detail_image_3 %}
              <a href="{{ block.settings.product_detail_image_3 | img_url: '1520x' }}" class="lightbox" rel="gallery">
                <img  src="{{ block.settings.product_detail_image_3 | img_url: '300x' }}"
                      alt="{{ block.settings.product_detail_image_3.alt }}"
                      data-src="{{ block.settings.product_detail_image_3 | img_url: '2048x' }}"
                      class="lazyload lazyload--fade-in"
                      style="max-width: {{- block.settings.product_detail_image_3 -}}px"
                      data-sizes="auto"
                      data-srcset=" {{ block.settings.product_detail_image_3 | img_url: '2048x' }} 2048w,
                                    {{ block.settings.product_detail_image_3 | img_url: '1600x' }} 1600w,
                                    {{ block.settings.product_detail_image_3 | img_url: '1200x' }} 1200w,
                                    {{ block.settings.product_detail_image_3 | img_url: '1000x' }} 1000w,
                                    {{ block.settings.product_detail_image_3 | img_url: '800x' }} 800w,
                                    {{ block.settings.product_detail_image_3 | img_url: '600x' }} 600w,
                                    {{ block.settings.product_detail_image_3 | img_url: '400x' }} 400w"
                       />
              </a>
            {% else %}
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
        </div>
      </div>

    {% elsif block.type == 'image_with_text' %}
      {% include 'include-image-text', type: 'block' %}

    {% elsif block.type == 'divider' %}
      {% include 'include-divider', type: 'block' %}
    {% endif %}

  {% endfor %}
</div>

<style>
  {% if section.settings.set_product_height %}
    .product_slider .slides img { max-width: {{ section.settings.product_height }}px; }
  {% endif %}
</style>
0 Likes

Hello 

Add this css at bottom
Online Store-> Themes -> Edit code->Assets->styles.scss

.nine.columns.alpha {
    width: 100%!important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Outer_net
Pathfinder
89 3 26

Hi 

 

 

 

0 Likes

Okay.
You mean product image will be full width for some products only?

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Akshay_V
Shopify Partner
432 16 56

@Outer_net 

If you apply above CSS then it will apply in all the products. For certain products, It is possible through product tags.

Akshay Vaghasiya | Shopify Expert
Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on info@lavitastic.com regarding any help
0 Likes