Dear community,
I am trying to change the layout of the product block in my featured collection to show the image on the left and the description on the right side next to it, instead of image and then description below one another. I know this must be possible by adding some flex containers to the product-block code but I cannot figure out what to add where … Any hint will be greatly appreciated!
{%- liquid
assign cheapest_variant = product.variants | sort: 'price' | first
assign on_sale = false
if cheapest_variant.compare_at_price > cheapest_variant.price
assign on_sale = true
endif
assign product_url = product.url | within: collection
if animation_type == blank
assign animation_type = "cc-fade-in-up"
endif
assign primary_image = product.featured_media.preview_image
assign secondary_image = product.media[1].preview_image
if settings.prod_show_videos
assign videos = product.media | where: "media_type", "video"
unless videos == blank
for source in videos[0].sources
if source != blank and source.format == "mp4"
assign video_source = source
break
endif
endfor
assign mp4_url = video_source.url
endunless
endif
assign product_has_swatches = false
if settings.swatch_enabled and settings.prod_block_swatches and hide_swatches != true
for product_option in product.options_with_values
if settings.swatch_option_name == product_option.name
assign product_has_swatches = true
break
endif
endfor
endif
assign param_symbol = "?"
if product.url contains "?"
assign param_symbol = "&"
endif
-%}
1 %}all-images{% endif %}
{% if product.tags contains 'meta-layout-right' %}layout-right{% endif %}
{% if settings.prod_label_layout == 'marquee_on_hover' %} product-block--marquee-on-hover {% endif%}
{% if settings.quickbuy_enabled %}product-block--quickbuy{% endif %}
{% if mp4_url != blank %}product-block--video{% endif %}
{% if product_has_swatches %}product-block--has-swatches{% endif %}
{{ product_class }}"
data-loop-index="{{ i }}"
{% if animate %} data-cc-animate="{{ animation_type }}" data-cc-animate-delay="{{ animate | times: 0.15 }}s" {% endif %}
{% if product.images.size > 1 %}
{% if settings.prod_hover == "all_images" or product_has_swatches %}
{%- liquid
assign images = ""
for image in product.images
assign image_placeholder = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign images = images | append: "," | append: image_placeholder
endfor
-%}
data-product-images="{{ images | remove_first: "," }}"
{% endif %}
{% endif %}
>
1 %}image--hover-second {% if primary_image.aspect_ratio == secondary_image.aspect_ratio %}image--same-aspect-ratio{% endif %}{% endif %}">
{% if settings.prod_label_layout contains 'marquee' %}
{% render 'product-label', product: product, cheapest_variant: cheapest_variant %}
{% endif %}
{% if mp4_url != blank %}
{% render 'inline-video', video: mp4_url, image: primary_image %}
{% else %}
{% render 'responsive-image', image: primary_image %}
{% endif %}
{% unless settings.prod_label_layout contains 'marquee' %}
{% render 'product-label', product: product, cheapest_variant: cheapest_variant %}
{% endunless %}
{% if settings.prod_hover == "second_image" and product.media.size > 1 %}
{% render 'responsive-image', image: secondary_image, aspect_ratio: primary_image.aspect_ratio %}
{% endif %}
{%- if settings.swatch_enabled and settings.prod_block_swatches and hide_swatches != true -%}
{%- assign option_limit = 3 -%}
{%- for product_option in product.options_with_values -%}
{%- if settings.swatch_option_name == product_option.name -%}
{%- if product.options.size == 1 -%}
{%- for variant in product.variants -%}
{%- assign variant_image = variant.featured_media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if forloop.index <= option_limit %}
- {{ variant.title }}
{% endif %}
{%- endfor -%}
{%- if product.variants.size > option_limit -%}
- +{{ product.variants.size | minus: option_limit }}
{%- endif -%}
{%- else -%}
{%- assign product_option_position_0index = product_option.position | minus: 1 -%}
{%- for product_option_value in product_option.values -%}
{%- liquid
assign option_value_variant = false
assign is_unavailable = true
for variant in product.variants
if variant.options[product_option_position_0index] == product_option_value
assign option_value_variant = variant
break
endif
endfor
for variant in product.variants
if variant.available and variant.options[product_option_position_0index] == product_option_value
assign is_unavailable = false
break
endif
endfor
assign variant_image = option_value_variant.featured_media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}
{% if forloop.index <= option_limit %}
- {{ product_option_value }}
{% endif %}
{%- endfor -%}
{%- if product_option.values.size > option_limit -%}
- +{{ product_option.values.size | minus: option_limit }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if settings.quickbuy_enabled -%}
{{ 'products.listing.quick_view' | t }}
{%- endif -%}
{% if show_custom_title %}
{{ product.metafields.custom.farbe }}
{% else %}
{{ product.title }}
{% endif %}
{% if show_vendor %}
{{ product.vendor }}
{% endif %}
{% if product.price_varies %}{{ 'products.listing.from' | t }}{% endif %}
{%- render "price", price: cheapest_variant.price -%}
{% if on_sale %}{%- render "price", price: cheapest_variant.compare_at_price -%}{% endif %}
{% render 'unit-price', variant: cheapest_variant %}
{% if settings.show_product_block_reviews %}
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
{% if product.metafields.reviews.rating_count != blank and product.metafields.reviews.rating_count > 0 %}
{{ product.metafields.reviews.rating_count }} {{ 'products.product.reviews_link' | t: count: product.metafields.reviews.rating_count | downcase }}
{% endif %}
{% endif %}
What I would like to do is add some whitespace on the left and right of these blocks in the desktop version. So eventually, it shall look something like this:
I tried adding some margin to the column block, but this will cause the blocks to no longer be aligned next to each other, but lets them jump to a second line …
