Checkout Button Not Showing Properly

Shopify Discussion

Topic summary

A Shopify store owner modified code in their main-cart-footer.liquid file, which successfully implemented their desired changes but broke the checkout button display. They shared their cart page URL and posted the entire section code, acknowledging they lack coding expertise to identify the specific error.

Current Status:

  • The checkout button is not displaying properly on the cart page
  • The user provided their complete code snippet for troubleshooting
  • A helper (Bundler-Manuel) suggested adding CSS code to fix button visibility

Unresolved Questions:

  • The original poster asked where exactly to paste the suggested CSS fix
  • They requested direct phone contact for further assistance

Key Issue: The problem appears related to button opacity/visibility settings, as the suggested fix targets checkout button display properties. The discussion remains open with the store owner seeking clarification on implementation.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I modified the code in main-cart-footer.liquid and my modification worked the way I want it to, but it looks like I’ve screwed up the code for the checkout button in the process. Here’s what the page looks like at the moment.

https://www.hollandcountryandgarden.com/cart

I don’t know enough about coding to know exactly where the problem starts or ends, so I’ve just copied the code for the entire section here (sorry if it’s too much). Can anyone help me identify the mistake and figure out what I need to do to fix it?

{% assign needs_form = false %}
{{ ‘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 }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if settings.show_cart_note -%} {{ 'sections.cart.note' | t }} {{ cart.note }} {%- endif -%}
{% for block in section.blocks %} {%- case block.type -%} {%- when '@app' -%} {% render block %} {%- when 'subtotal' -%}
{%- if cart.cart_level_discount_applications.size > 0 -%}
    {%- for discount in cart.cart_level_discount_applications -%}
  • {{- 'icon-discount.svg' | inline_asset_content -}} {{ discount.title | escape }} (-{{ discount.total_allocated_amount | money }})
    • {%- endfor -%}
{%- endif -%}

{{ 'sections.cart.estimated_total' | t }}

{{ cart.total_price | money_with_currency }}

{%- if cart.duties_included and cart.taxes_included -%} {%- if shop.shipping_policy.body == blank -%} {{ 'sections.cart.duties_and_taxes_included_shipping_at_checkout_without_policy' | t }} {%- else -%} {{ 'sections.cart.duties_and_taxes_included_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%} {%- elsif cart.duties_included == false and cart.taxes_included -%} {%- if shop.shipping_policy.body == blank -%} {{ 'sections.cart.taxes_included_shipping_at_checkout_without_policy' | t }} {%- else -%} {{ 'sections.cart.taxes_included_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%} {%- elsif cart.duties_included and cart.taxes_included == false -%} {%- if shop.shipping_policy.body == blank -%} {{ 'sections.cart.duties_included_taxes_at_checkout_shipping_at_checkout_without_policy' | t }} {%- else -%} {{ 'sections.cart.duties_included_taxes_at_checkout_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%} {%- elsif cart.duties_included == false and cart.taxes_included == false -%} {%- if shop.shipping_policy.body == blank -%} {{ 'sections.cart.taxes_at_checkout_shipping_at_checkout_without_policy' | t }} {%- else -%} {{ 'sections.cart.taxes_at_checkout_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%} {%- endif -%}
{%- else -%}
<button {% if needs_form %} {% include 'custom' %} {% else %} {% endif %} {% if cart == empty %} disabled {% endif %} form="cart" > {{ 'sections.cart.checkout' | t }}

{%- if additional_checkout_buttons -%}

{{ content_for_additional_checkout_buttons }}
{%- endif -%} {%- endcase -%} {% endfor %}

{% schema %}
{
“name”: “t:sections.main-cart-footer.name”,
“class”: “cart__footer-wrapper”,
“settings”: [
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “scheme-1”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 40
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 40
}
],
“blocks”: [
{
“type”: “subtotal”,
“name”: “t:sections.main-cart-footer.blocks.subtotal.name”,
“limit”: 1
},
{
“type”: “buttons”,
“name”: “t:sections.main-cart-footer.blocks.buttons.name”,
“limit”: 1
},
{
“type”: “@app”
}
]
}
{% endschema %}

2

Hello Holland @Holland2828 I suggest that you copy and paste this code and see if it works for you

.mini-cart__drawer-footer #loader-button, .cart__recap #loader-button, [href$=checkout]:not(.csapps-ignore,.aiod_cart_loaded) {
opacity: 1 !important;
visibility: visible !important;
}

3

Thank you so much for the suggestion! One more question, though - where in the code should I paste it? I’m always afraid I’m going to put things in the wrong place because I’m not remotely fluent in this language.

4

That would be wonderful if you could help me fix it! Could you give our in-person store a call so we can chat more? 920-668-5106. I’ll be here until about 4pm CST. Thanks so much!!

1 Like