Moving Add To Cart Button in Fashionpolism Theme

bettybooper
Tourist
8 0 0

I was asked to move the add to cart & buy it now button above the social icons but they have the buttons split off into a snippet and when I pull the code for the add to cart button out of the snippet and put it into the product section it stops functioning. I'm newish to the shopify platform so not understanding what I need to do to get these buttons to work properly outside of the snippet. I tried just dropping the code directly into the product section but got no functionality. I tried putting it into it's own snippet inside of a form and rendering it but the button would still not add the item to the cart. 

Here is the code in the product section:

 

 

 {% capture product_form_config %}
          { "money_format": {{ shop.money_format | json }},
            "enable_history": true,
            "sold_out": {{ "products.product.sold_out" | t | json }},
            "button": {{ 'products.product.add_to_cart' | t | json }},
            "unavailable": {{ 'products.product.unavailable' | t | json }},
            "quickview": {% if template == 'product.quick' %}true{% else %}false{% endif %},
            "featured_product": false
          }
        {% endcapture %}

        {% render 'product-form',
          product: product,
          product_type: 'product',
          product_form_config: product_form_config,
          current_variant: current_variant %}

 

 

 

and here is the code in the product-form snippet. Any advice you can give me  about getting the last few lines of code out of the snippet and into the product section with the add to cart buttons working would be much appreciated!

 

 

{%- liquid
  if product_type == 'featured_product'
    assign selector_id = section.id | prepend: 'fp-product-select-'
  elsif product_type == 'quickview'
    assign selector_id = product.id | prepend: 'qv-product-select-'
  elsif product_type == 'product'
    assign selector_id = product.id | prepend: 'product-select-'
  endif

  assign call_to_action = 'products.product.add_to_cart' | t

  unless current_variant.available
    assign call_to_action = 'products.product.sold_out' | t
  endunless
-%}

{% form 'product', product, id: "AddToCartForm", class: "product__form-container product_form", data-product-form: product_form_config, data-product-id: product.id %}

  {% render 'product-price', variant: current_variant, product: product %}

  <div class="spi-banner">
    {{ form | payment_terms }}
  </div><!-- /#spi-banner -->

  {% if product.options.size > 1 %}
    <div class="product__variants-select select" {% if product.variants.size == 1 or settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
      <select id="{{ selector_id }}" name='id'>
        {% for variant in product.variants %}
          <option value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
            {{ variant.title }} - {{ variant.price | money }}
          </option>
        {% endfor %}
      </select>
    </div>
    {% if settings.product_variants == 'swatches' %}
      {% for option in product.options_with_values %}
        {% render "swatch",
          option: option,
          current_variant: current_variant,
          product: product,
          show_color_swatches: settings.show_color_swatches,
          color_swatch_shape: settings.color_swatch_shape,
          color_swatch_style: settings.color_swatch_style %}
      {% endfor %}
    {% endif %}
    {% elsif product.options.size == 1 and product.variants.size > 1 %}
      <div class="product__variants-select product__variants-single-option select" {% if settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
        <label for="{{ selector_id }}" class="product__variants-single-option-label">{{ product.options[0] }}</label>
        <select id="{{ selector_id }}" name='id'>
          {% for variant in product.variants %}
            <option data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
              {{ variant.title }} - {{ variant.price | money }}
            </option>
          {% endfor %}
        </select>
      </div>
      {% if settings.product_variants == 'swatches' %}
        {% for option in product.options_with_values %}
          {% render "swatch",
            option: option,
            current_variant: current_variant,
            product: product,
            show_color_swatches: settings.show_color_swatches,
            color_swatch_shape: settings.color_swatch_shape,
            color_swatch_style: settings.color_swatch_style %}
        {% endfor %}
      {% endif %}
    {% elsif product.variants.size == 1 %}
      <select id="{{ selector_id }}" name="id" {% if product.variants.size == 1 or settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
        {% for variant in product.variants %}
          <option value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
            {{ variant.title }} - {{ variant.price | money }}
          </option>
        {% endfor %}
      </select>
    {% else %}
      <div class="what-is-it">
        {% if product.options.first != 'Title' %}
          <label>{{ product.options.first }}:</label>
          {% for variant in product.variants %}
            <span class="it-is">{{ variant.option1 | escape }}</span>
          {% endfor %}
        {% endif %}
      </div>
      <div class="product-variants"></div><!-- product variants -->
      <input  type="hidden" id="{{ variant.id }}" name="id" data-sku="{{ variant.sku }}" value="{{ product.variants[0].id }}" />
    {% endif %}
  <div class="clear"></div>

  {% if settings.product_show_sku %}
  <div class="product__sku-container sku js-product-sku-container{% if current_variant.sku == blank %} hide{% endif %}">
    <span class="product__sku-label">{{ 'customer.order.details.sku' | t }}</span>
    <span class="product__sku-value js-product-sku">{{ current_variant.sku }}</h5>
  </div><div class="clear"></div>
  {% endif %}

  {% if settings.product_show_quantity %}
  <div class="product__quantity-wrapper">
    <label class="product__quantity-label" for="quantity">{{ 'products.product.quantity' | t }}</label>
    <input class="product__quantity-input" min="1" type="number" id="quantity" name="quantity" value="1" />
  </div>
  {% endif %}

  <div id="product-add" class="product__add-container">
    {% if settings.product_show_payment_button %}<div class="clear"></div>{% endif %}
    <div class="note note-success mt3 js-added-msg" style="display: none">
    <b>{{ 'products.product.added' | t }}</b>&nbsp;&nbsp;&nbsp;<a class="underline" href="{{ routes.cart_url }}">{{ 'products.product.view_cart' | t }}</a> {{ 'products.product.or' | t }} <a class="underline" href="{{ routes.all_products_collection_url }}">{{ 'products.product.continue' | t }}</a>.
    </div>
    <div class="note note-error js-error-msg" style="display: none">
    <b>{{ 'cart.general.cart_error' | t }}</b>&nbsp;&nbsp;&nbsp;{{ 'cart.general.update_qty_error' | t }}
    </div>
    <input id="addToCart" type="submit" name="button" class="product__add-button add clearfix AddtoCart js-ajax-submit {% if section.settings.show_payment_button or product.selling_plan_groups.size == 0 %} secondary-button{% endif %}" value="{{ call_to_action }}" {% unless current_variant.available %}disabled{% endunless %} />
    {% if settings.product_show_payment_button %}
     {{ form | payment_button }}
    {% endif %}
  </div>
  <p class="product__add-msg add-to-cart-msg"></p>
  <div class="clear"></div>
{% endform %}

 

 

 

0 Likes
LuckyNigam
Pathfinder
79 8 14

Hi @bettybooper 

you want to move the social icon above the shopping button. So you move the your social icon snippet to above of button. for more information please DM.

0 Likes
bettybooper
Tourist
8 0 0

Don't want the social buttons above. I want to move the add to cart buttons under the product description.

0 Likes
LuckyNigam
Pathfinder
79 8 14

please share your website url and also attached a screenshot what you exactly want.

0 Likes
bettybooper
Tourist
8 0 0

Hi I appreciate your help but really I am just wondering if it is ok to inject the product description into the product form or will that cause issues down the road. 

0 Likes