Mobile Add-to-Cart Issue: Second Option Automatically Switches Back to First One

Store Design
,

Topic summary

Mobile product variant selection on a sticky Add to Cart bar is reverting from the second option back to the first, causing confusion and potentially wrong variants added to cart. The issue stems from the sticky bar’s variant selector not being synced with the main product form.

Key points:

  • Sticky Add to Cart (persistent mobile bar) and main variant selector (option picker) appear disconnected; selected variant isn’t reflected in the sticky bar.
  • This desync can force a jump back to the first variant and add the wrong item to cart.

Suggested fixes:

  • Ensure both selectors reference the same product form/IDs and update together.
  • Add a JavaScript listener to synchronize changes between the main section and the sticky bar.
  • Review theme settings and temporarily disable apps to identify conflicts.

Alternatives and impact:

  • If troubleshooting is slow, temporarily remove the sticky bar to avoid confusion; once fixed, it can improve conversions.

Status:

  • No resolution confirmed yet. Clarifications were made, solutions proposed, and help offered contingent on sharing theme code. An image was shared to illustrate expected sticky-bar behavior.
Summarized with AI on December 10. AI used: gpt-5.
1

Hi everyone,
I’m having an issue with the Add to Cart button on the mobile version of my store, and I’d like to know if anyone has experienced something similar.

I’m using a sticky Add to Cart bar, and when customers select the second product option (variant) on mobile, it automatically switches back to the first option. This makes the user experience confusing and could be hurting conversions.

Has anyone dealt with this problem before?
Do you think it’s better to remove the sticky Add to Cart bar, or is there a way to fix this behavior so the selected option stays correctly?

Any suggestions or insights would be greatly appreciated!
Thanks!

3 Likes
2

Hi @PeppePro02

You want the selected item to also appear in the sticky add-to-cart, right?

image
image305×553 37.5 KB

Best regards,
Devcoder :laptop:

1 Like
3

Yes exactly as are not connected , not easy to costumer to make an order

1 Like
4

Hey @PeppePro02 ,
Yes, this is a common issue on themes that use a sticky Add to Cart bar on mobile. Usually, the problem happens because:

  1. The main product variant selector
    and
  2. The sticky bar variant selector

are not synced with each other.

When they are disconnected, selecting a second option forces the selector to jump back to the first variant. This also causes the wrong variant to be added to the cart.

You don’t necessarily need to remove the sticky bar - this can be fixed by:

  1. Making sure both variant selectors point to the same product form
  2. Adding a small JavaScript listener to keep both selectors in sync
  3. Ensuring the sticky bar updates whenever a variant is changed in the main section

If you need help implementing the fix, feel free to share your theme code setup or the part handling the sticky bar variant selector — I can guide you through the correct solution.

Hope this helps!
Best,
Rajat

1 Like
5

Hi,

Hope this will help

Sticky bar is probably using a separate variant selector that isn’t synced with the main product form.

Check form or ID matching, theme settings and disable apps temporarily to find the conflict. If fixing takes too long, remove the sticky bar for now to avoid user confusion, but once fixed it’s a good conversion booster.

1 Like
6

Hi @PeppePro02

It isn’t syncing with the selected variant, so the price isn’t updating. The theme code will need to be checked.

Best regards,
Devcoder :laptop:

1 Like
7

Hi, @PeppePro02
You don’t need to remove the sticky bar.
Just sync variant selection between the main form and the sticky bar.
You can share the code for the sticky bar snippet and I will give you the exact patch.

1 Like
8

Yes perfect thank you i will give you access

1 Like
9 

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1">

<meta name="theme-color" content="">

<link rel="canonical" href="{{ canonical_url }}">



{%- if settings.favicon != blank -%}

  <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">

{%- endif -%}



{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}

  <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>

{%- endunless -%}



<title>

  {{ page_title }}

  {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}

  {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}

  {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}

</title>



{% if page_description %}

  <meta name="description" content="{{ page_description | escape }}">

{% endif %}



{% render 'meta-tags' %}



<script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>

<script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>

<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>

<script src="{{ 'details-disclosure.js' | asset_url }}" defer="defer"></script>

<script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script>

<script src="{{ 'search-form.js' | asset_url }}" defer="defer"></script>



{%- if settings.animations_reveal_on_scroll -%}

  <script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>

{%- endif -%}



{{ content_for_header }}



{%- liquid

  assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'

  assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'

  assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'

%}



