Redirect from the buy button to an other url

[Julianinho]

Hello,

I'm wondering if it's possible with a plugin or a simple way to redirect the "button add to cart/buy" to an other url?

Or if it's more easy, the products that i want to redirect will be on "pre-order", so if there is a plugin that remplace the button "add to cart" by "pre-order + redirect to other website" will be the best solution.

I want to made this only on few products (maybe 10), it's not for all my product.

I use the Dawn theme.

Thank you 😉

[Vinsinfo]

@Julianinho Please follow the below steps to add the custom URL for the specific products using the new custom button. Let me know whether it is helpful for you.

If you want to add same custom URL to all products, then check out the below steps. If you want to add different URLs to each products, then you have to do it with adding product metafields. Please contact us to help on that.

To add custom URL only to specific products, we will add the tags to that products like "pre-order-product" or "your custom tag name". Based on it, we will display redirection button and add to cart button.

a) Follow the below steps to add the tags to the products in the admin panel:

We can add tags for the products in either of below two options.

Option 1: Steps to add the tags for one product at a time:

1. From admin, go to products and click on a product to edit that you want to display custom URL.

2. In product, locate the "Tags" field under the "Product organization" section and enter the tag value you want like "pre-order-product" or something like in the below attached screenshot.

3. Click Add "pre-order-product" label and click "Save" to apply the changes.

Option 2: Steps to add the tags for multiple products at a time:

NOTE: If all the products are in same page, you can use this option, else just follow option 1 to add the tags.

1. Select the products in admin products page that you want to add redirect URL and click the three dots for "more actions" like in the below attached screenshot.

2. From the pop-up, search for the "Add Tags" like in the below attached screenshot.

3. Enter the tag value you want like "pre-order-product" or something, click the Add "pre-order-product" label and save it. It will create new tag for the selected products.

b) Follow the below steps to add Custom URL to product page:

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search for the "main-product.liquid" file and locate the code "{%- when 'popup' -%}". Add the below given code above to this like in the below attached screenshot.

{% if product.tags contains 'pre-order-product' %}
    <a href="your_custom_url" class="button custom_url">Pre-order</a>
{% endif %}

4. Paste below code at top of the file like in the below attached screenshot.

NOTE: The below given CSS is provided based on the default dawn theme. If you want to customize it, you can contact us to help you on this.

{% if product.tags contains 'pre-order-product' %}
  {%- style -%}
    .custom_url {
      width: 100%;
      margin: 0px !important;
    }
    .product__info-container .product-form {
        margin: 0px !important;
    }
    /* CSS code to hide the buy button */
    .shopify-payment-button {
        display: none !important;
    }
  {%- endstyle -%}
{% endif %}

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Julianinho]

Thank you for your help 🙂

I will try this!!

This solution can work if the custom url I want is different for each product?

[Vinsinfo · Accepted solution]

@Julianinho No, it will works only if the custom URL is same for all products. If you want to use different custom URL for each product, we can use metafields instead of tags. To create metafields and use it for each product, please follow below steps and let me know whether it is helpful for you.

NOTE: Kindly ignore previous solution if you are going to use different custom URL for each product.

Step 1: Create a metafield definition:

1. From admin, go to "Settings" -> "Custom data".

2. In the Metafield definitions section, click "Products" like in the below attached screenshot.

3. Click "Add definition".

4. Name your metafield definition like "custom_url". Click "Select type" and select the "URL". Please refer the below attached screenshot.

5. Save the metafield.

Step 2: Add values to product metafields:

1. From admin, go to "Products".

2. Click a product, at the end of the product page, the created metafield "custom_url" will be displaying.

3. Click it and enter the custom URL for the specific products that you want to redirect. Leave the field blank for the other products that you don't want redirection.

Step 3: Add custom URL value in theme code:

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search for the "main-product.liquid" file and locate the code "{%- when 'popup' -%}". Add the below given code above to this like in the below attached screenshot.

{% if product.metafields.custom.custom_url != blank %}
  <a href="{{ product.metafields.custom.custom_url }}" class="button custom_url">Pre-order</a>
{% endif %}

4. Paste below code at top of the file like in the below attached screenshot.

NOTE: The below given CSS code is provided based on the default dawn theme. If you want to customize it, you can contact us to help you on this.

{% if product.metafields.custom.custom_url != blank %}
  {%- style -%}
    .custom_url {
      width: 100%;
      margin: 0px !important;
    }
    .product__info-container .product-form {
        margin: 0px !important;
    }
    .shopify-payment-button {
        display: none !important;
    }
  {%- endstyle -%}
{% endif %}

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Julianinho]

Thank you for your help 🙂