Shopify themes, liquid, logos, and UX
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:
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?
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!
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!
User | RANK |
---|---|
191 | |
172 | |
84 | |
57 | |
45 |
Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...
By Jasonh Dec 8, 2023Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023