How to Customize Widget Colors | PersonalizerAI Docs

You can easily change the colors of widgets displayed on your Shopify store using CSS. Here's how you can customize specific elements:

Change the Product Title Color

1. Identify the CSS class for the product title within the widget. The class for product titles is personalizerai_product__title.

2. Write the CSS styles to change the text color as desired.

.personalizerai_product__title {
  color: royalblue;
}

3. Navigate to the Personalizerai App Embed Settings in shopify theme editor.

4. Add the copied css to update the product title color. Once applied, all product titles within the card widgets will reflect the new color.

1. Find the CSS class for the "Add to Cart" button. The class for the button is personalizerai_product__add-to-cart.

2. Write the CSS styles to modify the button

.personalizerai_product__add-to-cart {
  background-color: #001dbf;
  color: white;
}

3. Add the CSS to the App Embed Settings.

Note: Changes applied via the App Embed Settings will affect all widgets of the specified type, ensuring consistent styling across your store.