Hello,
I am using the Minimal theme and the product page is split into two halves horizontally. On the left is a scroll of images and on the right is the Product Info.
As it is now, when the screen size is small/mobile it collapses so that the product info goes below the last image in the scroll.
Is there a fairly clean and easy way to change this so that on small/mobile screen the product info is inserted between the first and second images of the scroll?
I have attached screen shots of desktop and mobile as they are currently and a mock-up of how I would like the mobile/small screen to look.
Current code also below.
Any help would be greatly appreciated!
Here is the current code for product page:
{% case section.settings.add_to_cart_width %}
{% when 'small' %}
{%- assign btn_class = 'btn--wide' -%}
{%- assign productform_class = 'product-form--wide' -%}
{% when 'medium' %}
{%- assign btn_class = 'btn--wide' -%}
{%- assign productform_class = 'product-form--wide' -%}
{% when 'large' %}
{%- assign btn_class = 'btn--full' -%}
{%- assign productform_class = 'product-form--full' -%}
{% endcase %}
{% if section.settings.add_to_cart_width != 'small' %}
{% endif %}
{% if section.settings.product_thumbnails_position == 'below' or product.images.size < 2 %}
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}
{% endfor %}
{% else %}
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}
{% else %}
{% endfor %}
{% endif %}
{% if section.settings.product_image_zoom_type == 'lightbox' %}
{% for image in product.images %}
-
{% endfor %}
{% endif %}
{% if section.settings.product_vendor_enable %}
{{ product.vendor }}
{% endif %}
{{ product.title }}
{% assign variant = product.selected_or_first_available_variant %}
{{ 'products.product.regular_price' | t }}
{{ product.price | money }}
{% if product.compare_at_price > product.price %}
{{ 'products.product.sale_price' | t }}
<s>
{{ product.compare_at_price_max | money }}
</s>
{% else %}
{{ 'products.product.sale_price' | t }}
<s>
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
{%- if shop.taxes_included -%}
{{ 'products.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
{%- endif -%}
{% form 'product', product, class:productform_class %}
{% for variant in product.variants %}
- {% if variant.available %}
{% else %}
{% endif %}
{% endfor %}
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}
{% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
- {{ 'products.product.description' | t }}
- {{ pages[section.settings.extra_tab_content].title }}
{{ product.description }}
{{ pages[section.settings.extra_tab_content].content }}
{% else %}
{{ product.description }}
{% endunless %}
{% if product.title == "abc" %}
Lorem ipsum dolor...
{% else %}
def text here...
{% endif %}
{% if product.title == "abc" %}
abc...
{% else %}
def...
{% endif %}
{% if product.title == "abc" %}
abc...
{% else %}
def...
{% endif %}
{% if product.title == "abc" %}
abc...
{% else %}
def text here...
{% endif %}
{% if section.settings.social_sharing %}
---
## {{ 'products.general.share_title' | t }}
{% include 'social-sharing' %}
{% endif %}
{% unless product == empty %}
{% endunless %}