Hello,
All my products have a color option, even when there i just one color variant availabe, this is for filter purposes. I would like to show the color swatches, but i don’t want to show just the one color variant. I only want it to show when there are multiple variants. is this posible?
See screenshot for context
Thanks in advance!
Hi @thirza ,
Please go to Actions > Edit code > find ‘product’ and send me the code of the file named including ‘product’ located in the snippets folder, I will check it for you. For example:
i have product-item.liquid
{%- liquid
assign color_t = ‘products.color’ | t
assign compare_price_t = ‘sections.onboarding.compare_price’ | t
assign from_t = ‘products.from’ | t
assign new_t = ‘products.new’ | t
assign off_t = ‘products.off’ | t
assign out_of_stock_t = ‘products.out_of_stock’ | t
assign price_t = ‘sections.onboarding.price’ | t
assign sale_t = ‘products.sale’ | t
assign select_options_t = ‘products.select_options’ | t
unless section_id
assign section_id = unique_handle
endunless
assign current_variant = product.selected_or_first_available_variant
assign featured_tags = settings.product–featured-tags | remove: ’ ’ | split: ‘,’
assign hover_image_enabled = settings.product–hover-image-enabled
assign label_color = settings.product–label-color
assign label_shape = settings.product–label-shape
assign new_label_period = settings.product–new-label-period
assign product_id = product.id | append: ‘-’ | append: section_id
assign rating_enabled = settings.product–show-rating
assign show_new_label = settings.product–show-new-label
assign show_quantity = settings.product–show-quantity
assign smart_payment_enabled = settings.product–smart-payment-button
assign swatches_enabled = settings.product–swatches-enabled
assign text_alignment = settings.product–text-alignment
assign quick_add_enable = settings.product–quick-add-enabled
assign variant_style = settings.product–variant-style
assign show_sale_label = settings.product–show-sale-label
if show_sale_label == ‘false’
assign show_sale_label = false
endif
if unique_handle == ‘search-ajax’
assign quick_add_enable = false
endif
unless show_vendor
assign show_vendor = settings.product–show-vendor
endunless
unless view
assign view = ‘grid’
endunless
if show_new_label
assign now_timestamp = ‘now’ | date: ‘%s’
assign new_label_period_in_seconds = new_label_period | times: 86400
assign valid_date = now_timestamp | minus: new_label_period_in_seconds | plus: 0
assign publish_date = product.published_at | date: ‘%s’ | plus: 0
assign is_new_product = false
if valid_date < publish_date
assign is_new_product = true
endif
endif
unless onboarding
assign onboarding = false
endunless
unless placeholder_index
assign min = 1
assign max = 6
assign diff = max | minus: min
assign placeholder_index = “now” | date: “%N” | modulo: diff | plus: min
endunless
if product.media.size > 1
capture hover_image
echo ‘
if onboarding
assign currencies_using_comma_decimals = ‘ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,TRY,UYU,VES,VND’ | split: ‘,’
if currencies_using_comma_decimals contains cart.currency.iso_code
assign compare_price_t = compare_price_t | replace: ‘.’, ‘,’
assign price_t = price_t | replace: ‘.’, ‘,’
endif
assign compare_price = cart.currency.symbol | append: compare_price_t
assign excerpt = ‘sections.onboarding.description’ | t
capture image
render “placeholder”, type: ‘product’, aspect_ratio: 0.714, placeholder_index: placeholder_index
endcapture
assign price = cart.currency.symbol | append: price_t
assign title = ‘sections.onboarding.product_title’ | t
assign url = product.url | within: collection
assign vendor = ‘sections.onboarding.vendor’ | t
else
capture image
if product.featured_media.preview_image
render ‘image’, image: product.featured_media.preview_image, full_width: true
else
render “placeholder”, type: ‘product’, aspect_ratio: 0.714, placeholder_index: placeholder_index
endif
endcapture
assign title = product.title
assign url = product.url | within: collection
assign vendor = product.vendor
assign price = product.price | money
if product.compare_at_price > product.price and product.available
assign compare_price = product.compare_at_price | money
else
assign compare_price = false
endif
assign excerpt = product.metafields.global.description_tag | newline_to_br
if excerpt == blank
assign excerpt = product.description | strip_html | truncate: 100 | newline_to_br
endif
endif
-%}
{%- capture display_labels -%}
{% elsif show_sale_label and compare_price and onboarding == false %}
{%- liquid
if show_sale_label == ‘show-text’
assign sale_text = sale_t
elsif show_sale_label == ‘show-percent’
assign price_diff = product.compare_at_price | minus: product.price
assign percent_diff = price_diff | times: 100 | divided_by: product.compare_at_price
assign sale_text = percent_diff | append: '% ’ | append: off_t
endif
-%}
{% elsif show_new_label and is_new_product and onboarding == false %}
{%- liquid
if featured_tags.size > 0 and product.available and onboarding == false
assign break_loop = false
for featured_tag in featured_tags
assign formatted_featured_tag = featured_tag | downcase
for product_tag in product.tags
assign formatted_product_tag = product_tag | remove: ’ ’ | downcase
if formatted_product_tag == formatted_featured_tag
echo ‘
assign break_loop = true
break
endif
endfor
if break_loop
break
endif
endfor
endif
-%}
{% capture display_prices %}
{%- if compare_price -%}
{{ compare_price }}
{%- endif -%}
{% if hover_image_enabled and hover_image %}
{{ hover_image }}
{% endif %}
{% if quick_add_enable and product.available %}
{{ title }}
{% if rating_enabled %}
{% if swatches_enabled %}
if option_name == color_t
render ‘radios’, id: unique_id, option: option, display_swatches_only: true
break
endif
endfor
-%}
{{ display_prices }}
{% comment %} can’t use a capture statement for swatches as we need a unique ID {% endcomment %}
{% if swatches_enabled %}
if option_name == color_t
render ‘radios’, id: unique_id, option: option, display_swatches_only: true
break
endif
endfor
-%}
{% if quick_add_enable and product.available %}
if show_quantity
render ‘product-quantity’, id: product_id
endif
render ‘product-options’, id: product_id, product: product, unique_handle: unique_handle, swatches_enabled: swatches_enabled, variant_style: variant_style
render ‘product-buy-buttons’, id: product_id, product: product, smart_payment_enabled: smart_payment_enabled
-%}
Hi @thirza ,
Please change code here:
Code:
render 'product-options', id: product_id, product: product, unique_handle: unique_handle, swatches_enabled: swatches_enabled, variant_style: variant_style
=>
if product.variants.size > 1 and product.options_by_name['Kleur'].values.size > 1
render 'product-options', id: product_id, product: product, unique_handle: unique_handle, swatches_enabled: swatches_enabled, variant_style: variant_style
endif
Hope it helps!
Hello,
Unfortunately it didnt help.
The problem is also more on the collection pages/home pages then on a specific productpage.
Should i maybe look for collection codes? see in added files the different product code options in snippets
Hi @thirza ,
Can you send me a collection link showing this? I will check it again for you
i have collection.liquids in my sections? See side bar.
i copied the section collection.body here:
{%- liquid
assign continue_shopping_t = ‘collections.continue_shopping’ | t
assign no_products_t = ‘collections.no_products_feedback’ | t
assign filter_feedback_t = ‘collections.filter_feedback’ | t
assign skip_link_t = ‘general.a11y.skip_pagination’ | t
assign products_per_row_desktop = section.settings.products-per-row–desktop
assign products_per_row_mobile = section.settings.products-per-row–mobile
assign promo_grid_duplicates = 0
comment
“only 50 products can be grabbed at a time, so best to not make
(number_of_rows * products_per_row_desktop) > 50”
endcomment
assign number_of_rows = section.settings.number-of-rows
comment
“Count number of promotion blocks so we can paginate accordingly”
endcomment
assign promo_grid_blocks = 0
for block in section.blocks
assign column_number = block.settings.column-number
assign description = block.settings.description
assign image = block.settings.image
assign image_size = block.settings.image-size
assign link_text = block.settings.link-text
assign link_url = block.settings.link-url
assign overline = block.settings.overline
assign promo_width = block.settings.promo-width
assign promo_grid_blocks = promo_grid_blocks | plus: promo_width
assign row = block.settings.row-number
assign title = block.settings.title
assign disable_placeholder = false
unless image
assign disable_placeholder = true
endunless
comment
“don’t allow overflow outside of main grid”
endcomment
if column_number > products_per_row_desktop
assign column_number = products_per_row_desktop
endif
assign alotted_width = products_per_row_desktop | plus: 1 | minus: column_number
if alotted_width == 0
assign alotted_width = 1
endif
if promo_width > alotted_width
assign promo_width = alotted_width
endif
if promo_width == products_per_row_desktop
assign banner_promo = true
assign text_width = ‘large’
else
assign banner_promo = false
assign text_width = ‘medium’
endif
if image_size == ‘aspect-ratio’ and image
assign cover_image = false
else
assign cover_image = true
endif
comment
“unless promo_grid_coords contains coords checks for multiple
promos trying to be placed in the same place on the grid”
endcomment
capture promo_grid_coords
unless promo_grid_coords == blank
echo promo_grid_coords | append: ‘|’
endunless
assign coords = row | append: ‘,’ | append: column_number
comment
“check for duplicate coordinates and don’t render them”
endcomment
unless promo_grid_coords contains coords
echo coords
else
assign promo_grid_duplicates = promo_grid_duplicates | plus: 1
continue
endunless
endcapture
capture promo_widths
unless promo_widths == blank
echo promo_widths | append: ‘|’
endunless
echo promo_width
endcapture
capture promo_html
unless promo_html == blank
echo promo_html | append: ‘|’
endunless
render ‘featured-content’, text_color: block.settings.text-color, banner_promo: banner_promo, bg_color: block.settings.background-color, box_around_text: false, container_width: ‘6’, cover_image: cover_image, cover_image_mobile: cover_image, darken_image: block.settings.darken-image, description: description, disable_placeholder: disable_placeholder, image: image, link_text: link_text, link_url: link_url, mobile_overlay: true, overlap: section.settings.overlap, overline: overline, promo_width: promo_width, spacing_above: false, spacing_below: false, text_position: ‘center’, text_width: text_width, title: title
endcapture
endfor
assign blocks_per_page = products_per_row_desktop | times: number_of_rows
assign products_per_page = blocks_per_page | minus: promo_grid_blocks | plus: promo_grid_duplicates
assign promo_grid_coords_arr = promo_grid_coords | split: ‘|’
assign promo_widths_arr = promo_widths | split: ‘|’
assign promo_html_arr = promo_html | split: ‘|’
-%}
{% paginate collection.products by products_per_page %}
{% if paginate.pages > 1 %}
{{ skip_link_t }}
{% endif %}
for product in collection.products
assign current_row = current_block_num | divided_by: products_per_row_desktop
assign current_column = current_block_num | modulo: products_per_row_desktop
comment
“last column condition”
endcomment
if current_column == 0
assign current_column = products_per_row_desktop
else
assign current_row = current_row | plus: 1
endif
assign current_coords = current_row | append: ‘,’ | append: current_column
if promo_grid_coords_arr contains current_coords
for promo_grid_coords in promo_grid_coords_arr
if promo_grid_coords == current_coords
assign promo_arr_index = forloop.index0
break
endif
endfor
echo promo_html_arr[promo_arr_index]
comment
“track what we’ve rendered for end of the grid condition”
endcomment
capture indexes_accessed
unless indexes_accessed == blank
echo indexes_accessed | append: ‘,’
endunless
echo promo_arr_index
endcapture
comment
“need to keep track of promos width, and how that will change where we are on the grid”
endcomment
assign current_promo_width = promo_widths_arr[promo_arr_index] | plus: 0
assign current_block_num = current_block_num | plus: current_promo_width
comment
“check if next block is a promo”
endcomment
assign next_row = current_block_num | divided_by: products_per_row_desktop
assign next_column = current_block_num | modulo: products_per_row_desktop
if next_column == 0
assign next_column = products_per_row_desktop
else
assign next_row = next_row | plus: 1
endif
assign next_coords = next_row | append: ‘,’ | append: next_column
comment
“if we need to render the product html later, due to consecutive promos”
endcomment
if promo_grid_coords_arr contains next_coords
capture pending_products_to_render
unless pending_products_to_render == blank
echo pending_products_to_render | append: ‘|’
endunless
render ‘product–item’, product: product, unique_handle: ‘filter’, section_id: section.id
endcapture
continue
endif
endif
comment
“render stored products if they’ve been previously skipped”
endcomment
unless pending_products_to_render == blank
assign pending_products_to_render_arr = pending_products_to_render | split: ‘|’
for pending_product in pending_products_to_render_arr
echo pending_product
assign current_block_num = current_block_num | plus: 1
endfor
assign pending_products_to_render = blank
endunless
render ‘product–item’, product: product, unique_handle: ‘filter’, section_id: section.id
assign current_block_num = current_block_num | plus: 1
assign indexes_accessed_arr = indexes_accessed | split: “,”
comment
“condition where promo is placed at the end of the grid”
endcomment
if products_per_page == forloop.index and promo_html_arr.size > indexes_accessed_arr.size
assign indexes = promo_html_arr.size | minus: 1
for i in (0..indexes)
if indexes_accessed_arr contains i
continue
elsif promo_grid_coords_arr[i] contains number_of_rows
echo promo_html_arr[i]
endif
endfor
endif
endfor
-%}
{% elsif current_tags == blank %}
{{ no_products_t }}
{% else %}
{{ filter_feedback_t }}
{% endif %}
{% schema %}
{
“name”: “Collection grid”,
“settings”: [
{
“label”: “Products per row (desktop)”,
“id”: “products-per-row–desktop”,
“type”: “range”,
“min”: 2,
“max”: 4,
“step”: 1,
“default”: 4
},
{
“label”: “Product per row (mobile)”,
“id”: “products-per-row–mobile”,
“type”: “radio”,
“options”: [
{ “value”: “1”, “label”: “1” },
{ “value”: “2”, “label”: “2” }
]
},
{
“label”: “Maximum amount of rows per page”,
“id”: “number-of-rows”,
“type”: “range”,
“min”: 1,
“max”: 12,
“step”: 1,
“default”: 4
}
],
“blocks”: [
{
“type”: “promotion”,
“name”: “Promotion”,
“settings”: [
{
“type”: “header”,
“content”: “Layout and Color”
},
{
“label”: “Row”,
“id”: “row-number”,
“type”: “range”,
“min”: 1,
“max”: 12,
“step”: 1,
“default”: 2
},
{
“label”: “Column”,
“id”: “column-number”,
“type”: “range”,
“min”: 1,
“max”: 4,
“step”: 1,
“default”: 1
},
{
“label”: “Width”,
“id”: “promo-width”,
“type”: “range”,
“min”: 1,
“max”: 4,
“step”: 1,
“default”: 2
},
{
“id”: “background-color”,
“label”: “Background color”,
“type”: “select”,
“options”: [
{ “label”: “None”, “value”: “none” },
{ “label”: “Light”, “value”: “light” },
{ “label”: “Dark”, “value”: “dark” },
{ “label”: “Accent”, “value”: “accent” }
],
“default”: “light”
},
{
“id”: “text-color”,
“label”: “Text color”,
“type”: “select”,
“options”: [
{ “label”: “Dark”, “value”: “dark” },
{ “label”: “Light”, “value”: “light” }
],
“default”: “dark”
},
{
“id”: “darken-image”,
“label”: “Darken image”,
“type”: “checkbox”,
“default”: true,
“info”: “Can enhance text visibility”
},
{
“type”: “header”,
“content”: “Content”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“id”: “image-size”,
“label”: “Image size”,
“type”: “select”,
“options”: [
{ “label”: “Fit to container”, “value”: “fit-to-container” },
{ “label”: “Preserve aspect ratio”, “value”: “aspect-ratio” }
],
“default”: “fit-to-container”
},
{
“id”: “overline”,
“label”: “Overline”,
“type”: “text”,
“default”: “Overline text”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Grid promotion”
},
{
“type”: “richtext”,
“id”: “description”,
“label”: “Text”,
“default”: “
Create eye-catching promos within collection grids to increase discoverability and accelerate conversions.
”Hi @thirza ,
Not a code, please send me the collection page link. I will check it.
Hi,
sorry, you can check this link: Bestsellers - lillyrose
We are working in code etc. in another shop template as to not disrupt our current running shop. There are no color swatches in collection online in this link. However, when you click on one product you can see the option.
hi,
still doesn’t work unfortunately…
Hi @thirza ,
Please go to product–item.liquid file and add code here:
Code:
{% if product.variants.size > 1 and product.options_by_name['Kleur'].values.size > 1 %}
{% endif %}
Hope it helps!
Dear,
We just updated our theme and the code doesn’t work anymore. Would it be possible to help us again with the new code?