How to Center Add to Cart Button or Make Wider

New Member
2 0 0

Greetings,

I would consider myself - self taught and a noob however I read alot and have gotten pretty far on my site.

I am just dumbfounded because I can not figure this out... 

The add to cart button is left justified and it looks crazy! Can someone please help.

 

https://www.tharyjewelry.com/products/live-what-you-love-bangle-rose

 

0 Likes
Astronaut
761 78 151

Add this to the bottom of your theme.scss.liquid file:

.product_form {

margin: 0 auto;

width: 250px;

}

I just used that class because it's one of the one's on your button's div. Since I don't know what else uses that class, I can't say for certain that this wont mess anything else up. If I were you, I'd find where your button occurs on your product.liquid and add a new class to the div like "product_add_btn" or something like that and then add those styles. Also I just added that 250px thing because I thought it looked a little big. You can make that whatever you want.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
2 0 0

I have no clue where to insert that. Can you place in my code for me?

 

{% 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 %}

  <div class="clearfix product_form init smart-payment-button--{{ show_payment_button }} {% if product.variants.size > 1 or product.options.size > 1 %}product_form_options{% endif %} product_form--{{ settings.product_form_style }}"
        id="product-form-{{ product.id }}"
        data-money-format="{{ shop.money_format }}"
        data-shop-currency="{{ shop.currency }}"
        data-select-id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}"
        data-enable-state="{% if template contains 'product' %}true{% else %}false{% endif %}"
        data-product="{{ product | json | escape }}"
        {% if settings.limit_quantity or settings.display_inventory_left %}
          data-variant-inventory='[{%- for v in product.variants -%}{"id":{{v.id}},"inventory_quantity":{{v.inventory_quantity}},"inventory_management":"{{v.inventory_management}}","inventory_policy":"{{v.inventory_policy}}"}{% if forloop.last == false %},{% endif %}{%- endfor -%}]'
        {% endif %}
        data-product-id="{{ product.id }}"
        >
    {% form 'product', product %}

    {% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
          {% for v in product.variants %}
            <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
      <div class="select">
        <label>{{ product.options[0] }}</label>
        <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
          {% for v in product.variants %}
            <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <input type="hidden" name="id" value="{{ variant.id }}" />
    {% endif %}

    {% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
      <div class="swatch_options">
        {% for option in product.options %}
          {% include 'product-swatch' with option %}
        {% endfor %}
      </div>
    {% endif %}

    {% if settings.display_inventory_left %}
      <div class="items_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 %}
      </div>
    {% endif %}
    <div class="purchase-details">
           {% if settings.display_product_quantity %}
        <div class="purchase-details__quantity product-quantity-box">
          <label for="quantity">{{ 'products.product.quantity' | t }}</label>
          <span class="ss-icon product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span>
          <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}max="{{ variant.inventory_quantity }}"{% endif %} />
          <span class="ss-icon product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
        </div>
      {% endif %}
             <div class="purchase-details__buttons">
                {% if settings.cart_action == 'reload_page' %}
          <input type="hidden" name="return_to" value="back" />
        {% elsif settings.cart_action == 'redirect_checkout' %}
          <input type="hidden" name="return_to" value="/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 %}
        <button type="submit" name="add" class="action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
          <span class="text">{{ add_to_cart_label }}</span>
          <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
            <path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
          </svg>
        </button>
        {% if show_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>
    </div>
  {% endform %}
</div>
{% endif %}

0 Likes
Highlighted
Astronaut
761 78 151

I said to put it in the bottom of your theme.scss.liquid file. But if you want to do it on that page, you can do this at the top and it should work:

<style>

.product_form{
margin: 0 auto;
width:250px;
}

</style>

{% 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 %}

  <div class="clearfix product_form init smart-payment-button--{{ show_payment_button }} {% if product.variants.size > 1 or product.options.size > 1 %}product_form_options{% endif %} product_form--{{ settings.product_form_style }}"
        id="product-form-{{ product.id }}"
        data-money-format="{{ shop.money_format }}"
        data-shop-currency="{{ shop.currency }}"
        data-select-id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}"
        data-enable-state="{% if template contains 'product' %}true{% else %}false{% endif %}"
        data-product="{{ product | json | escape }}"
        {% if settings.limit_quantity or settings.display_inventory_left %}
          data-variant-inventory='[{%- for v in product.variants -%}{"id":{{v.id}},"inventory_quantity":{{v.inventory_quantity}},"inventory_management":"{{v.inventory_management}}","inventory_policy":"{{v.inventory_policy}}"}{% if forloop.last == false %},{% endif %}{%- endfor -%}]'
        {% endif %}
        data-product-id="{{ product.id }}"
        >
    {% form 'product', product %}

    {% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
          {% for v in product.variants %}
            <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
      <div class="select">
        <label>{{ product.options[0] }}</label>
        <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
          {% for v in product.variants %}
            <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <input type="hidden" name="id" value="{{ variant.id }}" />
    {% endif %}

    {% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
      <div class="swatch_options">
        {% for option in product.options %}
          {% include 'product-swatch' with option %}
        {% endfor %}
      </div>
    {% endif %}

    {% if settings.display_inventory_left %}
      <div class="items_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 %}
      </div>
    {% endif %}
    <div class="purchase-details">
           {% if settings.display_product_quantity %}
        <div class="purchase-details__quantity product-quantity-box">
          <label for="quantity">{{ 'products.product.quantity' | t }}</label>
          <span class="ss-icon product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span>
          <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}max="{{ variant.inventory_quantity }}"{% endif %} />
          <span class="ss-icon product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
        </div>
      {% endif %}
             <div class="purchase-details__buttons">
                {% if settings.cart_action == 'reload_page' %}
          <input type="hidden" name="return_to" value="back" />
        {% elsif settings.cart_action == 'redirect_checkout' %}
          <input type="hidden" name="return_to" value="/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 %}
        <button type="submit" name="add" class="action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
          <span class="text">{{ add_to_cart_label }}</span>
          <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
            <path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
          </svg>
        </button>
        {% if show_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>
    </div>
  {% endform %}
</div>
{% endif %}

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes