Supply Theme Product Description

Tourist
9 0 0

Hello, We have recently just launched the supply theme to our store. One of The major issues I have right now is the product description. When clicking on a product, The description is all the way to the right of the page. I learned how to center it with code by changing the width but the only issue is the add to cart and  buy now button will also  move . I am trying to just move the product description to the right. 

 

 

Image_008.png

 

0 Likes
Shopify Partner
152 37 58

@Electronicsexpo 

 

Please include your product page template file and we can provide you with a solution. Setting the max-width via css would not be the correct solution for this. It's currently in a grid designed to be on the right side of the page. We will need to break it from that column and add a full-width column below to display the product description as you want it without affecting the positioning of the quantity selector and add to cart button.

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
1 Like
Highlighted
Tourist
9 0 0

How do i upload the file? 

0 Likes
Tourist
9 0 0

<div id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-zoom-toggle="zoom-in" data-zoom-enabled="{{ section.settings.product_image_zoom_enable }}" data-related-enabled="{{ section.settings.product_related_enable }}" data-social-sharing="{{ section.settings.social_sharing }}" data-show-compare-at-price="{{ section.settings.product_show_compare_at_price }}" data-stock="{{ section.settings.product_quantity_message }}" data-incoming-transfer="{{ section.settings.product_incoming_message }}" data-ajax-cart-method="{{ settings.ajax_cart_method }}">
{% include 'breadcrumb' %}

{% case section.settings.add_to_cart_button_size %}
{% when 'small' %}
{% assign btn_class = 'btn' %}
{% when 'medium' %}
{% assign btn_class = 'btn btn--wide' %}
{% when 'large' %}
{% assign btn_class = 'btn btn--full btn--large' %}
{% endcase %}

{% if section.settings.add_to_cart_button_size == 'large' %}
<style>
.selector-wrapper select, .product-variants select {
max-width: 100%;
}
</style>
{% endif %}

{% if section.settings.product_quantity_enable == false %}
<style>
.selector-wrapper select, .product-variants select {
margin-bottom: 13px;
}
</style>
{% endif %}

<div class="grid" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

<div class="grid-item large--two-fifths">
<div class="grid">
<div class="grid-item large--eleven-twelfths text-center">
<div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% for image in product.images %}
{%- capture img_wrapper_id -%}productPhotoWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
{%- assign max_width = 700 -%}
{%- assign max_height = 1024 -%}

{%- include 'image-logic' with width: max_width, height: max_height -%}

{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
<div class="no-js product__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
{% if forloop.first == true %}
src="{{ featured_image | img_url: '300x300' }}"
{% endif %}
class="lazyload no-js lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
{% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>
</div>
</div>
{% if forloop.first == true %}
<noscript>
<img src="{{ image | img_url: '580x' }}"
srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
alt="{{ image.alt }}" style="opacity:1;">
</noscript>
{% endif %}
{% endfor %}
</div>

0 Likes
Tourist
9 0 0
0 Likes
Shopify Partner
152 37 58

@Electronicsexpo

 

Interesting product page template... However, what I'm needing is not on this. If you would, please send me a collaborator invite to sowensby2@gmail.com 

 

Please only setup permissions for me to access the theme files. I do not need access to your orders, financials, or customers. You can find out how to send a collaborator invite here: https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts

 

This will give me access to the backend where I will make a duplicate of your theme, provide a solution, and then we can push the changes through to the live site upon your approval. Super easy. 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
1 Like
Tourist
9 0 0

@shayOwensby  I sent the invite 

0 Likes