Impulse Change Chevron Arrow to Plus + sign

[Luxurymrkt]

Hi,

im looking to change the arrows on my collapsible trigger buttons to + and - signs like my footer menu.
my site is https://luxurymrkt.com/collections/newest-products/products/golden-goose-track-jacket-with-star-band

[Ahsan_ANC]

Please share the code of product template file

[Luxurymrkt]

{%- liquid
assign current_variant = product.selected_or_first_available_variant

unless thumbnail_position
assign thumbnail_position = ‘beside’
endunless

assign product_zoom_size = ‘1800x1800’
assign product_image_size = ‘620x’

case image_container_width
when ‘small’
assign product_image_width = ‘medium-up–two-fifths’
assign product_description_width = ‘medium-up–three-fifths’
assign product_image_size = ‘480x’
when ‘medium’
assign product_image_width = ‘medium-up–one-half’
assign product_description_width = ‘medium-up–one-half’
assign product_image_size = ‘620x’
when ‘large’
assign product_image_width = ‘medium-up–three-fifths’
assign product_description_width = ‘medium-up–two-fifths’
assign product_image_size = ‘740x’
endcase

assign product_img_structure = product.featured_media | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’
-%}

{%- liquid
assign connect_to_sizechart = false

for block in section.blocks
if block.type == ‘size_chart’
assign sizechart_index = forloop.index0
assign next_block_index = sizechart_index | plus: 1

if section.blocks[next_block_index].type == ‘variant_picker’ and product.has_only_default_variant == false
for option in product.options_with_values
assign size_trigger = ‘products.general.size_trigger’ | t | downcase
assign downcased_option = option.name | downcase

if downcased_option contains size_trigger
assign connect_to_sizechart = true
endif
endfor
endif

endif
endfor
-%}

{%- render ‘product-template-variables’, product: product, current_variant: current_variant -%}

{%- if image_position == 'left' -%}

{%- render 'product-images', section_id: section_id, product: product, isModal: isModal, image_position: image_position, product_zoom_enable: product_zoom_enable, product_zoom_size: product_zoom_size, product_image_size: product_image_size, thumbnail_arrows: thumbnail_arrows, thumbnail_position: thumbnail_position, video_looping: video_looping, video_style: video_style -%}

{%- endif -%}

{%- if settings.show_breadcrumbs and isModal != true -%} {%- render 'breadcrumbs' -%} {%- endif -%}

{%- if settings.vendor_enable -%}

{%- assign vendor_handle = product.vendor | handleize -%} {%- if collections[vendor_handle] != empty -%} {{ collections[vendor_handle].title }} {%- else -%} {{ product.vendor | link_to_vendor }} {%- endif -%}

{%- endif -%}

{%- if isModal -%}

{{ product.title }}

{%- else -%}

{%- unless product.empty? -%} {{ product.title }} {%- else -%} {{ 'home_page.onboarding.product_title' | t }} {%- endunless -%}

{%- endif -%}

{%- if sku_enable -%}

{%- if current_variant.sku -%} {{ current_variant.sku }} {%- endif -%}

{%- endif -%}

{%- capture form_id -%}AddToCartForm-{{ section_id }}-{{ product.id }}{%- endcapture -%} {%- for block in blocks -%} {%- case block.type -%} {%- when '@app' -%} {% render block %} {%- when 'separator' -%}

---

{%- when 'text' -%}

{{ block.settings.text }}

{%- when 'tab' -%}

{% assign tab_id = block.id | append: product.id %} {% capture tab_content %} {{ block.settings.content }} {{ block.settings.page.content }} {% endcapture %} {%- render 'tab', id: tab_id, title: block.settings.title, content: tab_content -%}

{%- when 'contact' -%}

{% assign tab_id = block.id | append: product.id %} {%- render 'tab-contact', id: tab_id, block: block -%}

{%- when 'description' -%}

{%- assign id = block.id | append: product.id -%} {%- render 'product-description', id: id, product: product, is_tab: block.settings.is_tab -%}

{%- when 'price' -%}

