Use a Different "Add to Cart" Button For Each Variant

AC_Coombs
New Member
6 0 0

I have spent the past 2 days on this and am close to figuring it out but am currently stuck so I figured that I would ask here.

I'm looking for a way to have each variant have its own unique button. I currently have 3 variants: Monthly Subscription, 3 Month Prepaid, and 6 Month Prepaid and I need to have a different button for each specific variant (we use a 3rd party recurring billing system so each button links to a different signup form). The basic snippet of code for the 'add to cart' is here.

 <div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
          <div class="purchase">
            {% unless product.available %}
            <p>Sold Out</p>
            {% else %}            
            {% endunless %}
            <input type="submit" class="btn" name="add" id="add-item-to-cart" value="Add to cart" />
          </div> <!-- /.purchase -->
        </div> <!-- /.clearfix -->
      </form>

I've been able to add multiple buttons to the site by adding the code for the actual buttons as here:

<div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
          <div class="purchase">
            {% unless product.available %}
            <p>Sold Out</p>
            {% else %}            
            {% endunless %}
            <input type="submit" class="btn" name="add" id="add-item-to-cart" value="Add to cart" />
            <a href="https://app.moonclerk.com/pay/1edksemki40"><img alt="Subscribe" src="https://s3.amazonaws.com/moonclerk/buttons/subscribe.png"; /></a>
            <a href="https://app.moonclerk.com/pay/1edksemki40"><img alt="Buy Now" src="https://s3.amazonaws.com/moonclerk/buttons/buy-now.png"; /></a>
          </div> <!-- /.purchase -->
        </div> <!-- /.clearfix -->
      </form>

But then it looks like this with the buttons side by side. I can get the buttons on the page just not in the correct fashion.

I used the .xml feature to find the unique id for each variant and tried {% if product.variants.id == 'unique id integer' %}  <a href="https://app.moonclerk.com/pay/1edksemki40"><img alt="Buy Now" src="https://s3.amazonaws.com/moonclerk/buttons/buy-now.png"; /></a> {% endif %}. So then I tried using {% if product.variant  = 'unique id' %} within the code but that didn't work.

What is the correct 'if' variable to use within Shopify (product.variants.id, product.variants.name, product variant.form?) and where does this get placed within the code? Any help is greatly appreciated. Thank you.

 

 

 

 

 

0 Likes
AC_Coombs
New Member
6 0 0

Any Ideas?

0 Likes
Dan_Clark
Shopify Partner
1 0 0

Hi,

We are looking at a similar issue with wanting different buttons for each product 'option'.

Did you manage to resolve your issue or are you still looking into it?

We specifically want something more along the lines of a button for each t-shirt size, which adds the relevant option to the cart.

 

Thanks

0 Likes
AC_Coombs
New Member
6 0 0

Unfortunately no. I asked a couple of friends for help but nothing. Even tried on Stack Overflow. As you can see I am very close. I can get all the buttons just that they are side by side, looks awful! I'm almost certain that it has something to do with If and Conditional Statements, something that I'm not very proficient in. I'd be willing to pitch in to pay for someone to make a hack that is open source for everyone here with the same issue to use. Thoughts?

0 Likes
Adnan44
New Member
1 0 0

yes, i know how to add a button to the product page by coding

0 Likes