Prestige Theme - Placement of Fields at Product Page

Hello Shopify Gurus,

I am building my website and I am using the “Prestige” theme. I would like to get the metafields of the details (“MATERIAL & PFELEGEHINWEISE”, “VERSAND & RETOURE”, “PASSFORM” in the image below) right under “Add to Cart”.

I would also like to remove the “VIEW IMAGES” field.

Could you please help me with that?

Kind Regards,

Ayse

1 Like

@andauser

sorry for that issue

can you please share product page code so i will update

1 Like

Dear KetanKumar,

Thanks a lot for your prompt response! Could you please guide me to the code that I need to send you?

Do you need main-product.liquid?

Kind regards,

Ayse

1 Like

@andauser

yes please share code

1 Like

Thank you for your reply, once again.

Below is the content of the main-product.liquid:

{%- assign meta_block = section.blocks | where: ‘type’, ‘product_meta’ | first -%}
{%- assign share_buttons_block = section.blocks | where: ‘type’, ‘share_buttons’ | first -%}
{%- assign inventory_block = section.blocks | where: ‘type’, ‘inventory’ | first -%}
{%- assign buy_buttons_block = section.blocks | where: ‘type’, ‘buy_buttons’ | first -%}

{%- capture section_settings -%}
{
“enableHistoryState”: true,
“templateSuffix”: {{ product.template_suffix | json }},
“showInventoryQuantity”: {% if inventory_block != blank %}true{% else %}false{% endif %},
“showSku”: {{ meta_block.settings.show_sku | json }},
“stackProductImages”: {{ section.settings.stack_images | json }},
“showThumbnails”: {{ section.settings.show_thumbnails | json }},
“enableVideoLooping”: {{ section.settings.enable_video_looping | json }},
“inventoryQuantityThreshold”: {{ inventory_block.settings.inventory_quantity_threshold | default: 0 }},
“showPriceInButton”: {{ buy_buttons_block.settings.show_price_in_button | json }},
“enableImageZoom”: {{ section.settings.enable_image_zoom | json }},
“showPaymentButton”: {{ buy_buttons_block.settings.show_payment_button | json }},
“useAjaxCart”: {% if settings.cart_type == ‘drawer’ %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- capture action_list_items -%} {%- if section.settings.enable_image_zoom -%}
{% render 'icon' with 'plus' %}
{%- endif -%}

{%- if share_buttons_block != blank -%}

{% render 'icon' with 'share' %} {% render 'icon' with 'close' %}

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_media | img_url: ‘1024x’ | prepend: ‘https:’ -%}

{%- endif -%} {%- endcapture -%}

{%- comment -%}

PRODUCT GALLERY

{%- endcomment -%}

{%- assign initial_media_id = product.featured_media.id -%}
{%- assign initial_media_index = 0 -%}
{%- assign media_count = 0 -%}

