How to display: none; Spotlight theme variant picker.

How to display: none; Spotlight theme variant picker.

BlackT
Visitor
3 0 0

I have a variant that is required for third-party app (printify) but it is not needed to be displayed for my store as it's the only single variant available. How do I update the Spotlight theme to hide a variant with only 1 option? I have seen answers for the Dawn theme but this doesn't correlate fully with the Spotlight theme.

 

Thanks in advance 

BlackT_0-1721657800225.png

 

Replies 7 (7)

parth_ghelani
Shopify Partner
259 38 38

Hello @BlackT 

Can you please share the store URL and password so i can check and find the solution for your issue...

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
BlackT
Visitor
3 0 0
parth_ghelani
Shopify Partner
259 38 38

all you want is to hide variant selector if there is only single variant or default variant, am i right ?

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
parth_ghelani
Shopify Partner
259 38 38

Can you just DM me so we can discuss more about it ?

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
parth_ghelani
Shopify Partner
259 38 38

Hey bro, i got the solution for your issue...

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
BlackT
Visitor
3 0 0

Great. Is it complicated? I can't see a DM option.

parth_ghelani
Shopify Partner
259 38 38

a little bit complicated.
But you only need to follow below steps:

1. Go to admin > Online Store > Edit code.

2. In the code directory, find the file named "product-variant-picker.liquid" in snippets.

3. Copy the below code and replace it with the current code.

{% 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 -%}
      {%- 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' -%}
        <fieldset class="js product-form__input product-form__input--swatch">
          <legend class="form__label">
            {{ option.name }}:
            <span data-selected-value>
              {{- option.selected_value -}}
            </span>
          </legend>
          {% render 'product-variant-options',
            product: product,
            option: option,
            block: block,
            picker_type: picker_type
          %}
        </fieldset>
      {%- elsif picker_type == 'button' -%}
        <fieldset class="js product-form__input product-form__input--pill">
          <legend class="form__label">{{ option.name }}</legend>
          {% render 'product-variant-options',
            product: product,
            option: option,
            block: block,
            picker_type: picker_type
          %}
        </fieldset>
      {%- else -%}
        {%- for value in option.values -%}
          {% assign variant_size = option.values  %}
        {%  endfor %}
        <div class="product-form__input product-form__input--dropdown {% if variant_size.size <= 1 %}{% endif %}">
          <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <div class="select">
            {%- if picker_type == 'swatch_dropdown' -%}
              <span
                data-selected-value
                class="dropdown-swatch"
              >
                {% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %}
              </span>
            {%- endif -%}
            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {% render 'product-variant-options',
                product: product,
                option: option,
                block: block,
                picker_type: picker_type
              %}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
      {%- endif -%}
    {%- endfor -%}

    <script type="application/json" data-selected-variant>{{ product.selected_or_first_available_variant | json }}</script>
  </variant-selects>
{%- endunless -%}

4. Don't forget to save the file after changes.

Hope this solution works best for your issue.

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Best Regards

Parth ghelani

 

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns