Home Customize Design
🎨

Customize Design

Everything you need to know about customizing timer bar design
By Ivy Bennett and 1 other
• 5 articles

Responsive Design in Timer Bar Builder

PageUni Countdown Timer supports responsive design. This means your timer bar automatically adjusts its layout and style to fit different screen sizes—from small smartphones to large desktop monitors, your timer bar on store pages will always look good and work well. When you're customizing the design, the PageUni Countdown Timer's timer builder uses a mobile-first approach—it starts with small screens like smartphones, then scales up to larger devices like tablets and desktops. This helps ensure a high-quality user experience for your timer bar on mobile, where most of your traffic likely comes from. Responsive Design Example Let’s walk through a timer bar design example to see how responsive design works in action. After creating the campaign, we selected a Cyber Monday template as the starting point for our timer bar design. Once the template was set, we switched to the Design tab in the timer bar builder to start customizing the look. By default, you’ll be designing for mobile devices first, and the preview area shows how the timer bar will look on a mobile screen. Customize design in mobile device is a default option Currently, any changes you make in the mobile view apply to all device sizes. For example, we decided to reduce the font size of the timer bar elements, since the mobile preview showed that the original sizes looked too large for the campaign we were planning. Small font sizes in mobile After making the changes, we switched to other device previews—like mobile landscape, tablet, and desktop—and noticed that the font sizes looked smaller there too. That’s one of the main ideas behind mobile-first design: if you don’t set anything different for larger screens, they’ll simply follow the mobile design. The font sizes also appear smaller in large devices When switching between devices, select the elements with adjusted font sizes and check the font size value in their design settings card. You’ll see that it matches the font size set in the mobile view. Here’s a helpful tip: by reviewing the design settings card for each element across different devices, you can easily see how the design adapts to various screen sizes. Check font size while switching devices By understanding mobile-first responsive design, we know that we should start most of our design work with mobile devices as the base. Make the majority of changes in the mobile view, and once the design meets your requirements on mobile, switch to larger devices to check if it works as expected. If necessary, make further adjustments to override the mobile design for those larger screens. Next, we switched to the tablet view to check the design. We felt the font size needed to be slightly larger on this device, as the text might be hard for customers to read. So, in the tablet view, we increased the font size in the design settings card. Increase font size on tablet view Now, when we switch back to the mobile and mobile landscape views, the original smaller font size is still there. But on the tablet and desktop views, the font size has been increased. That’s a simple example of how mobile-first responsive design works in the timer bar builder, using font size as a case. Most of the design properties in the Design tab follow the same logic and workflow. Feel free to explore and try out your own design customizations. Extra Tools You can switch the responsive design device view in two places: from the top bar of the preview area, or from the top-right corner of the element’s design settings card. Switching devices In the top-right corner of an element’s design settings card, there are reset buttons that allow you to reset your design changes. The first button resets the settings within the card for the current device only, while the second button resets all settings within the card across all devices. Reset buttons Responsive Design Breakpoints We use the following width ranges as breakpoints for responsive design: - Mobile: less than 768px - Mobile Landscape: 768px to less than 1024px - Tablet: 1024px to less than 1280px - Desktop: 1280px and above These proven breakpoints ensure that your timer bar layout and style adjust smoothly across different screen sizes. If you need more breakpoint options, you can use our Custom CSS feature to set them up just the way you need. Custom CSS

Last updated on Jun 07, 2025

Custom Placement Timer Bar

