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

Store Design
1

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

2

Hi @ImDedi

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

3

Hi @JHKCreate

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

thank you :slightly_smiling_face:

4

Hi @ImDedi

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

Cheers!

5

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: '' %}
        

        {% if section.settings.product_quantity_enable %}
          
          
        {% endif %}

        {% if section.settings.product_quantity_message %}
          

              {% include 'svg-definitions' with 'stock-icon' %}
                {% assign qty = variant.inventory_quantity %}
                {{ 'products.product.only_left' | t: count: qty }}
          

        {% endif %}

        {% if section.settings.product_incoming_message %}
          
            {% 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' %}
                {{ 'products.product.will_not_ship_until' | t: date: date  }}
              {% else %}
                {% assign date = variant.next_incoming_date | date: format: 'date' %}
                {{ 'products.product.will_be_in_stock_after' | t: date: date }}
              {% endif %}
            {% endif %}
          

        {% endif %}

        
          
          

          {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        

      {% endform %}

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

6

thank you so much :heart:

7

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

Like the size and background colour and such.

@JHKCreate