How can I switch a 'buy' button to a 'link' button on Refresh 9.0.0 theme?

Store Design
1

Next to regular products and services, I now want to sell a non-direct sales item.

How do I replace the “buy” button for a button that leads to another website?

Using the Refresh 9.0.0 theme.

2

You can choose to match meta-fields, using links when they are present and displaying the Add to Cart button when they are not.

3

To replace the “Buy” button with a link button, you’ll have to make changes to your theme’s code.

  1. ‘Online Store’ > ‘Themes’.
  2. Edit code
  3. Under sections, open product-template.liquid
4

Hi Havana,

You can follow this logic:

  • Create Product Metafields with Name: “Custom Checkout” ; Type “True or False”

  • Go to Products > non-direct sales item > Select Metafields “custom checkout” > True

  • Edit Code: check if the metafield condition “Custom Checkout” is true > hide the origional Add-to-cart and BUY now buttons on you store’s theme then add your own button that redirect to the expected page.

5

To replace the “buy” button with a button that leads to another website in the Shopify Refresh 9.0.0 theme, you can follow these steps:

  1. From your Shopify admin, go to the “Online Store” section and select “Themes.”

  2. In the “Themes” page, locate your Refresh 9.0.0 theme and click on the “Customize” button.

  3. In the theme editor, navigate to the product template. This template is usually named “product.liquid” or “product-template.liquid”.

  4. Inside the product template, locate the code that generates the “buy” button. This code typically looks like:

<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Add to Cart" />
</form>
  1. Replace the existing code with the code for your custom button that leads to another website. For example, you can use the following code:
<a href="[https://example.com](https://example.com)" target="_blank">Visit Website</a>

In this code, replace “https://example.com” with the URL of the website you want the button to link to.

  1. Save the changes in the theme editor.

  2. Preview your store and navigate to a product page to see the updated button. Instead of the “buy” button, you should now see your custom button that leads to the specified website.

By following these steps, you can replace the “buy” button in the Shopify Refresh 9.0.0 theme with a custom button that directs customers to another website. Remember to save and test your changes to ensure they appear and function as expected.

6

Hello @havana1982 !

A feature like this would either need to be added via custom coding or a third party app, since we do not have this option as part of the native features of Shopify.

For an app option, I had a look and found the Outlink External Links Button app which allows you to replace the ‘Add to Cart’ button with the Outlink button for any product, and redirect users to external or affiliate pages.

Does that sound like it might suit?

Alternatively, you can look into getting a custom option for your website with a Shopify Expert. Experts are freelancers that charge their rates based on the work that they do, but they can work to really tailor this for your store and your business needs.

Could you tell me a little bit more about why you’re looking to set this up? How does this work, and is it only for specific, or for all products on your store? I would be happy to see how else I can help you out here.

7

Hello, Lana,

I am also looking into this, but my products are available in different markets, and the link I have to add is different for each market.

Is the Outlink External Links Button app fit to adapt to several markets - and maybe not all?

Thanks,

Paloma