Each type of timer bar in PageUni Countdown Timer comes with its own preset placement options. For example, the Product Page Bar includes two default placements: Add-to-cart top and Add-to-cart bottom. However, in some cases, these preset positions might not meet your specific needs. Or, if you're using an older store theme that doesn't support Shopify Online Store 2.0 app blocks, you may need to place the timer bar manually using a code snippet. That’s where the custom placement comes in. It gives you full control over where to display your timer bar. In this guide, we’ll walk you through how to use it. Where to Setup Custom Placement In the Design tab of the timer bar builder, open the "Timer bar" card. In the "Placement" section, set the "Display position" to "Custom". After setting it to "Custom", save and publish your campaign. Then, you can continue in the Shopify theme editor to complete your custom placement setup. Custom placement options Using Custom Placement with Shopify App Blocks Using Shopify app blocks is a quick and easy way to set up custom placement. First, click the copy button next to "Timer bar ID", then click "Open theme editor" to go to the Shopify theme editor page. Copy timer bar ID and go to Shopify theme editor In the opened theme editor, switch to the page where you want the timer bar to appear. Find the place where you'd like to place the timer bar, then click "Add section" or "Add block". In the pop-up, go to the Apps tab and select PageUni Countdown Timer. For example, as shown below, the timer bar is added right below the Header section on the Home page. Add PageUni Countdown Timer app block After adding the block, you’ll see the PageUni Countdown Timer block appear in the sidebar. Click the block to open its settings. Paste the timer bar ID you copied earlier into the input field, then click Save. The timer bar, based on your campaign settings, will appear exactly where you placed the block in the theme editor. That’s it—your custom placement is now all set. Paste timer bar ID and save Paste timer bar ID and save step 1 Paste timer bar ID and save step 2 & 3 Note: You can move the timer bar block by dragging the "six dots" icon on the left side of the app block. Move app block If you run into any issues along the way, feel free to reach out to our support team — we’re always happy to help! Using Custom Placement with Code Snippet Using the code snippet method is not recommended in most cases. It’s mainly provided to support older themes that don’t work with Shopify app blocks. If you choose to use this method, we recommend working with a developer, and making all changes on a duplicated version of your theme to avoid any issues with your live store. First, click the copy button next to the "Timer bar code snippet" to copy the code. Copy code In your Shopify admin, go to Online Store > Themes, find the theme you want to update, click the three dots, and choose Edit code. You’ll then be taken to the theme’s code editor. Go to theme code editor In the theme code editor, open the file where you want to place the timer bar, paste the code snippet you copied earlier, and save your changes. After that, the timer bar will appear exactly where you inserted the code snippet, following your campaign settings. Edit code Note: If the timer bar doesn't display properly after following the steps above, try using a custom theme section that includes the timer bar code snippet. For more details on how to create a custom theme section, please refer to this guide and this reference.

Last updated on Jun 07, 2025

Basic Design Options in Timer Bar Builder

