New Shopify Certification now available: Liquid Storefronts for Theme Developers

Using Custom Liquid block to add button with amazon link

INHERENT
Visitor
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: '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

 

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)
ConteurCom
Visitor
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!

INHERENT
Visitor
3 0 0

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!