1ClickImpact

Customizing Widget Appearance

All 1ClickImpact widgets are customizable through the Shopify theme editor. This guide covers common settings and widget-specific options to help you match the widgets to your store's branding.

Accessing widget settings

To customize any 1ClickImpact widget:

  1. Go to your Shopify admin
  2. Navigate to Online Store → Themes → Customize
  3. For app embeds (Cart Widget, Footer Banner): open the App embeds panel using the toggle icon in the left sidebar, then click the widget name
  4. For theme blocks (Product Badge, Impact Details, Impact Counter): navigate to the page template where the block is placed and click on the block to open its settings

Settings appear in the right-hand panel. Changes preview in real time in the editor (except for the Cart Widget, which requires viewing on your live store).

Common settings across all widgets

Most 1ClickImpact widgets share these settings:

  • Primary / Accent color — The main highlight color used for icons, buttons, and interactive elements
  • Background color — The container or card background
  • Text color — The primary text color for headings and body copy
  • Border radius — Controls how rounded the corners of the widget container are
  • Show branding — A toggle to show or hide the small "Powered by 1ClickImpact" link

To match your store's brand, set the primary color to your brand accent color and the background to match your theme's surface color. Most stores look best with a subtle background that contrasts slightly with the page.

Product Badge settings

In addition to the common settings, the Product Badge has:

  • Style — Choose between Pill (rounded badge with background) and Inline (flat text)
  • Font size — Adjust to match your theme's product page typography
  • Accent color — Controls the info icon and popup highlight color
  • Popup background color — Sets the background of the detail popup
  • Popup text color — Sets text inside the popup

Impact Counter settings

The Impact Counter has layout-specific options:

  • Layout selection — Choose Card Grid, Hero Image, or Compact Line
  • Hero image presets — When using Hero Image layout, select from preset background images (forest, ocean, mountain scenes)
  • Heading and subtitle — Custom text fields to personalize the section

Cart Widget settings

The Cart Widget has these additional options:

  • Title and subtitle — Custom heading text displayed above impact tiles
  • Icon size — Adjust the size of impact category icons within the widget
  • Border color — Set the color of the container border

The Footer Banner offers:

  • Text size and weight — Control the font size and whether text appears in normal or bold weight
  • Border toggle and color — Add a border and set its color
  • Link URL — Where customers go when they click the banner

Tips for consistent styling

  • Use the same primary color across all widgets for a unified look
  • Match background colors to your theme's card or section backgrounds
  • Keep branding toggled on if you want to build trust through transparency; toggle it off for a cleaner look
  • Test on both desktop and mobile after making changes

Some widgets, like the Cart Widget and checkout extensions, do not fully render in the theme editor preview. Always verify your changes on your actual store URL with real products in the cart.