How to make button text bold on Shopify emails?

How to make button text bold on Shopify emails?

Deasby
Visitor
3 0 3

Struggling with this one. Previously there was an option to pick a text font and then either italic, bold, regular. However, whilst this works for block text, there no longer seems to be an option for this on buttons and/or non-text modules. Attached screen grabs to show the options I have - no bold.. 

 

It's not a deal breaker but if I can't change this, then there is a lack of consistency visually across my email newsletter and it's possibly less accessible to read too... which is just annoying! no-bold-option.pngfont options.png

Reply 1 (1)

LynasMedia
Visitor
1 0 0

Hey there,

 

I too remember the (now removed) easy font weight selection option!

 

Instead of using the standard 'Button' section, you'll now need to use a 'Custom Liquid' section.

 

I have added code (see below) to start you off, you just need to modify the CSS to your preferred style.

 

Preview (original above, custom liquid below):

Shopify Custom Liquid Button Font Weight Bold.png

 

Custom Liquid

 

<style>
  #button a {
    padding: 12px 24px;
    margin: 10px;
    border-radius: 1000px;
    display: inline-block;
    color: white;
    font-family: 'Segoe UI';
    font-size: 16px;
    font-weight: 700;
    text-decoration: none; 
    background: black;
  }
</style>

<div id="button">
  <a href="https://LynasMedia.co.uk">Button</a>
</div>

 

 

For a full width button, simply change display from 'inline-block' to 'block'.

 

I appreciate this doesn't resolve the problem across other sections, only for the 'Button' section, so you'll need to recreate any other sections yourself in HTML/CSS the same as I have done above.

 

I hope this was helpful, let me know how you get on.

 

Ellis @ LynasMedia

LynasMedia — Design and Marketing since 2012.