{%- assign hide_sale_price = true -%} {%- if product.compare_at_price_max > product.price -%} {%- if current_variant.compare_at_price > current_variant.price -%} {%- assign hide_sale_price = false -%} {%- endif -%} {{ 'products.general.regular_price' | t }} {%- if current_variant.compare_at_price > current_variant.price -%} {{ current_variant.compare_at_price | money }} {%- endif -%} {{ 'products.general.sale_price' | t }} {%- else -%} {{ 'products.general.regular_price' | t }} {%- endif -%}

{%- unless product.empty? -%}
{{ current_variant.price | money }}
{%- else -%}
{{ 1999 | money }}
{%- endunless -%}

{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == ‘dollar’ -%}
{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}

{%- unless hide_sale_price -%}
{{ ‘products.general.save_html’ | t: saved_amount: saved_amount }}
{%- endunless -%}

{%- endif -%}

{%- capture unit_price_base_unit -%} {%- if current_variant.unit_price_measurement -%} {%- if current_variant.unit_price_measurement.reference_value != 1 -%} {{ current_variant.unit_price_measurement.reference_value }} {%- endif -%} {{ current_variant.unit_price_measurement.reference_unit }} {%- endif -%} {%- endcapture -%}

{{ current_variant.unit_price | money }}/{{ unit_price_base_unit }}

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

{%- if shop.taxes_included -%} {{ 'products.product.include_taxes' | t }} {%- endif -%} {%- if shop.shipping_policy.body != blank -%} {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%}

{%- endif -%}

{%- when 'quantity_selector' -%}

{% assign qty_id = section_id | append: product.id %} {{ 'products.product.quantity' | t }} {%- render 'quantity-input', form_id: form_id, id: qty_id, qty: 1, min: 1 -%}

{%- when 'size_chart' -%} {% if connect_to_sizechart == false %} {%- capture size_chart_title -%} {{ 'products.general.size_chart' | t }} {%- endcapture -%}

{%- render 'tool-tip-trigger', title: size_chart_title, content: block.settings.size_chart.content, context: 'size-chart' -%} {% style %} tool-tip-trigger { text-transform: uppercase; } {% endstyle %}

{% endif %} {%- when 'variant_picker' -%}

{%- unless product.has_only_default_variant -%} {%- for option in product.options_with_values -%} {%- liquid if block.settings.color_swatches assign is_color = false assign color_option_index = 0 assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase assign color_option_index = forloop.index0 assign downcased_option = option.name | downcase if downcased_option contains swatch_trigger assign is_color = true elsif swatch_trigger == 'color' and downcased_option contains 'colour' assign is_color = true endif endif -%}

{%- if block.settings.picker_type == ‘button’ -%}
{%- render ‘variant-button’,
block: block,
product: product,
form_id: form_id,
section_id: section_id,
option: option,
forloop: forloop,
variant_labels: block.settings.variant_labels,
is_color: is_color,
color_option_index: color_option_index,
connect_to_sizechart: connect_to_sizechart,
sizechart_index: sizechart_index
-%}
{%- else -%}
{%- render ‘variant-dropdown’,
product: product,
form_id: form_id,
section_id: section_id,
option: option,
forloop: forloop,
variant_labels: block.settings.variant_labels
-%}
{%- endif -%}
{%- endfor -%}
{%- endunless -%}

{%- when 'buy_buttons' -%}

{%- unless product.empty? -%}

{%- render 'product-form', form_id: form_id, product: product, show_dynamic_checkout: block.settings.show_dynamic_checkout, current_variant: current_variant -%}

{%- endunless -%}

{%- if block.settings.surface_pickup_enable -%}

{%- endif -%}

{%- when 'sales_point' -%} {%- unless block.settings.text == blank -%}

• {% case block.settings.icon %} {% when 'checkmark' %} {% when 'gift' %} {% when 'globe' %} {% when 'heart' %} {% when 'leaf' %} {% when 'lock' %} {% when 'package' %} {% when 'phone' %} {% when 'ribbon' %} {% when 'shield' %} {% when 'tag' %} {% when 'truck' %} {% endcase %} {{ block.settings.text }}

