Product's Custom Liquid Block - Match Dawn Theme

Store Design
1

I am working on a custom liquid block for a product page in order to insert 3 buttons which link to non-Shopify websites where I am an affiliate (librofm & bookshoporg). However, the buttons (using ) come out looking like old-school buttons from 90’s instead of buttons from the Product > Body > Rich Text > Button blocks.

So far all of the existing Liquid buttons I’ve found have been too limited (afaict) because I want these buttons to link to external websites where I am an affiliate –not to a cart, product, checkout, login, payment, nor any other predetermined Shopify link. I tried using Liquid HTML link_to, but that doesn’t get stylized as a button, it’s just text.

P.S. I am not using a 3rd party app nor paying for extra services. I feel like I am so close but have some fundamental piece of know-how missing in getting my custom liquid blocks to inherit all of the theme settings. The padding/margins are also out-of-whack and currently have some janky custom CSS where I manually set padding-left and padding-right for that one specific custom liquid block –not a good long-term solution.

2

You’d need to assign proper classes on those links.
Just look at existing buttons and try whatever classes are there.

Usually something like class="button button--primary" or class="button button--secondary" gives nice results.

As for the rest – share a preview link to the theme you’re working on (maybe some code as well) and you may get further recommendations.

3

Hi @mbowen314

In most modern Shopify themes (Dawn, Craft, Refresh, Sense, etc.), buttons use:

.button
.button--primary
.button--secondary

Best regards,
Devcoder :laptop:

4

@mbowen314 can you please share this page link where you have these buttons?

5

You’re definitely close, and this is a very common Shopify pain point—so you’re not missing something obvious. Custom Liquid blocks don’t automatically inherit the theme’s button styles, which is why they look “90s” by default. The clean solution is to reuse your theme’s existing button classes (the same ones used in Rich Text or Product blocks) and apply them to your external links, instead of relying on link_to. That way you get the exact styling, spacing, and responsiveness without hacks or extra apps. Once the correct classes are applied, most of the padding and margin issues usually fix themselves too.