{%- capture slideshow_media -%}
{%- for media in product.media -%}
{%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
{%- assign initial_media_index = media_count -%}
{%- assign initial_media_id = media.id -%}
{%- endif -%}

{%- capture supported_sizes -%}{%- render ‘image-size’, sizes: ‘200,400,600,700,800,900,1000,1200,1400,1600’, image: media -%}{%- endcapture -%}

{%- case media.media_type -%}
{%- when ‘image’ -%}

{% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{{ media.alt | escape }}

{{ media.alt | escape }}

{%- when ‘external_video’ -%}

{{- media | external_video_tag: image_size: '1024x' -}}

{%- when ‘video’ -%}

{{- media | video_tag: image_size: '1024x', controls: true -}}

{%- when ‘model’ -%}

{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
{%- endcase -%}

{%- assign media_count = media_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}

{%- if product.media.size > 0 -%}

{%- if action_list_items != blank -%}

{{ action_list_items }}
{%- endif -%}

{%- capture slideshow_nav -%}
{%- if media_count > 1 -%}
{%- if section.settings.show_thumbnails -%}

{%- for media in product.media -%} {%- capture nav_item_badge -%} {%- case media.media_type -%} {%- when 'model' -%} {% render 'icon', icon: 'media-model-badge' %}

{%- when ‘video’ or ‘external_video’ -%}
{% render ‘icon’, icon: ‘media-video-badge’ %}
{%- endcase -%}
{%- endcapture -%}

{%- if section.settings.stack_images -%}

{{ media.alt | escape }}
{{- nav_item_badge -}}

{%- else -%}

{{ media.alt | escape }}
{{- nav_item_badge -}}

{%- endif -%}
{%- endfor -%}

{%- endif -%}

{%- if section.settings.stack_images -%}

{%- for media in product.media -%} {%- endfor -%}
{%- endif -%} {%- endif -%} {%- endcapture -%}

{%- if section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endif -%}

{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“pageDots”: false,
“adaptiveHeight”: true,
“watchCSS”: true,
“dragThreshold”: 8,
“initialIndex”: {{ initial_media_index }},
“arrowShape”: {“x0”: 20, “x1”: 60, “y1”: 40, “x2”: 60, “y2”: 35, “x3”: 25}
}
{%- endcapture -%}

{{ slideshow_media }}

{%- comment -%}Add the “view in your space” button, which allows to show the product in customer’s environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: ‘media_type’, ‘model’ | first -%}

{%- if first_3d_model -%}

{%- render ‘icon’, icon: ‘media-view-in-space’ -%} {{- ‘product.general.view_in_space’ | t -}}

{%- endif -%}

{%- if media_count > 1 -%}
{%- comment -%}
IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
achievable easily using Flickity options only, so we have to run our own
{%- endcomment -%}

{% render 'icon' with 'media-arrow-left' %}
{%- for i in (1..media_count) -%} {%- endfor -%}
{% render 'icon' with 'media-arrow-right' %}
{%- endif -%}

{%- unless section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endunless -%}

{%- endif -%}

{%- capture product_aside -%}
{%- comment -%}

PRODUCT TABS

{%- endcomment -%}

{%- render ‘product-tabs’ -%}

{%- comment -%}

PRODUCT WEAR IT WITH

{%- endcomment -%}

{%- assign buy_it_with_block = section.blocks | where: ‘type’, ‘buy_it_with’ | first -%}

{%- if buy_it_with_block != blank and buy_it_with_block.settings.product != blank -%}
{%- assign associated_product = buy_it_with_block.settings.product -%}

{{ buy_it_with_block.settings.title | escape }}

{% render ‘product-item’, product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}

{%- endif -%} {%- endcapture -%}
{%- assign has_ouputted_variant_selector = false -%}

{%- form ‘product’, product, class: ‘ProductForm’ -%}
{%- render ‘product-data’, product: product -%}

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘@app’ -%}
{%- render block -%}

{%- when ‘product_meta’ -%}
{%- render ‘product-meta’, form: form, block: block, product: product -%}

{%- when ‘description’ -%}
{%- if product.description != blank -%}

{{- product.description | replace: 'data-section-type', 'data-section-type-placeholder' -}}
{%- endif -%}

{%- when ‘share_buttons’ -%}

{{ 'product.form.share' | t }}

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: ‘large’ | prepend: ‘https:’ -%}

{%- when ‘variant_selector’ -%}
{%- assign has_ouputted_variant_selector = true -%}
{%- render ‘product-form’, block: block, product: product -%}

{%- when ‘quantity_selector’ -%}

{%- if block.settings.show_label -%} {{ 'product.form.quantity' | t }}: {%- endif -%}
{%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}

{% render ‘icon’ with ‘minus’ %}

{% render ‘icon’ with ‘plus’ %}

{%- when ‘inventory’ -%}
{%- assign hide_inventory_quantity_by_default = false -%}

{%- if product.selected_or_first_available_variant.inventory_management == blank or product.selected_or_first_available_variant.inventory_quantity <= 0 -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}

{%- if block.settings.inventory_quantity_threshold != 0 and product.selected_or_first_available_variant.inventory_quantity > block.settings.inventory_quantity_threshold -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}

{%- if block.settings.inventory_quantity_threshold == 0 -%} {{- 'product.form.inventory_quantity_count' | t: count: product.selected_or_first_available_variant.inventory_quantity -}} {%- else -%} {{- 'product.form.low_inventory_quantity_count' | t: count: product.selected_or_first_available_variant.inventory_quantity -}} {%- endif -%}

{%- when ‘buy_buttons’ -%}
{%- if block.settings.show_payment_button == false or product.selling_plan_groups.size > 0 -%}
{%- assign use_primary_button = true -%}
{%- else -%}
{%- assign use_primary_button = false -%}
{%- endif -%}

{%- if block.settings.show_payment_button and product.selected_or_first_available_variant.available == false -%} #shopify-section-{{ section.id }} .shopify-payment-button { display: none; } {%- endif -%}

