Hi all,
Does any one know how to split Brooklyn theme product-theme.liquid in order to have 2 pictures per row instead of one ?
Thanks a lot !
Example of what I would like :
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Hi @KetanKumar ,
Thanks for helping.
As my website is not live, you will not be able to see my product page.
Please find below the grid code in my product-template.liquid :
<!-- /templates/product.liquid -->
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
<div itemscope itemtype="http://schema.org/Product" id="ProductSection--{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product-template"
data-image-zoom-type="{{ section.settings.enable_image_zoom }}"
data-enable-history-state="true"
data-stacked-layout="{% if section.settings.media_layout == "stacked" %}true{% else %}false{% endif %}"
{% if first_3d_model %}data-has-model="true"{% endif %}>
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_media | img_url: 'grande' }}">
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}
{% assign stacked = false %}
{% if section.settings.media_layout == "stacked" %}{% assign stacked = true %}{% endif %}
{%- assign first_media = true -%}
<div class="grid product-single">
<div class="grid__item large--six-twelfths medium--six-twelfths text-center">
<div id="ProductMediaGroup-{{ section.id }}" class="product-double__media-group-wrapper" data-product-double-media-group-wrapper>
<div class="product-double__media-group{% unless stacked %} product-single__media-group--single-xr{% endunless %}" data-product-double-media-group>
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{% assign height = 850 %}
{% assign width = 575 %}
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{% comment %}
Display product images
{% endcomment %}
{%- for media in product.media -%}
{%- assign featured = false -%}
{%- if media == featured_media -%}
{%- assign featured = true -%}
{%- endif -%}
{%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
<div class="product-single__media-flex-wrapper" data-slick-media-label="{{ thumbnail_alt }}" data-product-single-media-flex-wrapper>
<div class="product-single__media-flex">
{%- include 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}
{% comment %}
Display a "View in your space" button (multi) for the first visible media and each individual model.
Stacked layout only.
{% endcomment %}
{% if stacked %}
{%- assign xr_id = false -%}
{%- if first_media and first_3d_model -%}
{%- assign xr_id = first_3d_model.id -%}
{%- elsif media.media_type == 'model' -%}
{%- assign xr_id = media.id -%}
{%- endif -%}
{%- if xr_id -%}
{%- include 'xr-button' with model_id: xr_id, multi: true -%}
{%- endif -%}
{%- assign first_media = false -%}
{% endif %}
</div>
</div>
{%- endfor -%}
</div>
Thanks again
User | Count |
---|---|
546 | |
209 | |
125 | |
80 | |
42 |