How do I make a full width product description on Vantage theme?

Store Design
, ,
1

Dear Shopify community,

I have built my shop with the “Vantage” theme from “We are Underground” and made a few small customizations in the past. Now I would like to make the product description full width on desktop. I know that this should be possible by pasting the code of the description accordeons bellow the grid part in the main-product.liquid code but I was not able to find the right sections of code.

I need help to make the correct changes to the code please.

Any help is appreciated.

Thank you

2

Hi @Tobi_C ,

Can you share your store URL

3

Hi @SmallTask ,

its che-aviation-store.com
Thanks

4

We need access to your site to let you know where to move the code

5

Ok @SmallTask . What should i do?

6

Hi @Tobi_C ,

Are you wanting this?

Screenshot.png
Screenshot.png1699×594 128 KB

Please send me the code of main-product.liquid file, I will check it.

7

Hi @Litos , yes that´s exactly what I want.
Should I just send the entire main-product.liquid code here in the chat? Or is that too long?

8

Hi @Tobi_C ,

You can send it via private message, I will check it

9

Thank you @Litos , I sent you the code in a message.

1 Like
10

Hi @Tobi_C ,

Please change all code:


{%- liquid
assign current_variant = product.selected_or_first_available_variant
assign has_accordion_content = false
if section.blocks.size > 0
for block in section.blocks
case block.type
when 'accordion_content' or 'product_details'
assign has_accordion_content = true
break
endcase
endfor
endif

-%}

{% render 'product-json', product: product %}

{%- liquid

assign gallery_full = false

if section.settings.pf_gallery_style == 'full_width' and product.media.size >= 3
assign gallery_style = 'data-gallery-fullwidth'
assign gallery_full = true
else
assign gallery_style = 'data-gallery-thumbnails'
endif

assign thumbnail_position = section.settings.thumbnail_position
assign click_to_enlarge = section.settings.click_to_enlarge
assign enable_video_looping = section.settings.enable_video_looping

-%}

{% capture product_gallery_config %}
{
"thumbPosition": {{ section.settings.thumbnail_position | json }},
"thumbsShown": 3,
"clickToEnlarge": {{ section.settings.click_to_enlarge | json }},
"enableVideoLooping": {{ section.settings.enable_video_looping | json }},
"mainSlider": {% if product.media.size <= 1 %}false{% else %}true{% endif %},
"thumbSlider": {% if product.media.size >= 4 %}true{% else %}false{% endif %},
"productId": {{ product.id | json }},
"isQuick": false
}
{% endcapture %}

{% capture 'layout_images' %}

{% if product.featured_media %}
{% if gallery_style == 'data-gallery-thumbnails' %}
{% render 'product-image-gallery',
product: product,
gallery_style: gallery_style,
thumbnail_position: thumbnail_position,
click_to_enlarge: click_to_enlarge,
enable_video_looping: enable_video_looping
%}
{% else %}
{% render 'product-full-gallery',
product: product,
gallery_style: gallery_style,
thumbnail_position: thumbnail_position,
click_to_enlarge: click_to_enlarge,
enable_video_looping: enable_video_looping %}
{% endif %}
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

{% endcapture %}

{% capture product_info_content %}
# {{ product.title }}
## 
{% render 'product-price', variant: current_variant, product: product %}

{% render 'product-tax-policies' %}

{% render 'spi-banner',
section: section,
product: product,
current_variant: current_variant %}
{% endcapture %}

{% capture 'layout_form' %}

{% capture product_form_config %}
{ "money_format": {{ shop.money_format | json }},
"enable_history": true,
"sold_out": {{ "products.product.sold_out" | t | json }},
"button": {{ 'products.product.add_to_cart' | t | json }},
"unavailable": {{ 'products.product.unavailable' | t | json }},
"only_left": {
"one": {{ 'products.product.only_left.one' | t | json }},
"other": {{ 'products.product.only_left.other' | t | json }}
},
"savings": {{ 'products.general.savings' | t | json }},
"quickview": false,
"featured_product": false
}
{% endcapture %}
{% render 'product-form',
product: product,
type: section,
product_type: 'product',
product_form_config: product_form_config,
current_variant: current_variant %}

{% endcapture %}

{% capture 'accordion_layout' %}

{% if section.blocks.size > 0 %}
{% assign unique_id = section.id %}

{% for block in section.blocks %}

{%- liquid

assign accordion_content_class = 'c-accordion__panel--'
assign accordion_content_id = accordion_content_class | append: unique_id | append: '-' | append: forloop.index

assign page = blank
assign defaultOpen = block.settings.default_open_accordion

-%}

{% if block.type == 'product_description' %}