{% style %}

  {{ settings.type_body_font | font_face: font_display: 'swap' }}

  {{ body_font_bold | font_face: font_display: 'swap' }}

  {{ body_font_italic | font_face: font_display: 'swap' }}

  {{ body_font_bold_italic | font_face: font_display: 'swap' }}

  {{ settings.type_header_font | font_face: font_display: 'swap' }}



  {% for scheme in settings.color_schemes -%}

    {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}

    {% if forloop.index == 1 -%}

      :root,

    {%- endif %}

    .color-{{ scheme.id }} {

      --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};

    {% if scheme.settings.background_gradient != empty %}

      --gradient-background: {{ scheme.settings.background_gradient }};

    {% else %}

      --gradient-background: {{ scheme.settings.background }};

    {% endif %}



    {% liquid

      assign background_color = scheme.settings.background

      assign background_color_brightness = background_color | color_brightness

      if background_color_brightness <= 26

        assign background_color_contrast = background_color | color_lighten: 50

      elsif background_color_brightness <= 65

        assign background_color_contrast = background_color | color_lighten: 5

      else

        assign background_color_contrast = background_color | color_darken: 25

      endif

    %}



    --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};

    --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};

    --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};

    --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};

    --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};

    --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};

    --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};

    --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};

    --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};

    --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};

    --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};

    --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});

  }

  {% endfor %}



  {{ scheme_classes | prepend: 'body' }} {

    color: rgba(var(--color-foreground), 0.75);

    background-color: rgb(var(--color-background));

  }



  :root {

    --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};

    --font-body-style: {{ settings.type_body_font.style }};

    --font-body-weight: {{ settings.type_body_font.weight }};

    --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};



    --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};

    --font-heading-style: {{ settings.type_header_font.style }};

    --font-heading-weight: {{ settings.type_header_font.weight }};



    --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};

    --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};



    --media-padding: {{ settings.media_padding }}px;

    --media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};

    --media-border-width: {{ settings.media_border_thickness }}px;

    --media-radius: {{ settings.media_radius }}px;

    --media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};

    --media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;

    --media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;

    --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;

    --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};



    --page-width: {{ settings.page_width | divided_by: 10 }}rem;

    --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;



    --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;

    --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;

    --product-card-text-alignment: {{ settings.card_text_alignment }};

    --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;

    --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};

    --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};

    --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};

    --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;

    --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;

    --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;



    --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;

    --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;

    --collection-card-text-alignment: {{ settings.collection_card_text_alignment }};

    --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;

    --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};

    --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};

    --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};

    --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;

    --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;

    --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;



    --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;

    --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;

    --blog-card-text-alignment: {{ settings.blog_card_text_alignment }};

    --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;

    --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};

    --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};

    --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};

    --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;

    --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;

    --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;



    --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;



    --popup-border-width: {{ settings.popup_border_thickness }}px;

    --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};

    --popup-corner-radius: {{ settings.popup_corner_radius }}px;

    --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};

    --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;

    --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;

    --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;



    --drawer-border-width: {{ settings.drawer_border_thickness }}px;

    --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};

    --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};

    --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;

    --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;

    --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;



    --spacing-sections-desktop: {{ settings.spacing_sections }}px;

    --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;



    --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;

    --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;

    --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;

    --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;



    --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};

    --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;

    --text-boxes-radius: {{ settings.text_boxes_radius }}px;

    --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};

    --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};

    --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;

    --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;

    --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;



    --buttons-radius: {{ settings.buttons_radius }}px;

    --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;

    --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;

    --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};

    --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};

    --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};

    --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;

    --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;

    --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;

    --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;



    --inputs-radius: {{ settings.inputs_radius }}px;

    --inputs-border-width: {{ settings.inputs_border_thickness }}px;

    --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};

    --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};

    --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;

    --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;

    --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;

    --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;

    --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;



    --variant-pills-radius: {{ settings.variant_pills_radius }}px;

    --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;

    --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};

    --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};

    --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;

    --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;

    --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;

  }



  \*,

  \*::before,

  \*::after {

    box-sizing: inherit;

  }



  html {

    box-sizing: border-box;

    font-size: calc(var(--font-body-scale) \* 62.5%);

    height: 100%;

  }



  body {

    display: grid;

    grid-template-rows: auto auto 1fr auto;

    grid-template-columns: 100%;

    min-height: 100%;

    margin: 0;

    font-size: 1.5rem;

    letter-spacing: 0.06rem;

    line-height: calc(1 + 0.8 / var(--font-body-scale));

    font-family: var(--font-body-family);

    font-style: var(--font-body-style);

    font-weight: var(--font-body-weight);

  }



  @media screen and (min-width: 750px) {

    body {

      font-size: 1.6rem;

    }

  }

{% endstyle %}