{%- endunless -%} {%- when 'inventory_status' -%} {%- render 'product-inventory', product: product, current_variant: current_variant, block: block -%} {%- when 'share' -%}

{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}

{%- when 'trust_badge' -%}

{%- assign img_url = block.settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- when 'custom' -%}

{{ block.settings.code }}

{%- endcase -%} {%- else -%}

{%- endfor -%}

{%- unless image_position == ‘left’ -%}

{%- render 'product-images', section_id: section_id, product: product, isModal: isModal, image_position: image_position, product_zoom_enable: product_zoom_enable, product_zoom_size: product_zoom_size, product_image_size: product_image_size, thumbnail_arrows: thumbnail_arrows, thumbnail_position: thumbnail_position, video_looping: video_looping, video_style: video_style -%}

{%- endunless -%}

[Luxurymrkt]

{%- liquid
assign current_variant = product.selected_or_first_available_variant

unless thumbnail_position
assign thumbnail_position = ‘beside’
endunless

assign product_zoom_size = ‘1800x1800’
assign product_image_size = ‘620x’

case image_container_width
when ‘small’
assign product_image_width = ‘medium-up–two-fifths’
assign product_description_width = ‘medium-up–three-fifths’
assign product_image_size = ‘480x’
when ‘medium’
assign product_image_width = ‘medium-up–one-half’
assign product_description_width = ‘medium-up–one-half’
assign product_image_size = ‘620x’
when ‘large’
assign product_image_width = ‘medium-up–three-fifths’
assign product_description_width = ‘medium-up–two-fifths’
assign product_image_size = ‘740x’
endcase

assign product_img_structure = product.featured_media | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’
-%}

{%- liquid
assign connect_to_sizechart = false

for block in section.blocks
if block.type == ‘size_chart’
assign sizechart_index = forloop.index0
assign next_block_index = sizechart_index | plus: 1

if section.blocks[next_block_index].type == ‘variant_picker’ and product.has_only_default_variant == false
for option in product.options_with_values
assign size_trigger = ‘products.general.size_trigger’ | t | downcase
assign downcased_option = option.name | downcase

if downcased_option contains size_trigger
assign connect_to_sizechart = true
endif
endfor
endif

endif
endfor
-%}

{%- render ‘product-template-variables’, product: product, current_variant: current_variant -%}

{%- if image_position == 'left' -%}

{%- render 'product-images', section_id: section_id, product: product, isModal: isModal, image_position: image_position, product_zoom_enable: product_zoom_enable, product_zoom_size: product_zoom_size, product_image_size: product_image_size, thumbnail_arrows: thumbnail_arrows, thumbnail_position: thumbnail_position, video_looping: video_looping, video_style: video_style -%}

{%- endif -%}

{%- if settings.show_breadcrumbs and isModal != true -%} {%- render 'breadcrumbs' -%} {%- endif -%}

{%- if settings.vendor_enable -%}

{%- assign vendor_handle = product.vendor | handleize -%} {%- if collections[vendor_handle] != empty -%} {{ collections[vendor_handle].title }} {%- else -%} {{ product.vendor | link_to_vendor }} {%- endif -%}

{%- endif -%}

{%- if isModal -%}

{{ product.title }}

{%- else -%}

{%- unless product.empty? -%} {{ product.title }} {%- else -%} {{ 'home_page.onboarding.product_title' | t }} {%- endunless -%}

{%- endif -%}

{%- if sku_enable -%}

{%- if current_variant.sku -%} {{ current_variant.sku }} {%- endif -%}

{%- endif -%}

{%- capture form_id -%}AddToCartForm-{{ section_id }}-{{ product.id }}{%- endcapture -%} {%- for block in blocks -%} {%- case block.type -%} {%- when '@app' -%} {% render block %} {%- when 'separator' -%}

---

{%- when 'text' -%}

{{ block.settings.text }}

