How can I customize the Fether widget? Your app currently offers only basic customization options

Our app currently only has a few basic customizations, but if you want to add more detailed options such as changing colors, font sizes, etc., you can add the following code to make those changes.

1. Navigate to the Theme Editor:
   • Go to Sales Channels → Online Store → Themes.
   • Select the theme you want to edit.
   • Click the three dots (⋮) and choose Edit code.
2. Create the fether-custom.liquid file:
   • In the left-hand sidebar, find the Snippets folder.
   • Click Add a new snippet, name the file fether-custom.liquid, and click Done. 
3. Render the fether-custom.liquid File:
   • Open the theme.liquid file.
   • Decide where you want the fether-custom.liquid content to appear (typically before the </head> tag, depending on your needs).
   • Add the following line of code at the chosen location:

     {% render 'fether-custom' %}
     

4. Insert Custom Code:
   • Open the newly created fether-custom.liquid file. 
   • Paste your custom code (or the code provided by our app) into this file
     
   • Note: You don't necessarily need to create a separate file in Step 2. You can directly insert the code at the end of the theme.liquid file. However, we recommend using a separate file for easier management.
5. Customize the Widget:
   • The following code allows you to adjust the widget’s color, font, and background color.
   • You can modify the color codes as needed (no need to select everything).
   • Basic CSS knowledge is required for modifications.
   • If you're unsure how to make these changes, feel free to contact us for assistance.


<style>
  /* Font family of the widget */
  .fether-widget * {
    font-family: Assistant, sans-serif !important;
  }
  
  /* Background color of the widget */
  .fether-widget {
    background: #f0d6d6 !important;
  }


  /* Font size and color of the widget title */
  .ft-slider__title {
    font-size: 20px !important;
    color: blue !important;
  }


  /* Font size and color of the product title */
  .ft-slider__item-info a {
    font-size: 20px !important;
    color: red !important;
  }


  /* Background color of the 'Add to Cart' button on the product page */
  div[id*='ft-slider'] .ft-btn-add-to-cart {
    background: #111 !important;
  }


  /* Background color of the 'Add to Cart' button in the cart drawer */
  #ft-slider-cart-drawer .ft-btn-add-to-cart {
    background: #222 !important;
  }


  /* Background color of the 'Add to Cart' button on the cart page */
  #ft-slider-cart-page .ft-btn-add-to-cart {
    background: #333 !important;
  }
</style>