hey,
I’m currently using the Brooklyn Theme. i want to display product images Side-by-Side (2 images) and remaining images below this. I have go through many community solutions but not single one work for me, as in product-templete.liquid the “product-single__photo-wrapper” class not found in my current theme
{%- 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 -%}
{%- 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 -%}
{% assign save_price_percentage = product.price | times: -100 | divided_by: product.compare_at_price_max | plus: 100 | ceil %}
{% if product.compare_at_price > product.price %}
{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | times: 100 | divided_by: 100 | floor }}% OFF
{% 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 -%}
---
We request you to go through our SIZE CHART before making a purchase.
{%- 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 -%}
{%- 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 }}
{%- endif -%}
{%- render 'product-additional-content', product: product, section_id: section_id -%}
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-profile', product: product %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}
{% capture the_snippet_reviews %}{% render 'socialshopwave-widget-recommends', product: product %}{% endcapture %}
{% unless the_snippet_reviews contains 'Liquid error' %}
{{ the_snippet_reviews }}
{% endunless %}
i want to display product page like this…
Plz help me out with this..
Store URL:-
Thanks in Advance…!