<button type=“submit” data-use-primary-button=“{% if use_primary_button %}true{% else %}false{% endif %}” class=“ProductForm__AddToCart Button {% if product.selected_or_first_available_variant.available and use_primary_button %}Button–primary{% else %}Button–secondary{% endif %} Button–full” {% if product.selected_or_first_available_variant.available %}data-action=“add-to-cart”{% else %}disabled=“disabled”{% endif %}>
{%- if product.selected_or_first_available_variant.available -%}
{% if product.template_suffix == ‘pre-order’ %}{{ ‘product.form.pre_order’ | t }}{% else %}{{ ‘product.form.add_to_cart’ | t }}{% endif %}

{%- if block.settings.show_price_in_button -%}

{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
{%- endif -%}
{%- else -%}
{{- ‘product.form.sold_out’ | t -}}
{%- endif -%}

{%- if block.settings.show_payment_button and product.template_suffix != ‘pre-order’ -%}
{{ form | payment_button }}
{%- endif -%}

{%- when ‘store_pickup’ -%}
{%- comment -%}The availability container will be added automatically if there is store pickup available{%- endcomment -%}

{%- when ‘text’ -%}
{%- if block.settings.text != blank -%}

{{- block.settings.text -}}
{%- endif -%}

{%- endcase -%}
{%- endfor -%}

{%- unless has_ouputted_variant_selector -%}
{%- comment -%}If for any reason the merchant has removed the variant selector block, we still output the ID here{%- endcomment -%}

{%- endunless -%}
{%- endform -%}

{%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}

{%- endif -%}

{%- if product_aside != blank -%}

{{- product_aside -}}
{%- endif -%}

{%- comment -%}

PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.

{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}

{% render 'icon' with 'arrow-left' %} {% render 'icon' with 'close' %} {% render 'icon' with 'arrow-right' %}
{%- endif -%}

{% schema %}
{
“name”: “Product page”,
“class”: “shopify-section–bordered”,
“blocks”: [
{
“type”: “product_meta”,
“name”: “Product meta”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_sku”,
“label”: “Show SKU”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_taxes_included”,
“label”: “Show price taxes notice”,
“default”: false
}
]
},
{
“type”: “variant_selector”,
“name”: “Variant selector”,
“limit”: 1,
“settings”: [
{
“type”: “select”,
“id”: “selector_mode”,
“label”: “Selector type”,
“options”: [
{
“value”: “block”,
“label”: “Block”
},
{
“value”: “dropdown”,
“label”: “Dropdown”
}
],
“default”: “dropdown”
},
{
“type”: “checkbox”,
“id”: “show_color_swatch”,
“label”: “Show color swatch”,
“default”: false,
“info”: “Some colors appear white? Learn more.”
},
{
“type”: “checkbox”,
“id”: “show_color_carousel”,
“label”: “Show color carousel”,
“info”: “A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.”,
“default”: false
},
{
“type”: “page”,
“id”: “size_chart”,
“label”: “Size chart”,
“info”: “Show along option named Size.”
}
]
},
{
“type”: “share_buttons”,
“name”: “Share buttons”,
“limit”: 1
},
{
“type”: “inventory”,
“name”: “Inventory”,
“limit”: 1,
“settings”: [
{
“type”: “range”,
“id”: “inventory_quantity_threshold”,
“label”: “Inventory quantity threshold”,
“info”: “Only show inventory quantity if below threshold. Choose 0 to always show.”,
“min”: 0,
“max”: 50,
“step”: 1,
“default”: 0
}
]
},
{
“type”: “buy_buttons”,
“name”: “Buy buttons”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_price_in_button”,
“label”: “Show price in add to cart button”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Learn more”,
“default”: true
}
]
},
{
“type”: “description”,
“name”: “Description”,
“limit”: 1
},
{
“type”: “quantity_selector”,
“name”: “Quantity selector”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_label”,
“label”: “Show label”,
“default”: false
}
]
},
{
“type”: “text”,
“name”: “Text”,
“settings”: [
{
“type”: “paragraph”,
“content”: “This text will show on the right part of the product page.”
},
{
“type”: “text”,
“id”: “text”,
“label”: “Text”
}
]
},
{
“type”: “store_pickup”,
“name”: “Local pickup availability”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “Show customers where they can pick up the product. Learn more
}
]
},
{
“type”: “@app
},
{
“name”: “Content”,
“type”: “content”,
“settings”: [
{
“type”: “paragraph”,
“content”: “This content will show on the left part, below the product images.”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”
},
{
“type”: “richtext”,
“id”: “content”,
“label”: “Content”
},
{
“type”: “page”,
“id”: “page”,
“label”: “Content from page”,
“info”: “If specified, takes precedence over inline content.”
}
]
},
{
“name”: “Reviews”,
“type”: “reviews”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: "To show reviews, install Shopify Product Reviews. This content will show on the left part, below the product images. "
}
]
},
{
“name”: “Buy it with”,
“type”: “buy_it_with”,
“limit”: 1,
“settings”: [
{
“type”: “product”,
“id”: “product”,
“label”: “Product”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Buy it with”
}
]
}
],
“settings”: [
{
“type”: “header”,
“content”: “Media”
},
{
“type”: “paragraph”,
“content”: “Learn more about media types
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “Size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fill”,
“label”: “Fill screen”
}
],
“default”: “large”
},
{
“type”: “checkbox”,
“id”: “stack_images”,
“label”: “Stack images on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_thumbnails”,
“label”: “Show thumbnails on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: “Enable zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: “Enable video looping”,
“default”: false
}
]
}
{% endschema %}

