Move product description below the Add To Cart Button (Impulse Theme)

patflaig
Tourist
4 0 1

Hi, I'm need assistance with moving the product description below the Add To Cart button.
 Any assistance would be awesome!

 

Bildschirmfoto 2021-12-14 um 20.40.58.jpg


Here's my product.template.liquid code:

{%- unless thumbnail_position -%}
{%- assign thumbnail_position = 'beside' -%}
{%- endunless -%}

{%- unless description_style -%}
{%- assign description_style = 'full' -%}
{%- endunless -%}

{%- assign product_img_structure = product.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="ProductSection-{{ section_id }}"
class="product-section"
data-section-id="{{ section_id }}"
data-section-type="product-template"
data-product-handle="{{ product.handle }}"
data-product-url="{{ product.url | within: collection }}"
data-aspect-ratio="{{ 100 | divided_by: product.featured_media.aspect_ratio }}"
data-img-url="{{ product_img_structure }}"
{% if settings.product_zoom_enable %}
data-image-zoom="true"
{% endif %}
{% if settings.inventory_enable %}
data-inventory="true"
{% endif %}
{% if settings.inventory_transfers_enable %}
data-incoming-inventory="true"
{% endif %}
{% unless isModal %}
data-enable-history-state="true"
{% endunless %}>

{%- include 'product-template-variables' -%}

<div class="page-content page-content--product">
<div class="page-width">

<div class="grid{% unless image_position == 'left' %} grid--product-images-right{% endunless %}">
{%- if image_position == 'left' -%}
<div class="grid__item {{ product_image_width }}">
{% include 'product-images',
section_id: section_id,
isModal: isModal,
thumbnail_arrows: thumbnail_arrows,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
%}
</div>
{%- endif -%}

<div class="grid__item {{ product_description_width }}">

<div class="product-single__meta">
{%- if settings.show_breadcrumbs and isModal != true -%}
{%- include 'breadcrumbs' -%}
{%- endif -%}

{%- if settings.vendor_enable -%}
<div class="product-single__vendor">
{%- assign vendor_handle = product.vendor | handleize -%}
{%- if collections[vendor_handle] != empty -%}
<a href="{{ routes.collections_url }}/{{ collections[vendor_handle].handle }}">
{{ collections[vendor_handle].title }}
</a>
{%- else -%}
{{ product.vendor | link_to_vendor }}
{%- endif -%}
</div>
{%- endif -%}

{%- if isModal -%}
<p class="h2 product-single__title">
{{ product.title }}
</p>
{% else %}
<h1 class="h2 product-single__title">
{{ product.title }}
</h1>
{%- endif -%}
{%- unless description_style == 'full' -%}
<div class="product-single__description rte">
{{ product.description }}
</div>

{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
{%- if isModal -%}
{%- assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id -%}
{% else %}
{%- assign review_link = '#Reviews-' | append: product.id -%}
{%- endif -%}
<a href="{{ review_link }}" class="product-single__review-link">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</a>
{%- endif -%}

{%- if settings.sku_enable -%}
<p id="Sku-{{ section_id }}" class="product-single__sku">
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
</p>
{%- endif -%}

{%- assign hide_sale_price = true -%}
{%- if product.compare_at_price_max > product.price -%}
{%- if current_variant.compare_at_price > current_variant.price -%}
{%- assign hide_sale_price = false -%}
{%- endif -%}
<span
id="PriceA11y-{{ section_id }}"
class="visually-hidden"
aria-hidden="{{ hide_sale_price }}">
{{ 'products.general.regular_price' | t }}
</span>
<span class="product__price-wrap-{{ section_id }}{% if hide_sale_price %} hide{% endif %}">
<span id="ComparePrice-{{ section_id }}" class="product__price product__price--compare">
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | money }}
{%- endif -%}
</span>
</span>
<span id="ComparePriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{%- endif -%}

<span id="ProductPrice-{{ section_id }}"
class="product__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}">
{{ current_variant.price | money }}
</span>

