Using Custom Liquid block to add button with amazon link

Store Design
, , , ,
1

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: 'https://amzn.to/3LOQcqq', class: 'button button--full-width' }}

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

Shopify Button Question.JPG
Shopify Button Question.JPG601×353 13.4 KB

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?

2

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

Hi @ConteurCom

My store product page link: https://lincolnpalm.com/products/turkish-towels-3pc-bath-set-with-silverbac

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!