Thanks again for your quick answer!

You can find the code attached.

Kind regards,

Ayse

1 Like

@andauser

can you please full code here no attachment

1 Like

@KetanKumar

Sorry for that. Please find it below:

{%- assign meta_block = section.blocks | where: ‘type’, ‘product_meta’ | first -%}
{%- assign share_buttons_block = section.blocks | where: ‘type’, ‘share_buttons’ | first -%}
{%- assign inventory_block = section.blocks | where: ‘type’, ‘inventory’ | first -%}
{%- assign buy_buttons_block = section.blocks | where: ‘type’, ‘buy_buttons’ | first -%}

{%- capture section_settings -%}
{
“enableHistoryState”: true,
“templateSuffix”: {{ product.template_suffix | json }},
“showInventoryQuantity”: {% if inventory_block != blank %}true{% else %}false{% endif %},
“showSku”: {{ meta_block.settings.show_sku | json }},
“stackProductImages”: {{ section.settings.stack_images | json }},
“showThumbnails”: {{ section.settings.show_thumbnails | json }},
“enableVideoLooping”: {{ section.settings.enable_video_looping | json }},
“inventoryQuantityThreshold”: {{ inventory_block.settings.inventory_quantity_threshold | default: 0 }},
“showPriceInButton”: {{ buy_buttons_block.settings.show_price_in_button | json }},
“enableImageZoom”: {{ section.settings.enable_image_zoom | json }},
“showPaymentButton”: {{ buy_buttons_block.settings.show_payment_button | json }},
“useAjaxCart”: {% if settings.cart_type == ‘drawer’ %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- capture action_list_items -%} {%- if section.settings.enable_image_zoom -%}
{% render 'icon' with 'plus' %}
{%- endif -%}

{%- if share_buttons_block != blank -%}

{% render 'icon' with 'share' %} {% render 'icon' with 'close' %}

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_media | img_url: ‘1024x’ | prepend: ‘https:’ -%}

{%- endif -%} {%- endcapture -%}

{%- comment -%}

PRODUCT GALLERY

{%- endcomment -%}

{%- assign initial_media_id = product.featured_media.id -%}
{%- assign initial_media_index = 0 -%}
{%- assign media_count = 0 -%}

