Custom liquid text line that leads to checkout (with current product in basket)

[ventures6k]

Hey there, so I have the following question. Our old store theme was custom built and ultimately we werent really happy with it so we swapped to a paid theme which is everything we wanted but one core feature we loved to have is missing. So in the old theme we had a custom text line which said "Additional Payment Methods" right below the dynamic checkout button. See screenshot 1 - that would take the customer straight from the product to the checkout, with the product he currently viewed automatically in the basekt. Basically the quick buy option, but just an additional info that there are more purchasing methods. 

We don't have access to the person that built this anymore, so I am hoping to find someone who could give me a walkthrough as I am really not good at coding or even finding where this could be implemented. I tried theme support (We are using the "Select" theme - https://themes.shopify.com/themes/select/styles/reserved), but they were not a help, and shopify support strongly advised me to ask here in this community. 

At the moment, it looks like this, and we'd love to have this additional option below the Quick Buy button. It just gives a better customer experience and an additional funnel, since they can see that there is more available than their dynamic option.

If anyone can help us with this, I'd be super grateful. 

Thank you for your time and help!

[Gabe]

Hey @ventures6k 

To add a custom line "Additional Payment Methods" below the dynamic checkout button on your Shopify store using the "Select" theme, you would typically need to edit your theme's Liquid code of the section where the dynamic checkout button is rendered.

Although the Shopify Help Center and other resources provide comprehensive guides on customizing dynamic checkout buttons, including their colors and fonts, as well as adding or removing them​​​​, they don't cover the specific case of adding custom text directly below these buttons. However, understanding how dynamic checkout buttons work and where they're located in your theme's code can help you find the right place to add your custom message.

It could be the file that contains the code for the dynamic checkout button, related to the product form, such as product-form.liquid, product-template.liquid, or something similar within the "Sections" or "Snippets" folder. Once you've located the file, look for the code snippet that renders the dynamic checkout button. It might be a form element with an input of type "submit", or it might use Shopify's {{ form | payment_button }} Liquid code.

Insert an HTML line where you want your text to appear. For example, you can add something like <p>Additional Payment Methods</p> below the dynamic checkout button code. If you wish to link this text to another page, use an <a> tag with the URL to the desired page​​.

Directly below this code, you'll want to add your custom HTML for the "Additional Payment Methods". It might look something like this:

<p><a href="/policies/payment-policy" style="text-decoration: underline;">Additional Payment Methods</a></p>

This code creates a paragraph containing a link. You can replace "/policies/payment-policy" with the URL you want to link to, which could be a page describing your payment methods or directly to the checkout. The style attribute is used here to underline the link, but you can adjust the styling as needed.

The exact steps and file names might vary depending on your theme's structure. If you're not comfortable editing your theme's code, it might be beneficial to consult with a Shopify Expert or a developer who specializes in Shopify themes. They can help you make the changes without risking the integrity of your theme.

Hope that helps! 😉

[ventures6k]

Hey there Gabe, that was a super nice and well written out explanation. And it is also exactly what I would love to have. I managed to get it done on a backup, and i found it in main-product.liquid. The only problem now is, that i also need a script that will automatically add the product that is currently open to the cart while it moves forward to checkout. So to be clear, this Text-line (Additional Payment Methods) should have the same function as the dynamic checkout button. 

For clarification, User Data shows that when we had this Option available, we converted better. Its probably due to the fact that people can visibile see that there are more options than what the dynamic button shows - which is just 1. 

Coming back to the script, thats where I am at a total loss. No idea how to set this up or where to place it.

Here you see the textline I just managed to add with your help.

[Gabe]

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:

<p><a href="javascript&colon;void(0);" onclick="addProductToCartAndRedirect();" style="text-decoration: underline;">Additional Payment Methods</a></p>

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! 😉