Design & Customization
By James
By James
Customize contest colors, images, logos, buttons, and post-entry messaging.
Customizing Your Contest
The Design tab lets you control how your contest looks to customers. You can set colors, customize button text, and configure what information is displayed — all with a live preview. Accessing the Design Tab 1. Open the contest you want to customize. 2. Click the Design tab. Colors Three color settings control the look of your contest: Primary color (default: #000000) Used for the submit button and accent elements. Choose a color that matches your brand or stands out to draw attention. Background color (default: #ffffff) The background color of the contest form area. Text color (default: #333333) The color used for all body text, labels, and descriptions. Each color has a color picker — click the swatch to open it, or type a hex value directly. Button Text Customize the call-to-action text on the submit button. Default is "Enter to Win". Other ideas: "Submit Entry", "Enter Now", "Join the Giveaway", "Count Me In" Display Options Toggle what information appears on the contest form: - Show dates — Display the contest end date on the form (default: off) - Show terms — Show a "Terms & Conditions" link below the form (default: on, if terms are set) Live Preview As you make changes, the preview panel on the right updates in real time. This shows you exactly how the contest will appear to customers on the standalone contest page. Saving Changes Click Save at the bottom of the Design tab to apply your changes. Colors and text settings are applied immediately to: - The standalone contest page - Theme blocks (popup and form). Popup always uses contest design colors, while form blocks can optionally override colors in theme settings.
Images & Logo
Adding images to your contest makes it more visually appealing and helps communicate your brand. You can add a header image and a logo, both optional. Header Image The header image appears as a full-width banner at the top of your contest, above the title. To add a header image: 1. Go to the Design tab of your contest. 2. In the Header Image section, click Upload image. 3. Select an image file from your computer. 4. The image uploads to your Shopify file storage and appears in the preview. Requirements: - Maximum file size: 10 MB - Supported formats: JPEG, PNG, GIF, WebP, SVG Tips: - Use a wide, landscape-oriented image for best results — it displays full-width with a max height of 200px and is cropped to cover. - Keep important content centered, as edges may be cropped on different screen sizes. To replace or remove: - Click the image to upload a replacement. - Use the remove button to delete the header image entirely. Logo The logo appears above the contest title as a smaller, contained image. It's great for adding your brand mark or a contest-specific icon. To add a logo: 1. Go to the Design tab of your contest. 2. In the Logo section, click Upload image. 3. Select an image file from your computer. Requirements: - Maximum file size: 10 MB - Supported formats: JPEG, PNG, GIF, WebP, SVG Logo size: Use the size slider to adjust the logo dimensions. The logo displays as a square with rounded corners. - Minimum: 1px - Maximum: 200px - Default: 48px The logo uses object-fit: contain, so it won't be stretched or distorted regardless of the original image proportions. How Images Display | Location | Header Image | Logo | |---|---|---| | Standalone contest page | Full-width banner at top | Above title, centered | | Theme blocks (popup/form) | Shown if available | Shown if available | | Mobile devices | Scales to fit width | Uses configured size | Both images load lazily for better performance and include proper alt attributes for accessibility.
Success Page
After a customer submits their entry, they see a success message confirming their submission. You can customize this message to match your brand voice. Customizing the Success Message On the Design tab, you'll find two fields: Success heading (default: "You're Entered!") The main heading that appears after a successful entry. Keep it short and celebratory. Success message (default: "Thank you for entering our contest. We'll notify winners when the contest ends. Good luck!") A longer message below the heading. Use this to set expectations — when will winners be announced, how will they be contacted, etc. What Customers See After submitting the entry form, the form is replaced with: 1. The success heading in large text 2. The success message below it 3. The contest's color scheme is maintained The success state applies to: - The standalone contest page - Theme blocks (popup and form). The form block can optionally override the success message in theme settings. Ideas for Success Messages - "Thanks for entering! We'll email the winner on [date]." - "You're in! Share this contest with friends to spread the word." - "Entry confirmed. Keep an eye on your inbox — we'll announce the winner soon." - "Good luck! Winners will be contacted by email within 48 hours of the contest ending." What Happens on Repeat Visits If a customer returns to the contest page after already entering: - They can re-enter if the "entries per customer" limit hasn't been reached - If they've reached the limit, the form shows a message indicating they've already entered