Can I change how the rest of the widget looks?

Yes. The DESIGN tab sets fonts, colors and headers, and DESIGN CSS also sets an action's label color and its button color and shape. Anything else goes in the Widget CSS. See how to set up a giveaway on Shopify .

Can I hide the entry counters too?

Yes, with a CSS rule in the same Widget CSS field. See how to hide the entry counters on the giveaway widget .

Will the emoji look the same on every device?

Not exactly. Emojis use the device's own emoji font, so they look slightly different on iPhone, Android and Windows. An image icon looks the same everywhere.

Manage Your Campaigns

How do I use a custom icon or emoji for an entry action?

2 minutes
All plans

Quick answer

Open the entry action in the giveaway editor and click DESIGN CSS in the editing bar. Tick Custom icon (emoji), pick an emoji, click Inject into Custom CSS and save the giveaway. To use your own image, replace the emoji in the generated rule with url("...") pointing to your icon.

Every entry action shows an icon next to its title. Swap it for an emoji or your own image so the action matches your brand, for example a coffee cup on a "Visit our coffee shop" action.

How do I use an emoji?

Edit your giveaway, open the ENTRY ACTIONS tab and open the action you want to change. If the action is new, save it first.
Click DESIGN CSS in the editing bar, next to SAVE and CANCEL.
Tick Custom icon (emoji), then pick an emoji from the grid or search for one.
Click Inject into Custom CSS. The rule is added to the Widget CSS under DESIGN > CUSTOM CSS.
Click SAVE to save the giveaway, then refresh your store to check the new icon.

The tool writes the right rule for each action type, including Make a Purchase and Refer a Friend, which are built differently from the other actions. Running it again on the same action replaces its rule instead of adding a second one.

How do I use my own image?

Upload a small square icon, about 28 by 28 pixels, in Shopify Admin > Content > Files and copy its URL. The image shows at its own size, so a large file shows large.
Generate an emoji rule for the action with DESIGN CSS, as above.
Open DESIGN > CUSTOM CSS and find the line with content: " in the action's block. Replace the emoji and its quotes with url("...") and your image URL:

/* Before */
#action-123 .ico:before { content: "🎁"; line-height: 1; }

/* After */
#action-123 .ico:before { content: url("https://cdn.shopify.com/s/files/your-icon.png"); line-height: 1; }

Click SAVE and refresh your store to check the result.

Keep the GNJ-DESIGN comment lines around the block: DESIGN CSS uses them to find the action's rule. If you inject a new emoji for that action later, it replaces your image.

Where do I find the action's ID?

DESIGN CSS shows it at the top of its window, for example #action-123. You can also open your giveaway on your store, right-click the entry action and choose Inspect: the ID is on the element that wraps the action.