{{ 'base.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">



{%- if settings.cart_type == 'drawer' -%}

  {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}

  {{ 'component-cart.css' | asset_url | stylesheet_tag }}

  {{ 'component-totals.css' | asset_url | stylesheet_tag }}

  {{ 'component-price.css' | asset_url | stylesheet_tag }}

  {{ 'component-discounts.css' | asset_url | stylesheet_tag }}

{%- endif -%}



{%- unless settings.type_body_font.system? -%}

  {% comment %}theme-check-disable AssetPreload{% endcomment %}

  <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>

  {% comment %}theme-check-enable AssetPreload{% endcomment %}

{%- endunless -%}

{%- unless settings.type_header_font.system? -%}

  {% comment %}theme-check-disable AssetPreload{% endcomment %}

  <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>

  {% comment %}theme-check-enable AssetPreload{% endcomment %}

{%- endunless -%}



{%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}

  {{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }}

  <script src="{{ 'localization-form.js' | asset_url }}" defer="defer"></script>

{%- endif -%}



{%- if settings.predictive_search_enabled -%}

  <link

    rel="stylesheet"

    href="{{ 'component-predictive-search.css' | asset_url }}"

    media="print"

    onload="this.media='all'"

  >

{%- endif -%}



<script>

  if (Shopify.designMode) {

    document.documentElement.classList.add('shopify-design-mode');

  }

</script>

<a class="skip-to-content-link button visually-hidden" href="#MainContent">

  {{ 'accessibility.skip_to_text' | t }}

</a>



{%- if settings.cart_type == 'drawer' -%}

  {%- render 'cart-drawer' -%}

{%- endif -%}



{% sections 'header-group' %}



<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">

  {{ content_for_layout }}

</main>



{% sections 'footer-group' %}



<ul hidden>

  <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>

  <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>

</ul>



<script>

  window.shopUrl = '{{ request.origin }}';

  window.routes = {

    cart_add_url: '{{ routes.cart_add_url }}',

    cart_change_url: '{{ routes.cart_change_url }}',

    cart_update_url: '{{ routes.cart_update_url }}',

    cart_url: '{{ routes.cart_url }}',

    predictive_search_url: '{{ routes.predictive_search_url }}',

  };



  window.cartStrings = {

    error: \`{{ 'sections.cart.cart_error' | t }}\`,

    quantityError: \`{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '\[quantity\]' }}\`,

  };



  window.variantStrings = {

    addToCart: \`{{ 'products.product.add_to_cart' | t }}\`,

    soldOut: \`{{ 'products.product.sold_out' | t }}\`,

    unavailable: \`{{ 'products.product.unavailable' | t }}\`,

    unavailable_with_option: \`{{ 'products.product.value_unavailable' | t: option_value: '\[value\]' }}\`,

  };



  window.quickOrderListStrings = {

    itemsAdded: \`{{ 'sections.quick_order_list.items_added.other' | t: quantity: '\[quantity\]' }}\`,

    itemAdded: \`{{ 'sections.quick_order_list.items_added.one' | t: quantity: '\[quantity\]' }}\`,

    itemsRemoved: \`{{ 'sections.quick_order_list.items_removed.other' | t: quantity: '\[quantity\]' }}\`,

    itemRemoved: \`{{ 'sections.quick_order_list.items_removed.one' | t: quantity: '\[quantity\]' }}\`,

    viewCart: \`{{- 'sections.quick_order_list.view_cart' | t -}}\`,

    each: \`{{- 'sections.quick_order_list.each' | t: money: '\[money\]' }}\`,

    min_error: \`{{- 'sections.quick_order_list.min_error' | t: min: '\[min\]' }}\`,

    max_error: \`{{- 'sections.quick_order_list.max_error' | t: max: '\[max\]' }}\`,

    step_error: \`{{- 'sections.quick_order_list.step_error' | t: step: '\[step\]' }}\`,

  };



  window.accessibilityStrings = {

    imageAvailable: \`{{ 'products.product.media.image_available' | t: index: '\[index\]' }}\`,

    shareSuccess: \`{{ 'general.share.success_message' | t }}\`,

    pauseSlideshow: \`{{ 'sections.slideshow.pause_slideshow' | t }}\`,

    playSlideshow: \`{{ 'sections.slideshow.play_slideshow' | t }}\`,

    recipientFormExpanded: \`{{ 'recipient.form.expanded' | t }}\`,

    recipientFormCollapsed: \`{{ 'recipient.form.collapsed' | t }}\`,

    countrySelectorSearchCount: \`{{ 'localization.country_results_count' | t: count: '\[count\]' }}\`,

  };

</script>



{%- if settings.predictive_search_enabled -%}

  <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>

{%- endif -%}



{%- if settings.cart_type == 'drawer' -%}

  <script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script>

{%- endif -%}

this my theme code sorry im not really expert with these things , hope it can be fix thank you

10

@PeppePro02 ,
You need to sync both product forms so they always use the same selected variant.
Here is the fix that worked:

document.addEventListener('variant:change', function(e) {
  const variantId = e.detail.variant.id;

  // Update sticky ATC variant selector
  const stickySelector = document.querySelector('.sticky-add-to-cart select[name="id"]');
  if (stickySelector && stickySelector.value != variantId) {
    stickySelector.value = variantId;
    stickySelector.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

Why it works:

  1. Listens for the variant change event on the main product form
  2. Updates the sticky bar’s hidden/select field
  3. Prevents the sticky form from overriding the user’s selection

If your sticky ATC uses buttons instead of a select, just map the active variant ID to the correct button
Thanks

1 Like
11

Sorry im not really about coding where i need to paste this code pls?Thank you for help and time

1 Like
12

Hi @PeppePro02

Okay dear, just send me the access and let me know.

Best regards,
Devcoder :laptop:

1 Like
13

I just sent a private message thx