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.'
-%}
<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-title="{{ product.title | escape }}"
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 %}>
{%- render 'product-template-variables', product: product, current_variant: current_variant -%}
<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 }} product-single__sticky">
{%- 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
-%}
</div>
{%- endif -%}
<div class="grid__item {{ product_description_width }}">
<div class="product-single__meta" style="text-align-last: center;">
{%- if settings.show_breadcrumbs and isModal != true -%}
{%- render '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 -%}
{%- 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
-%}
<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 %}">
{%- unless hide_sale_price -%}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{%- endunless -%}
</span>
{%- endif -%}
<div class="discount" style="color: #2bbcc3;font-weight: bold;">
{% 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 %}
</div>
<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" style="margin-block-end: auto;">
<p style="color: rgb(43 188 195); font-weight: 700; text-align: center; font-size: small; "> We request you to go through our SIZE CHART before making a purchase.</p>
{%- 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 -%}
<div
id="ProductFormHolder-{{ section_id }}"
class="product-form-holder"
data-url="{{ product.url }}"
data-template="{{ product.template_suffix }}"></div>
{%- endunless -%}
{%- unless isModal -%}
{%- if settings.surface_pickup_enable -%}
<div id="StoreAvailabilityHolder-{{ section_id }}"
data-product-name="{{ product.title | escape }}"
data-base-url="{{ shop.url }}{{ routes.root_url }}"
></div>
{%- endif -%}
{%- 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, 700, 1024]"
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 -%}
{%- unless description_style == 'full' -%}
<div class="product-single__description rte">
{{ product.description }}
</div>
</div>
{%- 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 -%}
<br>
</div>
</div>
{%- unless image_position == 'left' -%}
<div class="grid__item {{ product_image_width }} product-single__sticky">
{%- 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
-%}
</div>
{%- endunless -%}
</div>
{%- if description_style == 'full' -%}
<div class="product-single__description-full rte">
{{ product.description }}
</div>
{%- 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 %}
</div>
</div>
</div>
i want to display product page like this...
Plz help me out with this..
Store URL:-
| monrowshoesindia.myshopify.com |
Thanks in Advance...!
Community Blog Articles
A guide to Shopify POS Launch and Operations success
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024
Community Connect: Recap March 24’
We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024
Shopify Store Design: Expert Advice from Stephen’s World
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024