{% capture accordion_heading_capture %}
{{ 'products.product.product_description' | t }}
{% endcapture %}
{% capture accordion_content_capture %}
{{ product.description | split: '' | first }}
{% endcapture %}

{% elsif block.type == 'accordion_content' %}

{%- liquid

assign accordion_header = block.settings.accordion_heading
assign accordion_content = blank

assign accordion_page = block.settings.page
if accordion_page == blank
assign accordion_page = pages[block.settings.page]
endif

assign accordion_content = accordion_page.content

if accordion_content == blank
assign accordion_content = block.settings.richtext
endif

-%}

{% capture accordion_heading_capture %}
{{ block.settings.accordion_heading }}
{% endcapture %}
{% capture accordion_content_capture %}
{{ accordion_content }}
{% endcapture %}

{% elsif block.type == 'product_details' %}

{% capture accordion_heading_capture %}
{{ 'products.product.product_details' | t }}
{% endcapture %}
{% capture accordion_content_capture %}

{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.title != 'Default Title' %}
- **{{ 'products.product.variant' | t }}:**
  {{ current_variant.title }}

{% endif %}
{% if block.settings.pf_show_sku %}
- **{{ 'customer.order.details.sku' | t }}:**
  {{ current_variant.sku }}

{% endif %}
{% if block.settings.pf_show_product_inventory %}
- **{{ 'products.product.inventory' | t }}:**
  {{ current_variant.inventory_quantity }}

{% endif %}
{% if block.settings.pf_show_product_weight %}
- **{{ 'products.product.weight' | t }}:**
  {{ current_variant.weight | weight_with_unit: current_variant.weight_unit }}

{% endif %}
{% if block.settings.pf_show_product_type %}
- **{{ 'products.product.product_type' | t }}:** {{ product.type | link_to_type }}

{% endif %}
{% if block.settings.pf_show_product_vendor %}
- **{{ 'products.product.brand' | t }}:** {{ product.vendor | link_to_vendor }}

{% endif %}
{% if block.settings.pf_show_product_collection and collection %}
- **{{ 'products.product.collection' | t }}:** {% capture url %}/collections/{{ collection.handle }}{% endcapture %}{{ collection.title | link_to: url }}
{% endif %}

{% endcapture %}

{% else %}

{% continue %}

{% endif %}

{% unless accordion_heading_capture == blank or accordion_content_capture == blank %}

{{ accordion_content_capture }}

{% endunless %}

{% endfor %}

{% endif %}
{% endcapture %}

{% capture product_blocks_area %}
{% if section.blocks.size > 0 %}

{% for block in section.blocks %}
{% case block.type %}

{% when 'product_info' %}

{{ product_info_content }}

{% when 'product_form' %}

{{ layout_form }}

{% when 'additional_content' %}
{% unless block.settings.ac_text == blank %}

{% unless block.settings.ac_link == blank %}

{% endunless %}

{% unless block.settings.ac_icon == 'none' %}
{% case block.settings.ac_icon %}
{% when 'cart' or 'bag' or 'search' %}
{% assign icon_collection_type = 'vantage-theme' %}
{% else %}
{% assign icon_collection_type = 'apollo' %}
{% endcase %}
{% render 'snip-icons',
wrapper: '.product-blocks__icon',
type: icon_collection_type,
icon: block.settings.ac_icon,
classes: 'vib-center',
size: '14px',
fill: 'var(--text-color)',
hover: 'var(--text-color)' %}
{% endunless %}

{{ block.settings.ac_text }}

{% unless block.settings.ac_link == blank %}

{% endunless %}

{% endunless %}

{% when 'product_description' %}
{% if has_accordion_content or gallery_full %}
{% continue %}
{% endif %}

{{ product.description | split: '' | first }}

{%- when 'rating' -%}
{%- if product.metafields.reviews.rating.value != blank -%}

{% liquid
assign rating_decimal = 0
assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}

({{ product.metafields.reviews.rating_count }})
{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}
{% when '@app' %}

{% render block %}

{% else %}
{% continue %}

{% endcase %}
{% endfor %}

{% if has_accordion_content and gallery_full == false %}

{% endif %}

{% endif %}
{% if section.settings.show_social_sharing %}

{% render 'social' with product %}

Spare bis zu 10% beim Einkauf von mehreren Produkten!

{% endif %}
{% endcapture %}

{% if gallery_full %}

{{ layout_images }}

{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% case block.type %}

{% when 'product_description' or 'product_details' or 'accordion_content' %}
{% if block.type == 'product_description' %}
{% if has_accordion_content %}
{{ accordion_layout }}
{% else %}

{{ product.description | split: '' | first }}

{% endif %}
{% else %}
{{ accordion_layout }}
{% endif %}
{% break %}

{% else %}
{% continue %}

{% endcase %}
{% endfor %}
{% endif %}

