How to change Font Size for Rich Text on Home Page and change button color

Store Design
1

Hi,

I have a question on how to change font size for rich text on the homepage of my store. I also wanted to change the Shop Now button color to gray. The link to my store is: www.liftchairheaven.com See below for screenshots.

Allen6224_0-1724836568645.png
Allen6224_0-1724836568645.png1688×530 115 KB

1 Like
2

@Allen6224

To change font size for rich text and background color of button you can add css code here to your theme:

Admin → Online Store → Themes → Customize Code → assets/custom.css

.rich-text .rich-text__text {
   font-size: 16px; /* Note: You can change font size as you want by change number 16 to any number you want */
}

.rich-text__blocks .button {
  background-color: gray;
  box-shadow: 0 0 0 .1rem rgb(154 153 153);
}
3

Hi @Allen6224

Go to Shopify Admin → Online Store ->Theme → Edit code->theme.liquid → Add below code before

Add this code in the end of the base.css file.

{%- if template contains 'index' -%}

{%- endif -%}
4

Hello @Allen6224

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

{% if template contains ‘index’ %}

.rich-text__blocks .rich-text__text.rte { font-size: 19px !important; } .rich-text__blocks h2.h1 { font-size: 52px !important; } .button:not([disabled]):hover{ box-shadow: unset !important; } .rich-text__blocks a.button.button--primary { background: grey !important; border: 1px solid gray !important; }

{% endif %}

niraj_patel_0-1724839511875.png
niraj_patel_0-1724839511875.png1304×345 31.9 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

Hello @Allen6224
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> section-rich-text.css
add this code at the end of the file.

.rich-text__text.rte {
font-size: 18px !important;
}
.button.button--primary {
background-color: gray !important;
}

result

18.png
18.png934×310 15.8 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

Hi @Allen6224 , kindly use the below code:

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
{%- if template contains 'index' -%}

{%- endif -%}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

7
  • Here is the solution for you @Allen6224
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
{% if template contains 'index' %}
 
{% endif %}
  • Here is the result you will achieve:

BSSTekLabs_0-1724854063234.png
BSSTekLabs_0-1724854063234.png1218×404 19.3 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.