How to change the Buy Now button color and checkbox styling in the Fether widget using CSS?

Modified on Mon, 28 Oct at 11:24 PM

Currently, the app does not have a UI to customize those options yet. However, this feature has already been added to our roadmap, and we expect to release it soon.

For now, if you are familiar with CSS/HTML, you can create an additional Liquid file in your theme code and add some custom code to meet your requirements. Here are the steps:

Step 1: In the Snippets folder, create a custom file, e.g., fether-custom.liquid.

Step 2: Open theme.liquid, locate the </head> tag, and insert {% render 'fether-custom' %} right before it.

Step 3: Add the following code to meet the requirement. You can change the color as desired; in this case, we're using red

<style>
  .ft-checkbox input:checked+label::before{
    background: red !important;
    border-color: red !important;
  }
  .ft-btn-buy-now:after{
    background-color: blue !important;
  }
</style>

Note: When you need to update the content later, please feel free to go there and update it again.

Should you have any further concerns, please do not hesitate to contact us directly at support@fether.app