Hey @ventures6k
Great to hear you are a step closer! You might need to use JS and if you are not a fully-fledged FED programmer I would suggest to hire one of our certified dudes that can do that for you.
I did some digging in the developer blogs and forums:
To achieve the functionality where clicking on the “Additional Payment Methods” link automatically adds the current product to the cart and then redirects the customer to the checkout page, you’ll need to add some JavaScript along with the HTML changes you’ve made in your main-product.liquid file.
First, ensure your “Additional Payment Methods” link is set up to trigger a JavaScript function when clicked. You simply modify the HTML you added to include an onclick attribute. For example:
Additional Payment Methods
This change means that instead of navigating directly to a URL when clicked, the link will call a JavaScript function named addProductToCartAndRedirect. Next, you’ll need to add a JavaScript function that does two things: adds the product to the cart and then redirects the user to the checkout page. This script will be added to your main-product.liquid file or in a global JavaScript file that’s included on your product pages, depending on how your theme organizes JavaScript.
Here’s a basic example of what this JavaScript function might look like:
function addProductToCartAndRedirect() {
// Assuming you have access to the product's variant ID and quantity
var variantId = document.querySelector('[name=id]').value; // This might need adjustment based on your theme's structure
var quantity = 1; // or document.querySelector('[name=quantity]').value; for quantity input
var formData = {
'items': [{
'id': variantId,
'quantity': quantity
}]
};
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
if (response.ok) {
// Redirect to checkout
window.location.href = '/checkout';
} else {
// Handle failure
alert('Could not add product to cart. Please try again.');
}
})
.catch(error => {
console.error('Error adding product to cart', error);
});
}
- Variant ID: This script assumes you have a way to get the product’s variant ID that the customer intends to purchase. The
document.querySelector('[name=id]').value is a common way to retrieve this from a hidden input in Shopify themes, but you may need to adjust this based on how your product form is set up.
- Quantity: This example hardcodes the quantity as
1, but if you offer quantity selections to your customers, you’ll need to adjust this to capture the selected quantity.
- Error Handling: The script includes basic error handling by using an alert to notify the user if the product couldn’t be added to the cart. You might want to handle this more gracefully in a production environment.
From the Shopify community forum, users have discussed the desire to skip the cart page and directly proceed to checkout upon clicking an “Add to Cart” button, though specific code implementations were not provided in the snippets viewed.
A practical guide provided by All About Basic outlines how to create a simple “Add to Cart” button that redirects directly to the checkout page. It involves modifying the form element in your product templates to include a hidden input specifying the return path to “/checkout/” upon submission. This method requires adding specific HTML and Liquid code to your product form.
Another detailed resource from Hura Tips explains how to add a “Buy It Now” button to your Shopify store, allowing customers to bypass the cart and directly go to the checkout page. This method involves editing your theme’s Liquid files, such as product-template.liquid or featured-product.liquid, to modify the product form. The steps include finding the product form in your code, replacing the <form> tag with a Shopify Liquid form object, and adding a payment button using the {{ form | payment_button }} Liquid filter. This setup is particularly useful for increasing the conversion rate by reducing the steps needed to make a purchase.
Hope that helps! 
