Style and install your discount banner
Customize the banner, control guest messaging, and choose a single storefront installation method.
What you’ll accomplish
Your saved banner design is installed on the published theme, with product access and guest messaging reviewed separately.
Before you start
- Configure a valid price for at least one product.
- Have access to edit and save the intended Shopify theme.
- Use an active, published test product and its configured variant for verification.
Choose the banner's appearance
Open Settings
The page is titled Widget Styling Settings. Start in Presets with Professional, Minimal, Outline, Bold, or Pill, or customize the current design.
Choose Colors & Style
Adjust the icon, border, background, and text colors. Review border width and style, border radius, and box shadow beside the preview.
Match the banner typography
Open Typography
Use theme font follows the storefront font. The screen explains that turning it off uses Arial / sans-serif.
Review size, weight, and alignment
Use inherit to follow the theme size, or enter a size such as 16px. Choose the font weight and text alignment, then check the preview before saving.
Set spacing and mobile overrides
Open Layout
Set width and maximum width, padding, margins, icon size, and icon-to-text spacing. Choose an icon that fits your banner.
Review mobile behavior
Expand Mobile overrides and enable them if needed. They apply at widths of 749px and below. Use Preview mobile overrides to inspect the design simulation.
Separate messaging from discount access
Open Message & Login
Choose Dollar savings, Percentage savings, or Custom under Message style. Custom messages support amount, percentage, and icon tokens shown beside the field.
Choose Guest messaging
Use Same message for everyone, or Use a different message for guests. A separate guest message can include the Log in link.
Expose product access controls when needed
Enable customer access controls makes Discount access available on product rows. It does not make every product login-only.
Set the rule on the product
After saving settings, return to Home, edit the product, select Everyone or Logged-in customers only, and save that product.
Preview and save the design
Inspect Preview mode
Switch between Eligible customer and Guest. The preview uses example prices of 110 original, 80 selling, and 30 savings (27%). It is a design simulation.
Review Advanced CSS if used
Custom CSS is validated and scoped to PriceWrench banner content. Use the supported selectors listed in the app. External URLs, imports, at-rules, scripts, HTML, and selectors outside the banner are rejected.
Choose Save settings
Resolve any highlighted invalid values, save, and wait for Settings updated successfully. Use Reset custom CSS followed by Save settings if a CSS change needs to be removed.
Install the Discount Widget
The Discount Widget is the recommended placement method. A status such as Active on published theme confirms detection; Available, not activated and Status not verified still require attention.
Return to App setup guide
On Home, expand Install Discount Banner and choose Add Discount Widget. This opens Shopify's Theme Editor for the current theme's product template.
Place the app block
Place the Discount Widget where you want it on the relevant product template. Confirm the product you will test actually uses that template.
Save in Shopify
Save your Theme Editor change, then return to PriceWrench and choose Check installation.
Use Automatic Banner when appropriate
Choose Enable Automatic Banner
Use this alternative when the theme does not support the app-block placement you need. It opens the app embed settings in Shopify's Theme Editor.
Save the embed
Enable and save the Automatic Banner. It attempts to place the banner above the product price.
Check unusual themes
An optional custom price selector exists in the app embed settings for unusual themes. If the placement is wrong and you do not know the correct selector, ask support for help.
Verify the published storefront
Return to the app, choose Check installation, then inspect the configured product on the published storefront. Check desktop, mobile, and the intended guest or logged-in state.