Shopify themes, liquid, logos, and UX
I have a separate supplier for some of my merchandise. the product is shown in my shop but I want a customer to press the product and then they are redirected to that suppliers website to order. How do I set this up?
Thank you
Hi, @sportarainbow!
If you aren't comfortable with coding, the easiest way to add a third-party link to your products is by installing an app from our Shopify App store. This one here is a popular choice and highly rated by users, so it's worth taking a closer look at that one. There are other ones here too however, in case you'd like to browse other options.
Just a note that these apps are made by third-party developers outside of Shopify. So if you need more information about any of the app's functionality, I recommend getting in touch with the app developers as they'd be best equipped to answer app specific questions.
Kimi | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Why is it whenever you want to do the simplest of tasks on shopify you have to buy a third party app with a ridiculous yearly fee? It's so basic and frustraiting.
@sportarainbow if you want to do this directly in your theme code, here's the approach I take:
1) Decide where you want the link. For example let's say you want to change the add to cart button to "buy here" and link to them.
2) Duplicate your live and work off the backup theme so that your live site is not affected.
3) Find the code that controls that element. This article will help you identify elements from within your browser, or you can read the code in your theme files - Start with the Template product.liquid, then look for included Sections or Snippets, then read those files, eventually you'll find the add to cart button.
4) Now replace the add to cart button with your link, something like this:
{% if product.vendor == "Some Supplier" %}
<a href="https://thelink" target="_blank" class="add-to-cart">Buy it here</a>
{% else %}
<!-- leave the regular add to cart button code here -->
{% endif %}
- target="_blank" is optional, this will open the link in a new page. Some people say not to use these, some people say use them when it makes sense. In your case, it's sending the customer to a different site so you may want to keep it, assuming they will still want to have your site open while looking at buying that product.
- class="add-to-cart" controls the styling, that class name is just an example, assuming you'll want to style the button the same as your add to cart button you'll want to copy the same styles / class as the button (which that article I shared can help). Of course you can style it however you want by adding CSS to it (see that article for adding custom CSS).
+1 on @Kimi 's answer for the easy solution. I offered this solution because if you can code a feature directly into your theme code, that's the fastest method performance-wise - adding 3rd party apps that interact with your storefront often slows down the page load time because of extra resources being loaded so by habit I prefer to edit the theme directly.
Good luck, remember to do any work on a backup theme in case you make a mistake. If you need help from a developer feel free to reach out to my team at speedboostr.com/contact.
hi! this is super helpful. is there a way to edit the code for a specific product or group of products? We have another retailer that sells products that we don't sell on our site and we'd like a button that directs customers to that site to buy. Any insight is appreciated.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024