{%- capture slideshow_media -%}
{%- for media in product.media -%}
{%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
{%- assign initial_media_index = media_count -%}
{%- assign initial_media_id = media.id -%}
{%- endif -%}

{%- capture supported_sizes -%}{%- render ‘image-size’, sizes: ‘200,400,600,700,800,900,1000,1200,1400,1600’, image: media -%}{%- endcapture -%}

{%- case media.media_type -%}
{%- when ‘image’ -%}

{% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{{ media.alt | escape }}

{{ media.alt | escape }}

{%- when ‘external_video’ -%}

{{- media | external_video_tag: image_size: '1024x' -}}

{%- when ‘video’ -%}

{{- media | video_tag: image_size: '1024x', controls: true -}}

{%- when ‘model’ -%}

{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
{%- endcase -%}

{%- assign media_count = media_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}

{%- if product.media.size > 0 -%}

{%- if action_list_items != blank -%}

{{ action_list_items }}
{%- endif -%}

{%- capture slideshow_nav -%}
{%- if media_count > 1 -%}
{%- if section.settings.show_thumbnails -%}

{%- for media in product.media -%} {%- capture nav_item_badge -%} {%- case media.media_type -%} {%- when 'model' -%} {% render 'icon', icon: 'media-model-badge' %}

{%- when ‘video’ or ‘external_video’ -%}
{% render ‘icon’, icon: ‘media-video-badge’ %}
{%- endcase -%}
{%- endcapture -%}

{%- if section.settings.stack_images -%}

{{ media.alt | escape }}
{{- nav_item_badge -}}

{%- else -%}

{{ media.alt | escape }}
{{- nav_item_badge -}}

{%- endif -%}
{%- endfor -%}

{%- endif -%}

{%- if section.settings.stack_images -%}

{%- for media in product.media -%} {%- endfor -%}
{%- endif -%} {%- endif -%} {%- endcapture -%}

{%- if section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endif -%}

{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“pageDots”: false,
“adaptiveHeight”: true,
“watchCSS”: true,
“dragThreshold”: 8,
“initialIndex”: {{ initial_media_index }},
“arrowShape”: {“x0”: 20, “x1”: 60, “y1”: 40, “x2”: 60, “y2”: 35, “x3”: 25}
}
{%- endcapture -%}

{{ slideshow_media }}

{%- comment -%}Add the “view in your space” button, which allows to show the product in customer’s environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: ‘media_type’, ‘model’ | first -%}

{%- if first_3d_model -%}

{%- render ‘icon’, icon: ‘media-view-in-space’ -%} {{- ‘product.general.view_in_space’ | t -}}

{%- endif -%}

{%- if media_count > 1 -%}
{%- comment -%}
IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
achievable easily using Flickity options only, so we have to run our own
{%- endcomment -%}

{% render 'icon' with 'media-arrow-left' %}
{%- for i in (1..media_count) -%} {%- endfor -%}
{% render 'icon' with 'media-arrow-right' %}
{%- endif -%}

{%- unless section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endunless -%}

{%- endif -%}

{%- capture product_aside -%}
{%- comment -%}

PRODUCT TABS

{%- endcomment -%}

{%- render ‘product-tabs’ -%}

{%- comment -%}

PRODUCT WEAR IT WITH

{%- endcomment -%}

{%- assign buy_it_with_block = section.blocks | where: ‘type’, ‘buy_it_with’ | first -%}

{%- if buy_it_with_block != blank and buy_it_with_block.settings.product != blank -%}
{%- assign associated_product = buy_it_with_block.settings.product -%}

{{ buy_it_with_block.settings.title | escape }}

{% render ‘product-item’, product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}

{%- endif -%} {%- endcapture -%}
{%- assign has_ouputted_variant_selector = false -%}

{%- form ‘product’, product, class: ‘ProductForm’ -%}
{%- render ‘product-data’, product: product -%}

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘@app’ -%}
{%- render block -%}

{%- when ‘product_meta’ -%}
{%- render ‘product-meta’, form: form, block: block, product: product -%}

{%- when ‘description’ -%}
{%- if product.description != blank -%}

{{- product.description | replace: 'data-section-type', 'data-section-type-placeholder' -}}
{%- endif -%}

{%- when ‘share_buttons’ -%}

{{ 'product.form.share' | t }}

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: ‘large’ | prepend: ‘https:’ -%}

{%- when ‘variant_selector’ -%}
{%- assign has_ouputted_variant_selector = true -%}
{%- render ‘product-form’, block: block, product: product -%}

{%- when ‘quantity_selector’ -%}

{%- if block.settings.show_label -%} {{ 'product.form.quantity' | t }}: {%- endif -%}
{%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}

{% render ‘icon’ with ‘minus’ %}

{% render ‘icon’ with ‘plus’ %}

{%- when ‘inventory’ -%}
{%- assign hide_inventory_quantity_by_default = false -%}

{%- if product.selected_or_first_available_variant.inventory_management == blank or product.selected_or_first_available_variant.inventory_quantity <= 0 -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}

{%- if block.settings.inventory_quantity_threshold != 0 and product.selected_or_first_available_variant.inventory_quantity > block.settings.inventory_quantity_threshold -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}

{%- if block.settings.inventory_quantity_threshold == 0 -%} {{- 'product.form.inventory_quantity_count' | t: count: product.selected_or_first_available_variant.inventory_quantity -}} {%- else -%} {{- 'product.form.low_inventory_quantity_count' | t: count: product.selected_or_first_available_variant.inventory_quantity -}} {%- endif -%}

{%- when ‘buy_buttons’ -%}
{%- if block.settings.show_payment_button == false or product.selling_plan_groups.size > 0 -%}
{%- assign use_primary_button = true -%}
{%- else -%}
{%- assign use_primary_button = false -%}
{%- endif -%}

{%- if block.settings.show_payment_button and product.selected_or_first_available_variant.available == false -%} #shopify-section-{{ section.id }} .shopify-payment-button { display: none; } {%- endif -%}

<button type=“submit” data-use-primary-button=“{% if use_primary_button %}true{% else %}false{% endif %}” class=“ProductForm__AddToCart Button {% if product.selected_or_first_available_variant.available and use_primary_button %}Button–primary{% else %}Button–secondary{% endif %} Button–full” {% if product.selected_or_first_available_variant.available %}data-action=“add-to-cart”{% else %}disabled=“disabled”{% endif %}>
{%- if product.selected_or_first_available_variant.available -%}
{% if product.template_suffix == ‘pre-order’ %}{{ ‘product.form.pre_order’ | t }}{% else %}{{ ‘product.form.add_to_cart’ | t }}{% endif %}

{%- if block.settings.show_price_in_button -%}

{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
{%- endif -%}
{%- else -%}
{{- ‘product.form.sold_out’ | t -}}
{%- endif -%}

{%- if block.settings.show_payment_button and product.template_suffix != ‘pre-order’ -%}
{{ form | payment_button }}
{%- endif -%}

{%- when ‘store_pickup’ -%}
{%- comment -%}The availability container will be added automatically if there is store pickup available{%- endcomment -%}

{%- when ‘text’ -%}
{%- if block.settings.text != blank -%}

{{- block.settings.text -}}
{%- endif -%}

{%- endcase -%}
{%- endfor -%}

{%- unless has_ouputted_variant_selector -%}
{%- comment -%}If for any reason the merchant has removed the variant selector block, we still output the ID here{%- endcomment -%}

{%- endunless -%}
{%- endform -%}

{%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}

{%- endif -%}

{%- if product_aside != blank -%}

{{- product_aside -}}
{%- endif -%}

{%- comment -%}

PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.

{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}

{% render 'icon' with 'arrow-left' %} {% render 'icon' with 'close' %} {% render 'icon' with 'arrow-right' %}
{%- endif -%}

{% schema %}
{
“name”: “Product page”,
“class”: “shopify-section–bordered”,
“blocks”: [
{
“type”: “product_meta”,
“name”: “Product meta”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_sku”,
“label”: “Show SKU”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_taxes_included”,
“label”: “Show price taxes notice”,
“default”: false
}
]
},
{
“type”: “variant_selector”,
“name”: “Variant selector”,
“limit”: 1,
“settings”: [
{
“type”: “select”,
“id”: “selector_mode”,
“label”: “Selector type”,
“options”: [
{
“value”: “block”,
“label”: “Block”
},
{
“value”: “dropdown”,
“label”: “Dropdown”
}
],
“default”: “dropdown”
},
{
“type”: “checkbox”,
“id”: “show_color_swatch”,
“label”: “Show color swatch”,
“default”: false,
“info”: “Some colors appear white? Learn more.”
},
{
“type”: “checkbox”,
“id”: “show_color_carousel”,
“label”: “Show color carousel”,
“info”: “A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.”,
“default”: false
},
{
“type”: “page”,
“id”: “size_chart”,
“label”: “Size chart”,
“info”: “Show along option named Size.”
}
]
},
{
“type”: “share_buttons”,
“name”: “Share buttons”,
“limit”: 1
},
{
“type”: “inventory”,
“name”: “Inventory”,
“limit”: 1,
“settings”: [
{
“type”: “range”,
“id”: “inventory_quantity_threshold”,
“label”: “Inventory quantity threshold”,
“info”: “Only show inventory quantity if below threshold. Choose 0 to always show.”,
“min”: 0,
“max”: 50,
“step”: 1,
“default”: 0
}
]
},
{
“type”: “buy_buttons”,
“name”: “Buy buttons”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_price_in_button”,
“label”: “Show price in add to cart button”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Learn more”,
“default”: true
}
]
},
{
“type”: “description”,
“name”: “Description”,
“limit”: 1
},
{
“type”: “quantity_selector”,
“name”: “Quantity selector”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_label”,
“label”: “Show label”,
“default”: false
}
]
},
{
“type”: “text”,
“name”: “Text”,
“settings”: [
{
“type”: “paragraph”,
“content”: “This text will show on the right part of the product page.”
},
{
“type”: “text”,
“id”: “text”,
“label”: “Text”
}
]
},
{
“type”: “store_pickup”,
“name”: “Local pickup availability”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “Show customers where they can pick up the product. Learn more
}
]
},
{
“type”: “@app
},
{
“name”: “Content”,
“type”: “content”,
“settings”: [
{
“type”: “paragraph”,
“content”: “This content will show on the left part, below the product images.”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”
},
{
“type”: “richtext”,
“id”: “content”,
“label”: “Content”
},
{
“type”: “page”,
“id”: “page”,
“label”: “Content from page”,
“info”: “If specified, takes precedence over inline content.”
}
]
},
{
“name”: “Reviews”,
“type”: “reviews”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: "To show reviews, install Shopify Product Reviews. This content will show on the left part, below the product images. "
}
]
},
{
“name”: “Buy it with”,
“type”: “buy_it_with”,
“limit”: 1,
“settings”: [
{
“type”: “product”,
“id”: “product”,
“label”: “Product”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Buy it with”
}
]
}
],
“settings”: [
{
“type”: “header”,
“content”: “Media”
},
{
“type”: “paragraph”,
“content”: “Learn more about media types
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “Size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fill”,
“label”: “Fill screen”
}
],
“default”: “large”
},
{
“type”: “checkbox”,
“id”: “stack_images”,
“label”: “Stack images on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_thumbnails”,
“label”: “Show thumbnails on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: “Enable zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: “Enable video looping”,
“default”: false
}
]
}
{% endschema %}

