Change the Add to Cart button in Shopify

Sometimes a merchant may need to change the Add to Cart button in Shopify to point to a Contact form or some other URL. Here is a simple way to achieve this.

In this example we are using the Supply theme:

  1. From you Shopify admin, go to Online Store > Themes > Actions > Edit Code;
  2. Under Templates, click Add a new template > Create a new template for Product called alternate (or whatever you want to call it);
  3. On line 5 of this new template, change so it looks like this: {% section 'product-template-alternate' %}
  4. Now under sections on the left, Click Add a new section called product-template-alternate. Delete all the contents of this file;
  5. Open the file Sections > product-template.liquid and copy all the contents of this file and paste it into the newly created product-template-alternate.liquid file you just created in step 4. Make sure you now save this file;
  6. Now in your product-template-alternate.liquid file, scroll down to line 192. You should see an opening <button> tag. You need to delete lines 192 - 199. This should be everything in-between the opening and closing div tags;
  7. Paste this code following code in-between the div where the button code was. It should now look like this:
    Screenshot showing updated code
  8. You should check the exact address of your Contact page and make sure it matches the URL in line 192;
  9. You can remove all of line 193 if you would like to get rid of the icon;
  10. Once you're happy, save the changes;
  11. Next, in your Shopify admin click on Products and open one of the products that you want to have the new Contact button. On the right hand side towards to bottom, you should now see a "Theme Templates" panel. Click the drop down list and choose the new product.alternate template you just created:
    Screenshot showing theme templates panel in Shopify
  12. Your Add to Cart button should now look like this on the product page:
    Screenshot showing the new Add to Cart button
  13. The final step is to edit every product you need to have this alternate template and apply the alternate template for each of those products.

If you have any questions or problems please comment down below!

Back to Technology