Our products has many colors, e.g. product A has white, blue, yellow, etc and it is in collection “tshirt”.
When I visit https://www.xxx.com/collections/tshirt, it only show first variant image. Is there any possible that I use change featured main image to variant image if I use color query string from url?
for example:
XXX.com - XXX Sex Videos - Free ■■■■ Movies, it will show image of blue variant;
XXX.com - XXX Sex Videos - Free ■■■■ Movies , it will show image of blue and pearl pink variant;
And for the collection page, when I create a blue tshirt collection, it will show default blue variant image without any url string. Any possible?
Here is collection-template.liquid file code:
{%- liquid
assign per_row = 4
assign paginate_by = per_row | times: 7
for block in section.blocks
case block.type
when 'product_grid'
assign per_row = block.settings.per_row
assign paginate_by = per_row | times: block.settings.rows_per_page
endcase
endfor
assign current_filter_size = 0
for filter in collection.filters
assign current_filter_size = current_filter_size | plus: filter.active_values.size
endfor
-%}
{%- paginate collection.products by paginate_by -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'collection_description' -%}
{%- if collection.description != blank and current_filter_size == 0 -%}
{{ collection.description }}
{%- endif -%}
{%- when 'subcollections' -%}
{%- if current_filter_size == 0 -%}
{%- render 'subcollections', per_row: block.settings.subcollections_per_row -%}
{%- endif -%}
{%- when 'product_grid' -%}
{%- liquid
assign current_filter_size = 0
for filter in collection.filters
assign current_filter_size = current_filter_size | plus: filter.active_values.size
endfor
-%}
{%- if block.settings.enable_collection_count -%}
{{ 'collections.general.items_with_count' | t: count: collection.products_count }}
{%- endif -%}
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
{%- if block.settings.enable_collection_count -%}
{{ 'collections.general.items_with_count' | t: count: collection.products_count }}
{%- endif -%}
{%- liquid
assign grid_item_width = 'small--one-half medium-up--one-third'
case per_row
when 2
assign grid_item_width = 'medium-up--one-half'
when 3
assign grid_item_width = 'small--one-half medium-up--one-third'
when 4
assign grid_item_width = 'small--one-half medium-up--one-quarter'
when 5
assign grid_item_width = 'small--one-half medium-up--one-fifth'
endcase
-%}
{%- for product in collection.products -%}
{%- render 'product-grid-item', product: product, grid_item_width: grid_item_width, per_row: per_row -%}
{%- else -%}
{{ 'collections.general.no_matches' | t }}
{%- endfor -%}
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
{%- if settings.quick_shop_enable -%}
{%- for product in collection.products -%}
{%- render 'quick-shop-modal', product: product -%}
{%- endfor -%}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- endpaginate -%}
Here is my product-grid-item.liquid file code:
{%- liquid
unless grid_item_width
assign grid_item_width = 'medium-up--one-quarter small--one-half'
endunless
unless per_row
assign per_row = '4'
endunless
assign on_sale = false
if product.compare_at_price > product.price
assign on_sale = true
endif
assign product_tags = product.tags | join: ','
assign has_custom_label = false
if product_tags contains '_label_'
for tag in product.tags
if tag contains '_label_'
assign tag_starts_with = tag | slice: 0
if tag_starts_with == '_'
assign has_custom_label = true
assign custom_label = tag | replace: '_label_', ''
endif
endif
endfor
endif
-%}
{%- if has_custom_label -%}
{{ custom_label }}
{%- else -%}
{%- unless product.available -%}
{{ 'products.product.sold_out' | t }}
{%- endunless -%}
{%- if on_sale and product.available -%}
{{ 'products.general.sale' | t }}
{%- endif -%}
{%- endif -%}
{%- liquid
assign fixed_aspect_ratio = false
unless settings.product_grid_image_size == 'natural'
assign fixed_aspect_ratio = true
endunless
assign preview_image = product.featured_media.preview_image
assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}
{%- if settings.quick_shop_enable -%}
{{ settings.quick_shop_text }}
{%- endif -%}
{%- if fixed_aspect_ratio -%}
{%- else -%}
{%- endif -%}
{%- if settings.product_hover_image and product.media.size > 1 -%}
{%- for media in product.media offset: 1 limit: 1 -%}
{%- assign second_image = media.preview_image -%}
{%- endfor -%}
{%- assign img_url = second_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- if settings.enable_swatches -%}
{%- assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase -%}
{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_name contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ',' | append: ',' | append: value | split: ','
-%}
{%- if variant.image -%}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{{ product.title }}
{%- if settings.vendor_enable -%}
{{ product.vendor }}
{%- endif -%}
{%- if on_sale -%}
{{ 'products.general.regular_price' | t }}
{{ product.compare_at_price | money }}
{{ 'products.general.sale_price' | t }}
{%- endif -%}
{%- if product.price_varies -%}
{%- assign price = product.price_min | money -%}
{{ 'products.general.from_text_html' | t: price: price }}
{%- else -%}
{{ product.price | money }}
{%- endif -%}
{%- if on_sale -%}
{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{%- endif -%}
{%- endif -%}
{%- assign product_variant = product.selected_or_first_available_variant -%}
{%- if product_variant.unit_price_measurement -%}
{%- capture unit_price_base_unit -%}
{%- if product_variant.unit_price_measurement -%}
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
{{ product_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}
{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
{%- endif -%}
{%- if settings.enable_swatches -%}
{%- liquid
assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase
assign swatch_file_extension = 'png'
assign color_count = 0
-%}
{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_name contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ',' | append: ',' | append: value | split: ','
assign color_file_name = value | handle | append: '.' | append: swatch_file_extension
assign color_image = color_file_name | file_img_url: '50x50' | prepend: 'https:' | split: '?' | first
assign color_swatch_fallback = value | split: ' ' | last | handle
assign color_count = color_count | plus: 1
-%}
{{ value }}
{%- endunless -%}
{%- endfor -%}
{%- if color_count < 2 -%}
{%- style -%}
.grid-product__colors--{{ product.id }} {
display: none;
}
{%- endstyle -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if settings.enable_product_reviews -%}
{%- endif -%}
Can anyone help? Thanks so much.