White space product page (Venture theme)

Highlighted
Tourist
7 0 1

Hello everyone,

 

I was wondering if there was a system to remove this white space from the product page in the desktop view.

I think it is very unsightly.
Immagine.png

 

 

 

 

 

 

 

 

 

 

This problem only occurs from desktop viewing, I am open to any kind of suggestion.

 

Thank you.

0 Likes
Highlighted

That white space is dependent on how long is your description. What I would suggest is to move your description under the image so that the white space issue does not come and I feel, it looks much better than having a long description on the side. The whole space below the image and add to cart form would become your description. 

It will look something like this:

Capture.PNG

 

You can do it by going to theme > edit code

In sections, find product-template.liquid

 

find this code

 

    <div class="rte product-single__description" itemprop="description">
      {{ product.description }}
    </div>

cut it from its location and paste it below just above this code.

</div>


{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  {% if section.settings.stock_enable %}
    <script type="application/json" id="VariantJson-{{ section.id }}">
      [
        {% for variant in product.variants %}
          {
             "incoming": {{ variant.incoming | default: false | json }},
             "next_incoming_date": {{ variant.next_incoming_date | date: format: 'date' | json }},
             "inventory_policy": {{ variant.inventory_policy | json }},
             "inventory_quantity": {{ variant.inventory_quantity | json }}
          }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
    </script>
  {% endif %}
{% endunless %}

 


Shopify Designer and Developer, Dubai, UAE

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
1 Like
Highlighted

Thanks Lucid, spot on!

 

0 Likes
Highlighted

Hi Lucid,

I bumped it up a </div> and then dropped the social back below the description but I have this really annoying margin of what appears to be 80px between the image/add to cart which appears to be attributed to grid product-single which I cannot find where to remove the space.

<div class="page-width" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-ajax="{{ section.settings.enable_ajax }}" data-stock="{{ section.settings.stock_enable }}">
{% assign product_image_size = '480x480' %}
{% comment %}
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: '600x600' }}">
{%- if settings.product_vendor_enable -%}
<meta itemprop="brand" content="{{ product.vendor }}">
{%- endif -%}
{% endcomment %}
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}

<div class="grid product-single">
<div class="grid__item {% if product.images.size > 1 %}medium-up--three-fifths{% else %}medium-up--one-half{% endif %}">
<div class="photos">
<div class="photos__item photos__item--main">
<div class="product-single__photo" id="ProductPhoto">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<a href="{{ featured_image | img_url: '1024x1024' }}" class="js-modal-open-product-modal" id="ProductPhotoLink-{{ section.id }}">
<img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
</a>
</div>
</div>
{% if product.images.size > 1 %}
<div class="photos__item photos__item--thumbs">
<div class="product-single__thumbnails{% unless product.images.size > 2 %} product-single__thumbnails--static{% endunless %}" id="ProductThumbs-{{ section.id }}">
{% for image in product.images %}
<div class="product-single__thumbnail-item {% if image == featured_image %} is-active {% endif %}">
<a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
<img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}">
</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if product.images.size > 2 %}
{% comment %}
Add SVG icon snippets to an object for custom slider arrows
{% endcomment %}
<script>
{% capture arrow_left %}{% include 'icon-arrow-left' %}{% endcapture %}
{% capture arrow_right %}{% include 'icon-arrow-right' %}{% endcapture %}
{% capture arrow_up %}{% include 'icon-arrow-up' %}{% endcapture %}
{% capture arrow_down %}{% include 'icon-arrow-down' %}{% endcapture %}
var sliderArrows = {
left: {{ arrow_left | json }},
right: {{ arrow_right | json }},
up: {{ arrow_up | json }},
down: {{ arrow_down | json }}
}
</script>
{% endif %}
</div>
</div>

<div class="grid__item {% if product.images.size > 1 %}medium-up--two-fifths{% else %}medium-up--one-half{% endif %}">
<div class="product-single__info-wrapper">

<div class="product-single__meta small--text-center">
{% if settings.product_vendor_enable %}
<p class="product-single__vendor">{{ product.vendor }}</p>
{% endif %}

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<ul class="product-single__meta-list list--no-bullets list--inline">
<li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<div class="product-tag">
{{ 'products.product.on_sale' | t }}
</div>
</li>
<li>
{% unless product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endunless %}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{% if section.settings.stock_enable %}
<li>
<span id="ProductStock-{{ section.id }}" class="product-single__stock {% unless current_variant.inventory_management and current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 or current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.incoming %} hide{% endunless %}">
{% if current_variant.inventory_management %}
{% if current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 %}
{% assign qty = current_variant.inventory_quantity %}
{{ 'products.product.stock_available' | t: count: qty }}
{% elsif current_variant.inventory_quantity == 0 or current_variant.inventory_quantity < 0 and current_variant.incoming %}
{% if current_variant.available %}
{% assign date = current_variant.next_incoming_date | date: "%B %-d, %Y" %}
{{ 'products.product.will_not_ship_until' | t: date: date }}
{% else %}
{% assign date = current_variant.next_incoming_date | date: "%B %-d, %Y" %}
{{ 'products.product.will_be_in_stock_after' | t: date: date }}
{% endif %}
{% endif %}
{% endif %}
</span>
</li>
{% endif %}
</ul>

</div>
{% include 'shappify-sales-clock' %}
<hr>

<form action="/cart/add" data-productid="{{product.id}}" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">
{% if product.available %}{% include 'subscription-product' %}{% endif %}

{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-name="{{ option.name }}"
data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}

<select name="id" data-productid="{{product.id }}" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
</div>
<div class="product-form__item product-form__item--submit">
<button type="submit"
name="add"
id="AddToCart-{{ section.id }}"
class="btn btn--full product-form__cart-submit{% unless current_variant.available %} btn--sold-out{% endunless %}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>

<div id="w3-product-accessories" data-product-handle="{{ product.handle }}">
<div id="w3-money-format" style="display:none;">{{ shop.money_format }}</div>
</div>
</form>
</div>
</div>
</div>
<div class="rte product-single__description" itemprop="description">
{{ product.description }}
<br>
<div class="grid__item {% if product.images.size > 1 %}medium-up--two-fifths{% else %}medium-up--one-half{% endif %}">
{% if section.settings.social_sharing_products %}
<hr>
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
<br>
</div>
</div>
</div>

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% if section.settings.stock_enable %}
<script type="application/json" id="VariantJson-{{ section.id }}">
[
{% for variant in product.variants %}
{
"incoming": {{ variant.incoming | default: false | json }},
"next_incoming_date": {{ variant.next_incoming_date | date: format: 'month_day_year' | json }},
"inventory_policy": {{ variant.inventory_policy | json }},
"inventory_quantity": {{ variant.inventory_quantity | json }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
</script>
{% endif %}
{% endunless %}

{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "enable_ajax",
"label": "Stay on current page when item is added to cart",
"default": true
},
{
"type": "checkbox",
"id": "stock_enable",
"label": "Show stock when less than 10 products available",
"default": false
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": "Enable product sharing",
"default": true
}
]
}
{% endschema %}

Example page - https://www.pawsinpadstow.co.uk/collections/barbour/products/barbour-pack-away-dog-coat-classic

Have been in theme.scss and then adjusted product-image-margin-bottom: 80px to no avail.

Any ideas anyone?

 

0 Likes