Layout of required checkbox on product page

Store Design
1

So, after extensive googling, some fairly colorful vernacular, a small breakdown and things flying across our office… Here I am.

I’ve taken control over our race shop’s website, and certain products require a either A) checkbox to agree to terms before checkout or B) an input field. There previous web guy, had it semi-functional but the layout looks very wonky. I’ve managed to get the checkbox in the right place, and it works as it should… But I can not get the add to cart/buy now buttons back where they should be. Can anyone be of assistance?

This image, is the correct (Spotify standard) layout. You have item quantity, and directly below it your add to cart/buy now (using the original product-form.liquid)

correctlayout.png
correctlayout.png2618×1464 252 KB

This the end result of what I’ve come up with. How can I get the checkout buttons back to their original orientation?

incorrectayout.png
incorrectayout.png1908×1360 248 KB

Here is the code that was pieced together. Please note, I have ZERO coding background and have pieced it together as I went.

{% if product.available %}

{% if section.settings.show_payment_button %}
  {% assign show_payment_button = true %}
{% elsif show_payment_button_quickshop %}
  {% assign show_payment_button = true %}
{% else %}
  {% assign show_payment_button = false %}
{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

  {% form 'product', product %}

  {% if product.options.size > 1 %}
    

      
    

  {% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
    
      
      
    

  {% else %}
    
  {% endif %}

  {% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
    

      {% for option in product.options %}
        {% include 'product-swatch' with option %}
      {% endfor %}
    

  {% endif %}

  {% if settings.display_inventory_left %}
      
        {% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
          {% capture items_left_text %}
            {% if variant.inventory_quantity == 1 %}
              {{ 'products.product.items_left_count.one' | t }}
            {% else %}
              {{ 'products.product.items_left_count.other' | t }}
            {% endif %}
          {% endcapture %}
          {% if variant.inventory_quantity <= settings.inventory_threshold %}
            {{ variant.inventory_quantity }} {{ items_left_text }}
          {% endif %}
        {% endif %}
      

    {% endif %}
  

  

           

  
  
  

    
        

    
      {% if settings.display_product_quantity %}
        

          
          
          
          
        

      {% endif %}
      
        {% if settings.cart_action == 'reload_page' %}
          
        {% elsif settings.cart_action == 'redirect_checkout' %}
          
        {% endif %}
        {% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
        
        {% if show_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      

    

  {% endform %}

{% endif %}
1 Like
2

@AdamCMS

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Ketan, sorry for the delay. I missed the reply notifacation.

It is www.GoMuchFaster.com

4

You can add this to the bottom of your style.scss.liquid file in your assets folder:

.purchase-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.purchase-details__quantity.product-quantity-box {
    margin-bottom: 10px;
}

.purchase-details__buttons {
    width: 100%;
}

.shopify-payment-button {
    padding-left: 10px;
}

Should be good to go. If you need help I can request access to your store and add it for you.

1 Like
5

THANK YOU!!! Fixed the problem. I know it was trivial at best but damnit it was bothering me. I appreciate the help!