add a "buy now" button on homepage and product page [supply theme]

Solved
ImDedi
Explorer
69 1 20

Hi everyone.

Could anyone help me with adding a "buy now" button on my home page and product page?

my store URL is https://imdedi.com

0 Likes
JHKCreate
Shopify Partner
2492 402 591

Hi @ImDedi 

Would the buy button lead to the product page or trigger an "Add To Cart"? Let me know!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
ImDedi
Explorer
69 1 20

Hi @JHKCreate 

It would trigger an add to cart button and open the cart.

thank you

0 Likes
JHKCreate
Shopify Partner
2492 402 591

Hi @ImDedi 

Send you a collaborator request so we can assist on that.

Cheers!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
JHKCreate
Shopify Partner
2492 402 591

This is an accepted solution.

Hi @ImDedi 

Button has been added, you should have added the following code at the end of your product-grid-item.liquid file:

{% capture "form_class" -%}
        addToCartForm{% if section.settings.enable_payment_button %} addToCartForm--payment-button{% endif %}
      {%- endcapture %}

      {%- capture "form_id" -%}addToCartForm-{{ section.id }}{%- endcapture -%}

      {% form 'product', product, class:form_class, id:form_id, data-product-form: '' %}
        <select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
          {% for variant in product.variants %}
            {% if variant.available %}

              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

            {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
          {% endfor %}
        </select>

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

        {% if section.settings.product_quantity_message %}
          <div id="variantQuantity-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %} is-visible{% endif %}">
              {% include 'svg-definitions' with 'stock-icon' %}
                {% assign qty = variant.inventory_quantity %}
                <span id="variantQuantity-{{ section.id }}__message">{{ 'products.product.only_left' | t: count: qty }}</span>
          </div>
        {% endif %}

        {% if section.settings.product_incoming_message %}
          <div id="variantIncoming-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity <= 0 and variant.incoming %} is-visible{% endif %}">
            {% if variant.inventory_management and variant.inventory_quantity == 0 or variant.inventory_quantity < 0 and current_variant.incoming %}
              {% include 'svg-definitions' with 'stock-icon' %}
              {% if variant.available %}
                {% assign date = variant.next_incoming_date | date: format: 'date' %}
                <span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_not_ship_until' | t: date: date  }}</span>
              {% else %}
                {% assign date = variant.next_incoming_date | date: format: 'date' %}
                <span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_be_in_stock_after' | t: date: date }}</span>
              {% endif %}
            {% endif %}
          </div>
        {% endif %}

        <div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
          <button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"style="width: 105%">>
            <span class="icon icon-cart"></span>
            <span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
          

          {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        </div>
      {% endform %}


Don't forget to like & mark as solution if we've solved this for you!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
ImDedi
Explorer
69 1 20

thank you so much

0 Likes
ImDedi
Explorer
69 1 20

Do you know how I can do to change the appearance of the button?

Like the size and background colour and such.

 

@JHKCreate 

0 Likes