PageUni Countdown Timer offers a wide range of design options for both the timer bar and its elements, including Basic Design Options and Advanced Design Options. In most cases, when starting from one of our templates, the Basic Options are enough to meet your customization needs. However, if you have more specific or advanced requirements, you can use the Advanced Options to make further adjustments. In this article, we’ll walk you through the Basic Design Options. Note: Before you start exploring the design settings, we suggest taking a quick look at how responsive design works in the timer bar builder. Both the timer bar and its elements have their own Basic Design Options. For example, the Countdown timer element includes sections like "Timer style" and "Time unit labels font", while the Button and Coupon elements have option sections for customizing their icons. Once you enter the Design tab in the timer bar builder and select an element, you'll see these Design options. Design options Note: Most design options can be reset to default, so feel free to explore and make adjustments in the builder. Countdown Timer Bar The options in the "Countdown Timer Bar" card are used to customize the design of the entire timer bar. The "Placement" section lets you control where the timer bar appears on your store page. You can also use it to set a custom placement if needed. Timer bar placement The "Background" section allows you to customize the timer bar’s background (color, gradient or image). Timer bar background The "Lottie background" sections let you add a Lottie animation as the background of your timer bar. Timer bar Lottie Background 1 Timer bar Lottie Background 2 Main Message The "Main message" element displays the primary text content within the timer bar. The "Font" section lets you customize key typography settings for the Main message, including font family, font size and font weight. Main message font The "Typography" section lets you adjust the Main message’s line height, letter spacing, word spacing, alignment and text transform. Main message typography The "Link text style" section lets you customize the color and underline style of any link text within the Main message. Main message link text style Note: For more information on editing and designing text content, refer here. Secondary Message The "Secondary message" element displays the secondary text content within the timer bar. Its design options are the same as those for the Main message. Countdown Timer PageUni Countdown Timer offers highly customizable settings for the "Countdown timer" element. The "Timer style" section lets you customize the timer's style type (like flip clock), time unit color, and time unit corner radius. Countdown timer style Countdown timer style types The "Timer font" section lets you customize the font used for the numbers in the timer. Countdown timer numbers Countdown timer font The "Time unit labels font" section lets you customize the font used for the time unit labels (like days, hours, minutes, and seconds). Countdown timer unit labels Countdown timer unit labels font The "Time unit gaps" section lets you customize the gaps between time units. You can adjust the gap width, gap character, and set the font color, size, and weight. Timer unit gaps Timer unit gaps design options Button The "Button" element is typically used as the timer bar’s call-to-action (CTA), guiding users to a target page. The "Button style" section lets you choose whether to show text, an icon, or both—for example, you can create an icon-only button if needed. You can also adjust the icon position, spacing between the icon and text, and the button’s background color. Button style The "Font" and "Typography" sections let you customize the design of the text inside the button. Button font design options The "Icon source" and "Icon size & color" sections let you choose which icon to use and customize its appearance. Icon source and Icon size & color Coupon The "Coupon" element serves as the timer bar’s CTA, allowing users to quickly access a discount code. The "Coupon style" section lets you choose whether to show an icon, adjust the icon position, set the spacing between the icon and text, and change the coupon’s background color. Coupon style The "Font" and "Typography" sections let you style the text inside the Coupon element. Font and Typography The "Icon source" and "Icon size & color" sections let you choose which icon to use and customize its appearance. Icon source and Icon size & color Close Button The "Close button" lets users click to close the entire timer bar. The "Presets" section lets you quickly style the Close button by choosing a preset. Close button presets The "Button style" section lets you set the Close button’s size, fill color, border color, border radius, and rotation. Close button style The "X icon style" section lets you customize the "x" inside the Close button, including its color and stroke width. X icon style

Last updated on Jul 13, 2025

Advance Design Options in Timer Bar Builder

PageUni Countdown Timer offers a wide range of design options for both the timer bar and its elements, including Basic Design Options and Advanced Design Options. In most cases, when starting from one of our templates, the Basic Options are enough to meet your customization needs. However, if you have more specific or advanced requirements, you can use the Advanced Options to make further adjustments. In this article, we’ll walk you through the Advance Design Options. Note: Before you start exploring the design settings, we suggest taking a quick look at how responsive design works in the timer bar builder. Both the timer bar and its elements support Advanced Basic Design Options. After entering the Design tab in the timer bar builder and selecting an element, click the "Advance" tab at the top of the element card to access these options. Advance design options Note: Most design options can be reset to default, so feel free to explore and make adjustments in the builder. Visibility Use the "Visibility" options to control whether the selected element shows on different devices. Just toggle each option on or off as needed. Visibility Spacing The "Spacing" options let you control the margin and padding of the selected element. Spacing Border Use the "Border" options to adjust the color, width, and corner radius of the selected element’s border. Border Background The "Background" options let you set a background color, gradient, or image for the selected element. Background Position The "Position" options let you adjust the placement of the selected element within the timer bar. Positon Effect The "Effect" options let you customize the opacity, scale, and blur effects of the selected element. Effect Box Shadow The "Box shadow" options let you add and customize a shadow around the selected element’s container. Box shadow Text Shadow The "Text shadow" options let you apply a shadow effect to the text content of the selected element. Text shadow

Last updated on Jul 13, 2025