Shopify themes, liquid, logos, and UX
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...!
try this code
https://codepen.io/booom/pen/dyYjREp
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025