Sorry for that, please find the code below:

{%- assign meta_block = section.blocks | where: 'type', 'product_meta' | first -%}
{%- assign share_buttons_block = section.blocks | where: 'type', 'share_buttons' | first -%}
{%- assign inventory_block = section.blocks | where: 'type', 'inventory' | first -%}
{%- assign buy_buttons_block = section.blocks | where: 'type', 'buy_buttons' | first -%}

{%- capture section_settings -%}
{
"enableHistoryState": true,
"templateSuffix": {{ product.template_suffix | json }},
"showInventoryQuantity": {% if inventory_block != blank %}true{% else %}false{% endif %},
"showSku": {{ meta_block.settings.show_sku | json }},
"stackProductImages": {{ section.settings.stack_images | json }},
"showThumbnails": {{ section.settings.show_thumbnails | json }},
"enableVideoLooping": {{ section.settings.enable_video_looping | json }},
"inventoryQuantityThreshold": {{ inventory_block.settings.inventory_quantity_threshold | default: 0 }},
"showPriceInButton": {{ buy_buttons_block.settings.show_price_in_button | json }},
"enableImageZoom": {{ section.settings.enable_image_zoom | json }},
"showPaymentButton": {{ buy_buttons_block.settings.show_payment_button | json }},
"useAjaxCart": {% if settings.cart_type == 'drawer' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}

{%- endif -%}

{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"blocks": [
{
"type": "product_meta",
"name": "Product meta",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_sku",
"label": "Show SKU",
"default": false
},
{
"type": "checkbox",
"id": "show_taxes_included",
"label": "Show price taxes notice",
"default": false
}
]
},
{
"type": "variant_selector",
"name": "Variant selector",
"limit": 1,
"settings": [
{
"type": "select",
"id": "selector_mode",
"label": "Selector type",
"options": [
{
"value": "block",
"label": "Block"
},
{
"value": "dropdown",
"label": "Dropdown"
}
],
"default": "dropdown"
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": false,
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch)."
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.",
"default": false
},
{
"type": "page",
"id": "size_chart",
"label": "Size chart",
"info": "Show along option named Size."
}
]
},
{
"type": "share_buttons",
"name": "Share buttons",
"limit": 1
},
{
"type": "inventory",
"name": "Inventory",
"limit": 1,
"settings": [
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
}
]
},
{
"type": "buy_buttons",
"name": "Buy buttons",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_price_in_button",
"label": "Show price in add to cart button",
"default": false
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
}
]
},
{
"type": "description",
"name": "Description",
"limit": 1
},
{
"type": "quantity_selector",
"name": "Quantity selector",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_label",
"label": "Show label",
"default": false
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "paragraph",
"content": "This text will show on the right part of the product page."
},
{
"type": "text",
"id": "text",
"label": "Text"
}
]
},
{
"type": "store_pickup",
"name": "Local pickup availability",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup#show-pickup-availability-to-your-customers)"
}
]
},
{
"type": "@app"
},
{
"name": "Content",
"type": "content",
"settings": [
{
"type": "paragraph",
"content": "This content will show on the left part, below the product images."
},
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
},
{
"type": "page",
"id": "page",
"label": "Content from page",
"info": "If specified, takes precedence over inline content."
}
]
},
{
"name": "Reviews",
"type": "reviews",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To show reviews, install [Shopify Product Reviews](https://apps.shopify.com/product-reviews). This content will show on the left part, below the product images. "
}
]
},
{
"name": "Buy it with",
"type": "buy_it_with",
"limit": 1,
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Buy it with"
}
]
}
],
"settings": [
{
"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_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "stack_images",
"label": "Stack images on desktop",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails on desktop",
"default": true
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
}
]
}
{% endschema %}

I copy paste the code below, but when I post it, the entry gets deleted.

Do you have any views on what I am doing wrong?

1 Like

@andauser

can you try you code here

https://pastecode.io/

1 Like

Thanks a lot for the guidance!

Please find the code under:

https://pastecode.io/s/hzikkw73

Kind regards,

Ayse

1 Like

@andauser

thanks for code please update this code

{%- assign meta_block = section.blocks | where: 'type', 'product_meta' | first -%}
{%- assign share_buttons_block = section.blocks | where: 'type', 'share_buttons' | first -%}
{%- assign inventory_block = section.blocks | where: 'type', 'inventory' | first -%}
{%- assign buy_buttons_block = section.blocks | where: 'type', 'buy_buttons' | first -%}

{%- capture section_settings -%}
{
"enableHistoryState": true,
"templateSuffix": {{ product.template_suffix | json }},
"showInventoryQuantity": {% if inventory_block != blank %}true{% else %}false{% endif %},
"showSku": {{ meta_block.settings.show_sku | json }},
"stackProductImages": {{ section.settings.stack_images | json }},
"showThumbnails": {{ section.settings.show_thumbnails | json }},
"enableVideoLooping": {{ section.settings.enable_video_looping | json }},
"inventoryQuantityThreshold": {{ inventory_block.settings.inventory_quantity_threshold | default: 0 }},
"showPriceInButton": {{ buy_buttons_block.settings.show_price_in_button | json }},
"enableImageZoom": {{ section.settings.enable_image_zoom | json }},
"showPaymentButton": {{ buy_buttons_block.settings.show_payment_button | json }},
"useAjaxCart": {% if settings.cart_type == 'drawer' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}

{%- endif -%}

{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"blocks": [
{
"type": "product_meta",
"name": "Product meta",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_sku",
"label": "Show SKU",
"default": false
},
{
"type": "checkbox",
"id": "show_taxes_included",
"label": "Show price taxes notice",
"default": false
}
]
},
{
"type": "variant_selector",
"name": "Variant selector",
"limit": 1,
"settings": [
{
"type": "select",
"id": "selector_mode",
"label": "Selector type",
"options": [
{
"value": "block",
"label": "Block"
},
{
"value": "dropdown",
"label": "Dropdown"
}
],
"default": "dropdown"
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": false,
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch)."
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.",
"default": false
},
{
"type": "page",
"id": "size_chart",
"label": "Size chart",
"info": "Show along option named Size."
}
]
},
{
"type": "share_buttons",
"name": "Share buttons",
"limit": 1
},
{
"type": "inventory",
"name": "Inventory",
"limit": 1,
"settings": [
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
}
]
},
{
"type": "buy_buttons",
"name": "Buy buttons",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_price_in_button",
"label": "Show price in add to cart button",
"default": false
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
}
]
},
{
"type": "description",
"name": "Description",
"limit": 1
},
{
"type": "quantity_selector",
"name": "Quantity selector",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_label",
"label": "Show label",
"default": false
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "paragraph",
"content": "This text will show on the right part of the product page."
},
{
"type": "text",
"id": "text",
"label": "Text"
}
]
},
{
"type": "store_pickup",
"name": "Local pickup availability",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup#show-pickup-availability-to-your-customers)"
}
]
},
{
"type": "@app"
},
{
"name": "Content",
"type": "content",
"settings": [
{
"type": "paragraph",
"content": "This content will show on the left part, below the product images."
},
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
},
{
"type": "page",
"id": "page",
"label": "Content from page",
"info": "If specified, takes precedence over inline content."
}
]
},
{
"name": "Reviews",
"type": "reviews",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To show reviews, install [Shopify Product Reviews](https://apps.shopify.com/product-reviews). This content will show on the left part, below the product images. "
}
]
},
{
"name": "Buy it with",
"type": "buy_it_with",
"limit": 1,
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Buy it with"
}
]
}
],
"settings": [
{
"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_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "stack_images",
"label": "Stack images on desktop",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails on desktop",
"default": true
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
}
]
}
{% endschema %}
1 Like

Hello @KetanKumar

I have added this code but there is a minor problem. Fields that you have moved are aligned to the right side. Instead, can we align them to the left side?

Also, could you please remove the field of “View Images / more information” field below?

Kind regards,

Ayse

Hi @andauser

Could you please share the code for this? I am trying to do the same for my website and the code here at the moment doesn’t seem to be resolved.

Thank you!

Unfortunately this code doesn’t work. Do you have some update to it?