{{ product_blocks_area }}

{% else %}

{{ layout_images }}

{{ product_blocks_area }}

{% endif %}

{% if product.description contains '' %}

#### 
{{ 'products.product.product_more_details' | t }}

{{ product.description | split: '' | last }}

{% endif %}

{% capture 'accordion_layout' %}

{% if section.blocks.size > 0 %}
{% assign unique_id = section.id %}

{% for block in section.blocks %}

{%- liquid

assign accordion_content_class = 'c-accordion__panel--'
assign accordion_content_id = accordion_content_class | append: unique_id | append: '-' | append: forloop.index

assign page = blank
assign defaultOpen = block.settings.default_open_accordion

-%}

{% if block.type == 'product_description' %}

{% capture accordion_heading_capture %}
{{ 'products.product.product_description' | t }}
{% endcapture %}
{% capture accordion_content_capture %}
{{ product.description | split: '' | first }}
{% endcapture %}

{% elsif block.type == 'accordion_content' %}

{%- liquid

assign accordion_header = block.settings.accordion_heading
assign accordion_content = blank

assign accordion_page = block.settings.page
if accordion_page == blank
assign accordion_page = pages[block.settings.page]
endif

assign accordion_content = accordion_page.content

if accordion_content == blank
assign accordion_content = block.settings.richtext
endif

-%}

{% capture accordion_heading_capture %}
{{ block.settings.accordion_heading }}
{% endcapture %}
{% capture accordion_content_capture %}
{{ accordion_content }}
{% endcapture %}

{% elsif block.type == 'product_details' %}

{% capture accordion_heading_capture %}
{{ 'products.product.product_details' | t }}
{% endcapture %}
{% capture accordion_content_capture %}

{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.title != 'Default Title' %}
- **{{ 'products.product.variant' | t }}:**
  {{ current_variant.title }}

{% endif %}
{% if block.settings.pf_show_sku %}
- **{{ 'customer.order.details.sku' | t }}:**
  {{ current_variant.sku }}

{% endif %}
{% if block.settings.pf_show_product_inventory %}
- **{{ 'products.product.inventory' | t }}:**
  {{ current_variant.inventory_quantity }}

{% endif %}
{% if block.settings.pf_show_product_weight %}
- **{{ 'products.product.weight' | t }}:**
  {{ current_variant.weight | weight_with_unit: current_variant.weight_unit }}

{% endif %}
{% if block.settings.pf_show_product_type %}
- **{{ 'products.product.product_type' | t }}:** {{ product.type | link_to_type }}

{% endif %}
{% if block.settings.pf_show_product_vendor %}
- **{{ 'products.product.brand' | t }}:** {{ product.vendor | link_to_vendor }}

{% endif %}
{% if block.settings.pf_show_product_collection and collection %}
- **{{ 'products.product.collection' | t }}:** {% capture url %}/collections/{{ collection.handle }}{% endcapture %}{{ collection.title | link_to: url }}
{% endif %}

{% endcapture %}

{% else %}

{% continue %}

{% endif %}

{% unless accordion_heading_capture == blank or accordion_content_capture == blank %}

{{ accordion_content_capture }}

{% endunless %}

{% endfor %}

{% endif %}
{% endcapture %}

{{ accordion_layout }}

{%- liquid

if section.settings.full_image_count == 2
assign item_width = '50%'
elsif section.settings.full_image_count == 3
assign item_width = '33.33333%'
elsif section.settings.full_image_count == 4
assign item_width = '25%'
elsif section.settings.full_image_count == 5
assign item_width = '20%'
elsif section.settings.full_image_count == 6
assign item_width = '16.666%'
endif

-%}

