How can i set the product image Side-by-Side in Brooklyn theme?

aniketpatil
Tourist
15 0 2

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...

aniketpatil_0-1632085067494.png

Plz help me out with this..

Store URL:- 

monrowshoesindia.myshopify.com


Thanks in Advance...! 

Reply 1 (1)
KetanKumar
Shopify Partner
35891 3586 11605

@aniketpatil 

try this code

https://codepen.io/booom/pen/dyYjREp

KetanKumar_0-1632139531337.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing