Shopify Accelerated Checkout is adding duplicate markup for buttons.

Online Store and Theme Development
,
1

Hi,

I am adding Shopify Accelerated checkout to my cart using this code:

{%- if additional_checkout_buttons -%}

{{ content_for_additional_checkout_buttons }}
{%- endif -%}

It works fine most of the times.

The problem is that sometimes, Shopify renders two or more of these HTML sections like I have show with the blue marker.

annotated-errors
annotated-errors1471×932 97.6 KB

Any such additional sections are not supposed to be there.

They are also not visible to the visitor probably because the JavaScript code applies the fade-in animation to the first such set and it is not expecting more of them.

However, the still take up space.

This is inside a closed shadow DOM so I can’t just remove them with JavaScript or hide them with CSS.

The attached screenshot is from Chrome if that matters.

2

Is this happening on any theme?

3

Hi @Liam-Shopify :slight_smile:

Yes, I am using the Stiletto theme. However, the liquid code I posted is the only one that adds the checkout buttons here.

Also, everything is inside the shadow DOM so I think it isn’t possible for any JavaScript theme files to somehow manipulate the markup unless I am missing something. :slight_smile:

Thanks.

4

How often is this happening? Are you on the latest version of Stiletto?

5

I am on version 1.8.0.

This happens maybe for 10% of the visits. I have only seen it happen in Chrome.

6

Any solution for this issue?
I am using custom theme but I have the same issue like this.