{% schema %}
{
"name": "Product page",
"max_blocks": 8,
"settings":
[
{
"type": "header",
"content": "Form"
},
{
"type": "checkbox",
"id": "pf_show_sticky_cart",
"label": "Show sticky add to cart",
"default": true
},
{
"type": "checkbox",
"id": "show_social_sharing",
"label": "Show social sharing icons",
"default": true
},
{
"type": "header",
"content": "Media"
},
{
"type": "select",
"id": "pf_gallery_style",
"label": "Gallery style",
"default": "thumbnails",
"options":
[
{
"value": "thumbnails",
"label": "Classic slideshow"
},
{
"value": "full_width",
"label": "Full width"
}
]
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Classic slideshow thumb position",
"options":
[
{
"value": "right",
"label": "Right"
},
{
"value": "left",
"label": "Left"
},
{
"value": "bottom",
"label": "Bottom"
}
]
},
{
"type": "range",
"id": "full_image_count",
"min": 3,
"max": 6,
"step": 1,
"label": "Full width gallery images shown",
"default": 3,
"info":"Full width gallery requires 3 images or greater"
},
{
"type": "checkbox",
"id": "click_to_enlarge",
"label": "Enable click to enlarge",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "paragraph",
"content": "Learn more about [Media types](https://help.shopify.com/en/manual/products/product-media)"
}
],
"blocks":
[
{
"type": "product_info",
"name": "Header",
"limit": 1,
"settings":
[]
},
{
"type": "product_form",
"name": "Form",
"limit": 1,
"settings":
[]
},
{
"type": "additional_content",
"name": "Additional content",
"limit": 5,
"settings":
[
{
"type": "text",
"id": "ac_text",
"label": "Text",
"default": "Free delivery & returns"
},
{
"type": "url",
"id": "ac_link",
"label": "Link"
},
{
"type": "select",
"id": "ac_icon",
"label": "Icon",
"options": [
{
"label": "Bag",
"value": "bag"
},
{
"label": "Cart",
"value": "cart"
},
{
"label": "Checkmark",
"value": "checkmark"
},
{
"label": "Circle minus",
"value": "circle-minus"
},
{
"label": "Circle minus focus",
"value": "circle-minus-focus"
},
{
"label": "Circle plus",
"value": "circle-plus"
},
{
"label": "Circle plus focus",
"value": "circle-plus-focus"
},
{
"label": "Clock",
"value": "clock"
},
{
"label": "Close",
"value": "close"
},
{
"label": "Credit card",
"value": "credit-card"
},
{
"label": "Error",
"value": "error"
},
{
"label": "Forward",
"value": "forward"
},
{
"label": "Home",
"value": "home"
},
{
"label": "Minus",
"value": "minus"
},
{
"label": "None",
"value": "none"
},
{
"label": "Plus",
"value": "plus"
},
{
"label": "Sale tag",
"value": "sale-tag"
},
{
"label": "Search",
"value": "search"
},
{
"label": "Secure",
"value": "secure"
},
{
"label": "Share",
"value": "share"
},
{
"label": "Ship truck",
"value": "ship-truck"
},
{
"label": "Star",
"value": "star"
},
{
"label": "User",
"value": "user"
},
{
"label": "User circle",
"value": "user-circle"
},
{
"label": "User square",
"value": "user-square"
},
{
"label": "Wish",
"value": "wish"
},
{
"label": "Wish focus",
"value": "wish-focus"
},
{
"label": "Zoom",
"value": "zoom"
},
{
"label": "Zoom out",
"value": "zoom-out"
}
],
"default": "user"
}
]
},
{
"type": "accordion_content",
"name": "Accordion content",
"limit": 5,
"settings":
[
{
"type": "text",
"id": "accordion_heading",
"label": "Accordion heading",
"default": "Accordion heading"
},
{
"type": "page",
"id": "page",
"label": "Page content",
"info": "Add content from a page which will be shown on all product pages"
},
{
"type": "richtext",
"id": "richtext",
"label": "Richtext content",
"default": "

Enter the content to use inside the accordion panel selected.

"
},
{
"type": "checkbox",
"id": "default_open_accordion",
"label": "Have accordion item open",
"info": "Accordion item is open by default when the page loads",
"default": false
}
]
},
{
"type": "product_description",
"name": "Description",
"limit": 1,
"settings":
[
{
"type": "checkbox",
"id": "default_open_accordion",
"label": "Have accordion item open",
"info": "Accordion item is open by default when the page loads",
"default": true
}
]
},
{
"type": "product_details",
"name": "Details",
"limit": 1,
"settings":
[
{
"type": "header",
"content": "Product Details"
},
{
"type": "checkbox",
"id": "pf_show_sku",
"label": "Show variant SKU",
"default": true
},
{
"type": "checkbox",
"id": "pf_show_product_inventory",
"label": "Show product inventory",
"default": true
},
{
"type": "checkbox",
"id": "pf_show_product_weight",
"label": "Show product weight",
"default": true
},
{
"type": "checkbox",
"id": "pf_show_product_type",
"label": "Show product type",
"default": true
},
{
"type": "checkbox",
"id": "pf_show_product_vendor",
"label": "Show product vendor",
"default": true
},
{
"type": "checkbox",
"id": "pf_show_product_collection",
"label": "Show product collection",
"default": true
},
{
"type": "checkbox",
"id": "default_open_accordion",
"label": "Have accordion item open",
"info": "Accordion item is open by default when the page loads",
"default": false
}
]
},
{
"type": "rating",
"name": "Product rating",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To display a rating, add a product rating app. [Learn more](https:\/\/weareunderground.com/blogs/theme-support/how-to-display-product-rating-on-product-grid-and-product-page)"
}
]
},
{
"type": "@app"
}
]
}
{% endschema %}