Hide product variant title selector when only one option - Impulse theme

Retired Boards Appdev Merchandising
1

Hi,

I have a number of products that only have 1 Colour option - for this condition, is it possible to hide the option title and selector without upsetting the Shopify Google Shopping feed or Google’s ability to read the colour directly from the site?

Chrayley_0-1729249801353.png
Chrayley_0-1729249801353.png854×450 103 KB

2

I am not sure about the Google stuff but you can add a check with if condition in your theme code to hide the title and option where a product has only 1 option

3

Hi Shadab_dev and thanks for replying.

Yes, I guessed it would be a logical test in the code but whilst I may understand the solution if I saw it, I struggle to implement such a change in what looks like a fairly complex area of code - can you give me a pointer as to how to approach this in the Impulse theme?

4

there’s two things either you can give me collaborator access to the store and i will do it for you and also explain you what i did. or you can send me the code main-product.liquid file or product-variant-picker.liquid or variant-picker.liquid file . the other option could a bit tricky. the thing is impulse is a paid theme and i am on a development store which does not allow me to add edit code for paid themes. also the code bases are a little different for paid and free themes.

5

here’s a quick one, if this helps you. please always take a backup before making changes in case anything goes wrong you can revert back.

If you have a product-variant-picker.liquid file replace the code with this

{% comment %}
Renders product variant-picker

Accepts:

  • product: {Object} product object.
  • block: {Object} passing the block information.
  • product_form_id: {String} Id of the product form to which the variant picker is associated.
    Usage:
    {% render ‘product-variant-picker’, product: product, block: block, product_form_id: product_form_id %}
    {% endcomment %}
    {%- unless product.has_only_default_variant -%}
    <variant-selects
    id=“variant-selects-{{ section.id }}”
    data-section=“{{ section.id }}”
    {{ block.shopify_attributes }}

{%- for option in product.options_with_values -%}
{% if option.values > 1 %}
{%- liquid
assign swatch_count = option.values | map: ‘swatch’ | compact | size
assign picker_type = block.settings.picker_type

if swatch_count > 0 and block.settings.swatch_shape != ‘none’
if block.settings.picker_type == ‘dropdown’
assign picker_type = ‘swatch_dropdown’
else
assign picker_type = ‘swatch’
endif
endif
-%}
{%- if picker_type == ‘swatch’ -%}

{{ option.name }}: {{- option.selected_value -}} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- elsif picker_type == 'button' -%} {{ option.name }} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- else -%}
{{ option.name }}
{%- if picker_type == 'swatch_dropdown' -%} {% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %} {%- endif -%} {{- 'icon-caret.svg' | inline_asset_content -}}
{%- endif -%} {% endif %} {%- endfor -%} {%- endunless -%}

and in product-variant-options.liquid file with this

{% comment %}
Renders product variant options

Accepts:

  • product: {Object} product object.
  • option: {Object} current product_option object.
  • block: {Object} block object.
  • picker_type: {String} type of picker to dispay

Usage:
{% render ‘product-variant-options’,
product: product,
option: option,
block: block
picker_type: picker_type
%}
{% endcomment %}
{%- liquid
assign product_form_id = ‘product-form-’ | append: section.id
-%}
{% if option.values > 1 %}
{%- for value in option.values -%}
{%- liquid
assign swatch_focal_point = null
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = ‘url(’ | append: image_url | append: ‘)’
assign swatch_focal_point = value.swatch.image.presentation.focal_point
elsif value.swatch.color
assign swatch_value = ‘rgb(’ | append: value.swatch.color.rgb | append: ‘)’
else
assign swatch_value = null
endif

assign option_disabled = true
if value.available
assign option_disabled = false
endif
-%}

{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}

{%- capture input_name -%}
{{ option.name }}-{{ option.position }}
{%- endcapture -%}

{%- capture input_dataset -%}
data-product-url=“{{ value.product_url }}”
data-option-value-id=“{{ value.id }}”
{%- endcapture -%}

{%- capture label_unavailable -%}

{{- ‘products.product.variant_sold_out_or_unavailable’ | t -}}

{%- endcapture -%}

{%- if picker_type == ‘swatch’ -%}
{%- capture help_text -%}
{{ value | escape }}
{{ label_unavailable }}
{%- endcapture -%}
{%
render ‘swatch-input’,
id: input_id,
name: input_name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: value.selected,
visually_disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: help_text,
additional_props: input_dataset
%}
{%- elsif picker_type == ‘button’ -%}
<input
type=“radio”
id=“{{ input_id }}”
name=“{{ input_name | escape }}”
value=“{{ value | escape }}”
form=“{{ product_form_id }}”
{% if value.selected %}
checked
{% endif %}
{% if option_disabled %}
class=“disabled”
{% endif %}
{{ input_dataset }}

{{ value -}} {{ label_unavailable }} {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%} {% if option_disabled -%} {{- 'products.product.value_unavailable' | t: option_value: value -}} {%- else -%} {{- value -}} {%- endif %} {%- endif -%} {%- endfor -%} {% endif %}

hoping the code base is somewhat same

6

Thanks but unfortunately it looks like the Impulse theme (latest version) has a different template file structure.

7

Then i will need collab access to your store if that’s ok with you.