{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{% endcapture %}
{%- else -%}
{% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{% endcapture %}
{%- endif -%}
<span id="SavePrice-{{ section_id }}" class="product__price-savings{% if hide_sale_price %} hide{% endif %}">
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
</span>
{%- endif -%}

<div class="product__unit-price product__unit-price--spacing product__unit-price-wrapper--{{ section_id }}{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
{%- capture unit_price_base_unit -%}
<span class="product__unit-base--{{ section_id }}">
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{ current_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}

<span class="product__unit-price--{{ section_id }}">{{ current_variant.unit_price | money }}</span>/{{ unit_price_base_unit }}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte small--text-center">
<small>
{%- if shop.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 -%}
</small>
</div>
{%- endif -%}

{%- if settings.inventory_enable or settings.inventory_transfers_enable -%}
{%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}

<script>
// Store inventory quantities in JS because they're no longer
// available directly in JS when a variant changes.
// Have an object that holds all potential products so it works
// with quick view or with multiple featured products.
window.inventories = window.inventories || {};
window.inventories['{{section_id}}'] = {};
{% for variant in variants_with_inventory_tracking %}
window.inventories['{{section_id}}'][{{variant.id}}] = {
'quantity': {{ variant.inventory_quantity | default: 0 }},
'incoming': {{ variant.incoming | default: false | json }},
'next_incoming_date': {{ variant.next_incoming_date | date: format: 'date' | json }}
};
{% endfor %}
</script>

{% comment %}
If loaded in quick view, it might be from a JS-loaded function
that loads recommended products. If that's the case, the above
JS will not set the variant inventory. Add it to an accessible
data div to read later instead.
{% endcomment %}
{%- if isModal -%}
<div
data-section-id="{{ section_id }}"
class="hide js-product-inventory-data"
aria-hidden="true"
>
{%- for variant in variants_with_inventory_tracking -%}
<div
class="js-variant-inventory-data"
data-id="{{ variant.id }}"
data-quantity="{{ variant.inventory_quantity | default: 0 }}"
data-incoming="{{ variant.incoming | default: false | json }}"
data-date="{{ variant.next_incoming_date | date: format: 'date' | json }}"
>
</div>
{%- endfor -%}
</div>
{%- endif -%}
{%- endif -%}

<hr class="hr--medium">

{%- unless isModal -%}
{% comment %}
Shopify's product form attaches a number of tracking
scripts that cause slower load times and false statistics.
Quick view modals request these on-demand.
{% endcomment %}
{% include 'product-form', section_id: section_id %}
{%- else -%}
<div
id="ProductFormHolder-{{ section_id }}"
class="product-form-holder"
data-url="{{ product.url }}"
data-template="{{ product.template_suffix }}"></div>
{%- endunless -%}

{%- if settings.trust_image != blank -%}
<div class="aos-animate trust-image" style="max-width: {{ settings.trust_image.width }}px;">
<div class="image-wrap " style="height: 0; padding-bottom: {{ 100 | divided_by: settings.trust_image.aspect_ratio }}%;">
{%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540]"
data-aspectratio="{{ settings.trust_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ settings.trust_image.alt }}">
<noscript>
<img class="lazyloaded" src="{{ settings.trust_image | img_url: '540x' }}" alt="{{ settings.trust_image.alt }}">
</noscript>
</div>
</div>
{%- endif -%}

{% include 'product-additional-content', section_id: section_id %}
{%- endunless -%}

{%- if social -%}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{%- endif -%}
</div>
</div>

{%- unless image_position == 'left' -%}
<div class="grid__item {{ product_image_width }}">
{% include 'product-images', section_id: section_id, isModal: isModal, thumbnail_position: thumbnail_position, thumbnail_arrows: thumbnail_arrows %}
</div>
{%- endunless -%}
</div>

{%- if description_style == 'full' -%}
<div class="product-single__description-full rte">
{{ product.description }}
</div>

{% include 'product-additional-content', section_id: section_id %}
{%- endif -%}
</div>
</div>
</div>

 

 

Replies 14 (14)

KetanKumar
Shopify Partner
36839 3635 11972

@patflaig 

can you please check your theme setting its allow this option 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
patflaig
Tourist
4 0 1

@KetanKumar sorry, which option in the theme settings do i have to check? 

patflaig
Tourist
4 0 1

Also I tried to move the code beneath, inside of the product-template.liquid

But product description within the product page is still not moving, I really don't know what else I could do.

 

%- unless description_style == 'full' -%}
<div class="product-single__description rte">
{{ product.description }}
</div>

 

 

Ollie
Shopify Staff
2282 453 395

Hey @patflaig.

 

Thanks for reaching out.

 

I appreciate that you have let us know which theme you are using and including the product.template.liquid code, as that is super helpful! Looking into the options available with the Impulse theme, I added the theme to my test store to see if there is an option within our Theme Editor to make this change. Unfortunately, I was unable to find a setting that would allow you to move the product description on the product page. However, I did notice that this is a third-party theme that is designed and supported by Archetype Themes.

 

15-46-34396-56063

 

Since the theme was not developed by Shopify, we are a bit unfamiliar with the style of coding that is used. With that being said, it would be best to direct this inquiry to the developers of the theme as they should be able to provide you with additional support and insight to making this change. I did come across to finding their Contact Us page and wanted to add it here as well.

 

Let me know if you have any additional questions.

 

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

EmmyT
Excursionist
23 0 3

I need this video moved up to underneath the payment logos. I'm guessing it has something to do with padding but I cannot find it. I'm using the impulse latest theme and the video is from Vimeo.

 

Please what do I doScreen Shot 2022-07-17 at 6.33.04 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@EmmyT 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EmmyT
Excursionist
23 0 3

I am currently working on a client's store, so it's only an invitation link I get, however, here it is; https://smoove-moove.com/

EmmyT
Excursionist
23 0 3

The thing is, the payment logos doesn't show when editing, but once I save It, it shows up, making the description go drastically down. So please is there a way I can remove the excess white spacing there?  I need an urgent solution, please.

EmmyT
Excursionist
23 0 3

please what do I need to do???

 

EmmyT
Excursionist
23 0 3

I need this video moved up to underneath the payment logos. I'm guessing it has something to do with padding but I cannot find it. I'm using the impulse latest theme and the video is from Vimeo.

 

Please what do I do?

 

The thing is, the payment logos doesn't show when editing, but once I save It, it shows up, making the description go drastically down. So please is there a way I can remove the excess white spacing there?  I need an urgent solution, please.Screen Shot 2022-07-17 at 6.33.04 PM.png

EmmyT
Excursionist
23 0 3

please what do I need to do?

KetanKumar
Shopify Partner
36839 3635 11972

@EmmyT 

yes, please add this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-single__description div {
    padding-top: 0 !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EmmyT
Excursionist
23 0 3

Thank you so much, worked like magic!

umairroy
Visitor
1 0 0

Hi sir, Is there any way to remove these spacing in impluse theme, It affecting mobile format

 

site url

perfumeful.com/products/order 

 

Thank you 😀

Screenshot_21.png