New Shopify Certification now available: Liquid Storefronts for Theme Developers

Using Custom Liquid block to add button with amazon link

3 0 0

I use one of the free themes "Refresh". On the product page there is an add-to-cart button, and a buy-now button. Using the "Custom Liquid" block on theme editor, I want to add a 3rd button with "Buy on Amazon" that links to the Amazon listing of that product.


So far, I have:

{{ 'Buy on Amazon' | link_to: '', class: 'button button--full-width' }}

Which does make a button with a link, but the width is incorrect:

Shopify Button Question.JPG


I have a few questions:

1. How do I fix the width of just this button? (not all buttons on base.css)

2. How would I change the color of just this button? (not all buttons on base.css)

3. How would I have the URL link change based on the product in the current page?


Replies 2 (2)
1 0 0

Your button class reference is a fulll width button. You can probably Inspect the other buttons to see the button class they are using and use that button class rather than the full width.


I would just need a link to your site to inspect and provide you with the code to try!

3 0 0

Hi @ConteurCom 

My store product page link:


I forgot to mention that I used "button", "button--secondary", and "button--primary" as well but those came in too short (shorter than the other two buttons). As of this moment, I adjusted css style so that all buttons are full-width. But I prefer to find a way to match the original width shown in the original post's screenshot.


Thank you!