{%- when 'tab' -%}

{% assign tab_id = block.id | append: product.id %} {% capture tab_content %} {{ block.settings.content }} {{ block.settings.page.content }} {% endcapture %} {%- render 'tab', id: tab_id, title: block.settings.title, content: tab_content -%}

{%- when 'contact' -%}

{% assign tab_id = block.id | append: product.id %} {%- render 'tab-contact', id: tab_id, block: block -%}

{%- when 'description' -%}

{%- assign id = block.id | append: product.id -%} {%- render 'product-description', id: id, product: product, is_tab: block.settings.is_tab -%}

{%- when 'price' -%}

{%- assign hide_sale_price = true -%} {%- if product.compare_at_price_max > product.price -%} {%- if current_variant.compare_at_price > current_variant.price -%} {%- assign hide_sale_price = false -%} {%- endif -%} {{ 'products.general.regular_price' | t }} {%- if current_variant.compare_at_price > current_variant.price -%} {{ current_variant.compare_at_price | money }} {%- endif -%} {{ 'products.general.sale_price' | t }} {%- else -%} {{ 'products.general.regular_price' | t }} {%- endif -%}

{%- unless product.empty? -%}
{{ current_variant.price | money }}
{%- else -%}
{{ 1999 | money }}
{%- endunless -%}

{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == ‘dollar’ -%}
{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}

{%- unless hide_sale_price -%}
{{ ‘products.general.save_html’ | t: saved_amount: saved_amount }}
{%- endunless -%}

{%- endif -%}

{%- capture unit_price_base_unit -%} {%- if current_variant.unit_price_measurement -%} {%- if current_variant.unit_price_measurement.reference_value != 1 -%} {{ current_variant.unit_price_measurement.reference_value }} {%- endif -%} {{ current_variant.unit_price_measurement.reference_unit }} {%- endif -%} {%- endcapture -%}

{{ current_variant.unit_price | money }}/{{ unit_price_base_unit }}

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

{%- if shop.taxes_included -%} {{ 'products.product.include_taxes' | t }} {%- endif -%} {%- if shop.shipping_policy.body != blank -%} {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%}

{%- endif -%}

{%- when 'quantity_selector' -%}

{% assign qty_id = section_id | append: product.id %} {{ 'products.product.quantity' | t }} {%- render 'quantity-input', form_id: form_id, id: qty_id, qty: 1, min: 1 -%}

{%- when 'size_chart' -%} {% if connect_to_sizechart == false %} {%- capture size_chart_title -%} {{ 'products.general.size_chart' | t }} {%- endcapture -%}

{%- render 'tool-tip-trigger', title: size_chart_title, content: block.settings.size_chart.content, context: 'size-chart' -%} {% style %} tool-tip-trigger { text-transform: uppercase; } {% endstyle %}

{% endif %} {%- when 'variant_picker' -%}

{%- unless product.has_only_default_variant -%} {%- for option in product.options_with_values -%} {%- liquid if block.settings.color_swatches assign is_color = false assign color_option_index = 0 assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase assign color_option_index = forloop.index0 assign downcased_option = option.name | downcase if downcased_option contains swatch_trigger assign is_color = true elsif swatch_trigger == 'color' and downcased_option contains 'colour' assign is_color = true endif endif -%}

{%- if block.settings.picker_type == ‘button’ -%}
{%- render ‘variant-button’,
block: block,
product: product,
form_id: form_id,
section_id: section_id,
option: option,
forloop: forloop,
variant_labels: block.settings.variant_labels,
is_color: is_color,
color_option_index: color_option_index,
connect_to_sizechart: connect_to_sizechart,
sizechart_index: sizechart_index
-%}
{%- else -%}
{%- render ‘variant-dropdown’,
product: product,
form_id: form_id,
section_id: section_id,
option: option,
forloop: forloop,
variant_labels: block.settings.variant_labels
-%}
{%- endif -%}
{%- endfor -%}
{%- endunless -%}

{%- when 'buy_buttons' -%}

{%- unless product.empty? -%}

{%- render 'product-form', form_id: form_id, product: product, show_dynamic_checkout: block.settings.show_dynamic_checkout, current_variant: current_variant -%}

{%- endunless -%}

{%- if block.settings.surface_pickup_enable -%}

{%- endif -%}

{%- when 'sales_point' -%} {%- unless block.settings.text == blank -%}

• {% case block.settings.icon %} {% when 'checkmark' %} {% when 'gift' %} {% when 'globe' %} {% when 'heart' %} {% when 'leaf' %} {% when 'lock' %} {% when 'package' %} {% when 'phone' %} {% when 'ribbon' %} {% when 'shield' %} {% when 'tag' %} {% when 'truck' %} {% endcase %} {{ block.settings.text }}

{%- endunless -%} {%- when 'inventory_status' -%} {%- render 'product-inventory', product: product, current_variant: current_variant, block: block -%} {%- when 'share' -%}

{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}

{%- when 'trust_badge' -%}

{%- assign img_url = block.settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- when 'custom' -%}

{{ block.settings.code }}

{%- endcase -%} {%- else -%}

{%- endfor -%}

{%- unless image_position == ‘left’ -%}

{%- render 'product-images', section_id: section_id, product: product, isModal: isModal, image_position: image_position, product_zoom_enable: product_zoom_enable, product_zoom_size: product_zoom_size, product_image_size: product_image_size, thumbnail_arrows: thumbnail_arrows, thumbnail_position: thumbnail_position, video_looping: video_looping, video_style: video_style -%}

{%- endunless -%}

[Luxurymrkt]

Is that the correct template?

[Luxurymrkt]

Any update on this? Thank you @Ahsan_ANC

[Ahsan_ANC]

Sorry for the late reply please share the tab.liquid file from the snippets folder.

[Luxurymrkt]

{%- liquid
assign output_tab = true
if title == blank and content == blank
assign output_tab = false
endif
-%}
{%- if output_tab -%}

{{ title }} {%- render 'collapsible-icons' -%}

{{ content }}

{%- endif -%}

[Ahsan_ANC]

one more request Share this file

[Luxurymrkt]

[Luxurymrkt]

And this is collapsible icons alt file

[Ahsan_ANC]

please use the below code in collapsible icon files

[Ahsan_ANC]

Hi @Luxurymrkt please try this code.

{%- style -%}
  .icon-minus{
  padding-top: 10px;
  }
  .icon-minus {
    display: none;
}
  .is-open .icon-plus {
    display: none;
}
.is-open .icon-minus {
    display: block;
}
    {%- endstyle -%}

[Luxurymrkt]

worked perfect!!!

is there a way to do this to my mobile menu also? but im using an app qikify mobile

’

{% render ‘qikify-tmenu-data’ %}

/*Miley - ticket 30441 - 23Sep2022*/ .tmenu_wrapper .tmenu_app { z-index: 28; } li.tmenu_item--root>.tmenu_submenu { box-shadow: none !important; } .tmenu_submenu_tab_position_top .tmenu_submenu_tab_control > li { border-right: none !important; } .tmenu_item--root .tmenu_submenu { padding: 10px 30px !important; } .tmenu_item--root .tmenu_submenu.tmenu_submenu_type_mega { padding: 10px 40px !important; } .tmenu_nav .tmenu_item .tmenu_submenu_tab_control > li.tmenu_submenu_tab_active { background: transparent !important; } .tmenu_nav .tmenu_item .tmenu_submenu_tab_control > li.tmenu_submenu_tab_active > a { font-weight: bold; } .tmenu_item_mobile > a.tmenu_item_link { font-size: 11px; } .tmenu_item_mobile.tmenu_item_level_0 > a.tmenu_item_link { font-size: 11px; } .tmenu_item_mobile.tmenu_item_active> a.tmenu_item_link, .tmenu_item_mobile .tmenu_item_active> a.tmenu_item_link { background: transparent !important; } .tmenu_item_mobile span.tmenu_indicator { margin-right: 12px; }