Hey there,
I am trying to move the tabs shown in the picture below above the description. But because this is not conventional HTML I struggle with it. I would love suggestions 
Thanks in advance
Shop Password: emori
1 Like
sorry for this issue please share product page code so i will check and update
Should be able to do it with just the dev tools , no? Which code snippets do u require?
we need product template section code
here you go
{% section 'product-template' %}
{% section 'product-story-sections' %}
{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% section 'product-recommendations' %}
{% section 'recently-viewed' %}
{% if collection %}
{{ 'products.general.collection_return' | t: collection: collection.title }}
{% endif %}
{%- liquid
assign isModal = false
if template == 'product.modal'
assign isModal = true
endif
-%}
{%- render 'product-template',
product: product,
description_style: section.settings.description_style,
image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
section_id: product.id,
social: section.settings.social_enable,
isModal: isModal,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_arrows: section.settings.thumbnail_arrows,
mobile_layout: section.settings.mobile_layout,
video_looping: section.settings.enable_video_looping,
video_style: section.settings.product_video_style
-%}
{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
---
{{ product.metafields.spr.reviews }}
{%- endif -%}
{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "select",
"id": "description_style",
"label": "Description position",
"default": "default",
"options": [
{
"value": "default",
"label": "Next to media"
},
{
"value": "full",
"label": "Below media"
}
]
},
{
"type": "checkbox",
"id": "social_enable",
"label": "Enable social sharing",
"default": true
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "image_position",
"label": "Position",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"default": "medium",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnail position",
"default": "beside",
"options": [
{
"value": "beside",
"label": "Next to media"
},
{
"value": "below",
"label": "Below media"
}
]
},
{
"type": "checkbox",
"id": "thumbnail_arrows",
"label": "Show thumbnail arrows"
},
{
"type": "select",
"id": "mobile_layout",
"label": "Mobile layout",
"default": "partial",
"options": [
{
"value": "partial",
"label": "75% width"
},
{
"value": "full",
"label": "Full width"
}
]
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": true
},
{
"type": "select",
"id": "product_video_style",
"label": "Video style",
"default": "muted",
"options": [
{
"value": "muted",
"label": "Video without sound"
},
{
"value": "unmuted",
"label": "Video with sound"
}
],
"info": "Video with sound will not autoplay"
}
]
}
{% endschema %}
1 Like
{%- liquid
assign isModal = false
if template == 'product.modal'
assign isModal = true
endif
-%}
{%- render 'product-template',
product: product,
description_style: section.settings.description_style,
image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
section_id: product.id,
social: section.settings.social_enable,
isModal: isModal,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_arrows: section.settings.thumbnail_arrows,
mobile_layout: section.settings.mobile_layout,
video_looping: section.settings.enable_video_looping,
video_style: section.settings.product_video_style
-%}
{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
---
{{ product.metafields.spr.reviews }}
{%- endif -%}
{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "select",
"id": "description_style",
"label": "Description position",
"default": "default",
"options": [
{
"value": "default",
"label": "Next to media"
},
{
"value": "full",
"label": "Below media"
}
]
},
{
"type": "checkbox",
"id": "social_enable",
"label": "Enable social sharing",
"default": true
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "image_position",
"label": "Position",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"default": "medium",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnail position",
"default": "beside",
"options": [
{
"value": "beside",
"label": "Next to media"
},
{
"value": "below",
"label": "Below media"
}
]
},
{
"type": "checkbox",
"id": "thumbnail_arrows",
"label": "Show thumbnail arrows"
},
{
"type": "select",
"id": "mobile_layout",
"label": "Mobile layout",
"default": "partial",
"options": [
{
"value": "partial",
"label": "75% width"
},
{
"value": "full",
"label": "Full width"
}
]
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": true
},
{
"type": "select",
"id": "product_video_style",
"label": "Video style",
"default": "muted",
"options": [
{
"value": "muted",
"label": "Video without sound"
},
{
"value": "unmuted",
"label": "Video with sound"
}
],
"info": "Video with sound will not autoplay"
}
]
}
{% endschema %}
can you please your snipped file or may be this way
Partners: Requests for staff access when providing assistance is not appropriate. Guidance should be provided within the topic if possible, and if access is required the collaboration feature detailed in this blog post should be used over requesting staff access: The Shopify Collaborator Account: What You Need to Know
Apologies, Now I understand what you ment
{%- liquid
assign current_variant = product.selected_or_first_available_variant
unless thumbnail_position
assign thumbnail_position = 'beside'
endunless
unless description_style
assign description_style = 'full'
endunless
assign product_zoom_size = '1800x1800'
assign product_image_size = '620x'
case image_container_width
when 'small'
assign product_image_width = 'medium-up--two-fifths'
assign product_description_width = 'medium-up--three-fifths'
assign product_image_size = '480x'
when 'medium'
assign product_image_width = 'medium-up--one-half'
assign product_description_width = 'medium-up--one-half'
assign product_image_size = '620x'
when 'large'
assign product_image_width = 'medium-up--three-fifths'
assign product_description_width = 'medium-up--two-fifths'
assign product_image_size = '740x'
endcase
assign product_img_structure = product.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}
{%- render 'product-template-variables', product: product, current_variant: current_variant -%}
{%- if image_position == 'left' -%}
{%- render 'product-images',
section_id: section_id,
product: product,
isModal: isModal,
image_position: image_position,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
thumbnail_arrows: thumbnail_arrows,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
-%}
{%- endif -%}
{%- if settings.show_breadcrumbs and isModal != true -%}
{%- render 'breadcrumbs' -%}
{%- endif -%}
{%- if settings.vendor_enable -%}
{%- assign vendor_handle = product.vendor | handleize -%}
{%- if collections[vendor_handle] != empty -%}
{{ collections[vendor_handle].title }}
{%- else -%}
{{ product.vendor | link_to_vendor }}
{%- endif -%}
{%- endif -%}
{%- if isModal -%}
{{ product.title }}
{%- else -%}
#
{{ product.title }}
{%- endif -%}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
{%- liquid
if isModal
assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id
else
assign review_link = '#Reviews-' | append: product.id
endif
-%}
{%- endif -%}
{%- if settings.sku_enable -%}
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
{%- 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 -%}
{{ 'products.general.regular_price' | t }}
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | money }}
{%- endif -%}
{{ 'products.general.sale_price' | t }}
{%- else -%}
{{ 'products.general.regular_price' | t }}
{%- endif -%}
{{ current_variant.price | money }}
{%- 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 -%}
{%- unless hide_sale_price -%}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{%- endunless -%}
{%- endif -%}
{%- capture unit_price_base_unit -%}
{%- 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 -%}
{%- endcapture -%}
{{ current_variant.unit_price | money }}/{{ unit_price_base_unit }}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<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>
{%- endif -%}
{%- if settings.inventory_enable or settings.inventory_transfers_enable -%}
{%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}
{% 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 -%}
{%- for variant in variants_with_inventory_tracking -%}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
---
{%- 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 %}
{%- render 'product-form',
section_id: section_id,
product: product,
current_variant: current_variant
-%}
{%- else -%}
{%- if product.options.size > 0 -%}
{%- for i in (1..product.options.size) -%}
{%- endfor -%}
{%- endif -%}
{%- endunless -%}
{%- unless isModal -%}
{%- if settings.surface_pickup_enable -%}
{%- endif -%}
{%- endunless -%}
{%- if settings.trust_image != blank -%}
{%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- unless description_style == 'full' -%}
{{ product.description }}
{%- render 'product-additional-content', product: product, section_id: section_id -%}
{%- endunless -%}
{%- if social -%}
{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}
{%- endif -%}
{%- unless image_position == 'left' -%}
{%- render 'product-images',
section_id: section_id,
product: product,
isModal: isModal,
image_position: image_position,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
thumbnail_arrows: thumbnail_arrows,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
-%}
{%- endunless -%}
{%- if description_style == 'full' -%}
{{ product.description }}
{%- render 'product-additional-content', product: product, section_id: section_id -%}
{%- endif -%}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'removed', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
1 Like
thanks can you please share store url.
It should be in my original post. Click on âShopâ
Hi,
Thank you for providing the code.
In order for your change to be effective in both full description and not full, you would need to do 2 changes.
If you look at the bottom of your last shared code snippet you can see the code below:
{%- if description_style == 'full' -%}
<div class="product-single__description-full rte">
{{ product.description }}
</div>
{%- render 'product-additional-content', product: product, section_id: section_id -%}
{%- endif -%}
You would need to put this part: {%- render âproduct-additional-contentâ, product: product, section_id: section_id -%}, which I presume would be the tabs, before the opening div but below the if statement like this:
{%- if description_style == âfullâ -%}
{%- render âproduct-additional-contentâ, product: product, section_id: section_id -%}
{{ product.description }}
{%- endif -%}
Now for the full description mode, you will find the code below a little bit higher in the code. Here is which one it is:
{%- unless description_style == 'full' -%}
<div class="product-single__description rte">
{{ product.description }}
</div>
{%- render 'product-additional-content', product: product, section_id: section_id -%}
{%- endunless -%}
Like the first time you put the additionnal-content above the div, like this:
{%- unless description_style == âfullâ -%}
{%- render âproduct-additional-contentâ, product: product, section_id: section_id -%} <
div class=âproduct-single__description rteâ> {{ product.description }}
{%- endunless -%}
That should fix your problem!