How to customize colors of elements in the Frequent Bought widget?

Modified on Sun, 10 Nov at 9:46 AM

To customize the color of elements in the Frequently Bought widget, please follow the steps below:

1. Add the following code to the theme.liquid file, placing it before the </head> tag:

{% render 'amote-custom' %}

2. Create a new .liquid file named amote-custom.liquid.

3. In the amote-custom.liquid file, add the following code:

<style>
  .amote-app[widget='recommend-product'] .RecommendProduct__title:after {
    border-color: #000 !important; /* Color of the underline below "Recommended Products" */
  }
  .amote-app[widget='recommend-product'] .RecommendProduct__btnPrev svg path,
  .amote-app[widget='recommend-product'] .RecommendProduct__btnNext svg path {
    fill: #000 !important; /* Color of the Next/Prev buttons */
  }
  .amote-app[widget='recommend-product'] .RecommendProduct__btnPrev:disabled svg path,
  .amote-app[widget='recommend-product'] .RecommendProduct__btnNext:disabled svg path {
    fill: #747474 !important; /* Color of the Next/Prev buttons when disabled */
  }
</style>

Explanation of Each Line:

Line 3: Sets the color of the underline beneath the "Recommended Products" title.
Line 7: Sets the color for the Next/Prev buttons.
Line 11: Sets the color for the Next/Prev buttons when they are disabled (e.g., when at the beginning or end of the list).

Should you need any further information, please do not hesitate to contact us directly at support@amote.app