Not clear to me what do want
Can you see that the number of reviews under each product photo is out of proportion on not directly underneath the photos. It’s too far down near the other product photos.
1 Like
please share your snippets/product-grid-item.liquid file code .
Please share code not screenshot
Which part of the code? Just the part I changed?
please copy snippets/product-grid-item.liquid file code and send .
i will modify code and send to you
Thanks!
{% comment %}
This snippet is used to showcase each product during the loop,
‘for product in collection.products’ in collection.liquid.
A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.
Example
- assign grid_item_width = ‘large–one-quarter medium–one-half’
{% endcomment %}
{% unless grid_item_width %}
{% assign grid_item_width = ‘large–one-third medium–one-half’ %}
{% endunless %}
{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{%- assign variant = product.selected_or_first_available_variant -%}
{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}
{% if featured_image.src== blank %}
![{{ featured_image.alt | escape }}]()
{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
![{{ featured_image.alt | escape }}]()
![{{ featured_image.alt | escape }}]()
{% endif %}
{% if sold_out %}
{% elsif on_sale %}
{{ product.title }}
—
{% if on_sale %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
+
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{{ 'products.product.sold_out_html' | t }}
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
{% endif %}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ ‘general.accessibility.unit_price_separator’ | t }}
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endcapture -%}
{{ ‘products.general.unit_price’ | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
{%- endif -%}
{% if section.settings.product_vendor_enable %}
{{ product.vendor }}
{% endif %}Please replace this code but before backup your old code
{% comment %}
This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.
A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.
Example
- assign grid_item_width = 'large--one-quarter medium--one-half'
{% endcomment %}
{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}
{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{%- assign variant = product.selected_or_first_available_variant -%}
{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if featured_image.src== blank %}
{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
{% endif %}
{% if sold_out %}
{{ 'products.product.sold_out_html' | t }}
{% elsif on_sale %}
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{% endif %}
{{ product.title }}
—
{% if on_sale %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
+
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ 'general.accessibility.unit_price_separator' | t }}
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endcapture -%}
{{ 'products.general.unit_price' | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
{%- endif -%}
{% if section.settings.product_vendor_enable %}
{{ product.vendor }}
{% endif %}
how do you back up the old code?
Great! it worked!
This is already full width
1- Click on Online store => Actions => Edit code => timber.scss.liquid
2- At the very bottom of the code paste the following code:
.template-product .rte table {
table-layout: auto !important;
}
Thanks, is that the biggest the reviews box goes?
Is there anyway of moving the review box up under the product photo on the left hand side so its not right down the bottom of page?
Probably just keep tinkering with the CSS and possibly the theme template