How to add "add to cart" button on my collection page

Solved
Sunny9599
Excursionist
12 1 7

Hi sir,

Can we change add to cart button in variation listing. I would like to change see all buying option instead of add to cart button in variation listing. plz help

0 Likes
buvituvietnam
New Member
1 0 0

Your button is so beautiful. Can you instruct how to do it or get a code. thanks!

0 Likes
Sepec
Tourist
5 1 0

Hi 

many thanks quite helpful

any way to resize quantity box to a more descent size and also have “add to cart” button vertically aligned with qty instead of being below ?  

 

Sepec_0-1609559766795.png

 

thanks 

 

0 Likes
DrewFivey
New Member
1 0 0

Hi! I have successfully added this button to my site! Thanks so much

I am just wondering now how I can make it so that when the item is added to cart it doesn't come up with a "added successfully to card, view cart, or continue shopping" message as this message shows in a horrible blue link text - or is there a way I can change the colour and font of this message?

 

Thank you

0 Likes
GaryBusey1
Excursionist
29 0 13

Also wondering how to have an add to cart button with drop down variant options

0 Likes
DELONG_HUANG
Excursionist
36 0 4

Hi,

 

If I want to move the button up a little bit and make it longer to align with my product picture. Would you know how I could do that?

1.JPG

 

0 Likes
Sunny9599
Excursionist
12 1 7
  1. <div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
    <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
    </a>

    {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
    {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
    {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

    {% unless product.featured_image == blank %}
    {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
    {% endunless %}

    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
    <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
    <img id="{{ img_id }}"
    class="grid-view-item__image lazyload"
    src="{{ product.featured_image | img_url: '300x300' }}"
    data-src="{{ img_url }}"
    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
    data-aspectratio="{{ product.featured_image.aspect_ratio }}"
    data-sizes="auto"
    alt="">


    </div>
    </div>

    <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">

    </noscript>


    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    <div class="h5 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title | truncate:25 }}</div>
    {% include 'product-price', variant: product %}

    </div>

    <div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
    <form action="/cart/add" method="post">
    {% if product.variants.size == 1 %}
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <button type="submit" name="add" id="AddToCart-{{ section.id }}"class="btn product-form__cart-submit" </div>
    <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}

    {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
    </span>
    {% else %}
    <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
    </a>
    <input type="submit" value="See More Options" class="btn product-form__cart-submit" />



    {% endif %}



    </form>
    </div>

     

     

     

     

 

 

 

Here is the code...hope it will help you.

DELONG_HUANG
Excursionist
36 0 4

Hi Sunny9599,

 

Thank you. It works! However, I noticed that not all the rows of products have the button. I noticed that only the 2nd and 4th row has it. Would you know how I could do that?

It is Debut i am using.
 11.JPG

0 Likes
DELONG_HUANG
Excursionist
36 0 4

Thank you! It works after I replace all of the code in the product cart liquid. Initially, I paste at the bottom which is wrong.

 


@Sunny9599 wrote:
  1. <div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
    <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
    </a>

    {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
    {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
    {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

    {% unless product.featured_image == blank %}
    {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
    {% endunless %}

    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
    <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
    <img id="{{ img_id }}"
    class="grid-view-item__image lazyload"
    src="{{ product.featured_image | img_url: '300x300' }}"
    data-src="{{ img_url }}"
    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
    data-aspectratio="{{ product.featured_image.aspect_ratio }}"
    data-sizes="auto"
    alt="">


    </div>
    </div>

    <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">

    </noscript>


    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    <div class="h5 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title | truncate:25 }}</div>
    {% include 'product-price', variant: product %}

    </div>

    <div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
    <form action="/cart/add" method="post">
    {% if product.variants.size == 1 %}
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <button type="submit" name="add" id="AddToCart-{{ section.id }}"class="btn product-form__cart-submit" </div>
    <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}

    {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
    </span>
    {% else %}
    <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
    </a>
    <input type="submit" value="See More Options" class="btn product-form__cart-submit" />



    {% endif %}



    </form>
    </div>

     

     

     

     

 

 

 

Here is the code...hope it will help you.


 

0 Likes
ymke
New Member
1 0 0

I like to have cart added to my colection. I am using Artisan theme. I am not a programmer so I am hesistant to change the code myself. Is there anyone who can help me?

 

0 Likes