Replacing Shopify’s “Add to Cart” With a Link That Looks Identical / Adding Buttons in Custom Liquid

Ed Codes - Shopify DIY Tutorials · Beginner ·📰 AI News & Updates ·8mo ago
An essential skill for Shopify users. Sometimes your theme doesn't provide a button in certain sections. That's when you can create your own button using the custom liquid field. You don't want to re-invent the wheel, though, writing the CSS from scratch. Instead, we can piggyback off the existing theme button styles, by using the same CSS classes. That way, your custom button looks exactly the same as other buttons in your theme, and it stays in sync even when you change the button styles via settings. In this video, I show you how to find the CSS classes your theme is using, and re-use them in your button using the custom liquid block. The example I show is replacing "add to cart" with a "contact us" button or "get a quote" button. This is a very common task in Shopify. 👉 RELATED VIDEOS Shopify Coding 101: https://youtu.be/5z2D7dLmhfk 📢 STAY UPDATED Subscribe for more tips & tricks that I don't publish on Youtube: https://ed.codes/newsletter 🙏 SUPPORT THE CHANNEL Become a member - https://www.youtube.com/@EdCodes/join 🛠 CODE SHOP Pre-built sections & blocks. Easy copy & paste to install. https://ed.codes/shop 👍 MY FAVOURITE APPS & THEMES All listed on my website - https://ed.codes/resources 📚 MY SHOPIFY CODING EBOOK Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify. https://ed.codes/shopify-coding-handbook 👨🏼‍💻 WHO AM I? 👋 My name is Eduard. I'm a web developer specializing in Shopify. I want to help you with the tech side of your online business with simple and straight-to-the-point videos. Visit my website: https://ed.codes ⏭ CHAPTERS 00:00 Intro 00:31 Create a new template 01:05 Remove stuff 01:20 Create a simple link 02:07 Inspecting your theme's buttons 03:21 Re-using your theme's CSS 06:09 Summary #Shopify #ShopifyLiquid #DawnTheme
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related AI Lessons

Chapters (7)

Intro
0:31 Create a new template
1:05 Remove stuff
1:20 Create a simple link
2:07 Inspecting your theme's buttons
3:21 Re-using your theme's CSS
6:09 Summary
Up next
Final Step: Take the Quiz & Claim Your Certificate
Analytics Vidhya
Watch →