Page Tag
Last updated
Last updated
The Page Tag is a small, eye-catching element that appears as a floating label or badge on your website. It can link to promotions, discounts, or key content (like "20% OFF" or "New Collection"), and is fully customizable in terms of spacing, color, typography, placement, and iconography.
These control the padding (space inside the tag) to make it look balanced.
Top Padding: 10px
Bottom Padding: 10px
Left Padding: 14px
Right Padding: 18px
This ensures the tag has enough spacing around its text or icon to look well-designed and readable.
Choose between a solid color or a gradient background for your tag.
#000000This is your fallback or default background color if gradient is disabled.
Enables a multi-stop gradient behind the tag.
Gradient Color 1: #EDEDED
Gradient Color 2: #F2F2F2
Gradient Color 3: #FCFCFC
Gradient Angle: 90° – vertical direction (top to bottom)
Tip: Gradients work great for soft, modern tags that don’t overpower the page.
Control the font and sizing for your tag text.
Activate Custom Font: ✅ Lets you override the default theme font.
Choose Font Family: Jost
A modern, rounded font that’s clean and easy to read.
Text Size: 15px
Text Color: #393939
Text Alignment: Right
This controls not only the text alignment, but also how the tag aligns if it's rotated.
If your tag is floating diagonally, text alignment can shift how it sits in the block.
All DevicesDetermines whether the tag appears on Desktop, Mobile, or both.
Set exact placement of the tag if you’re using the "Custom" alignment option.
Top Offset: 500px
Left Offset: 500px
Right Offset: 200px
Bottom Offset: 199px
Top Offset: 300px
Left Offset: 200px
Right / Bottom Offset: (optional)
These values control exactly where on the screen your tag floats — ideal for fixed corner positions or unique placements over product content.
Tag Content: "20% OFF"
This is the visible text inside the tag.
Tag URL: Paste the link you want the tag to point to (e.g. /collections/sale).
Use this to drive traffic to sales, product launches, or any promotional page.
You can add a custom icon inside the tag by pasting SVG code.
Activate SVG Icon: ✅
Desktop: 24px
Mobile: 20px
SVG icons allow for pixel-perfect, scalable visuals that look sharp on all devices.
The Page Tag is a powerful micro-component for promotions, announcements, or callouts. With its:
Custom gradient or solid background
Precise padding and placement control
Font and icon integration
Device-based visibility
…it gives you attention without disruption — helping to guide your visitor’s focus in a smooth, branded way.
SVG Icon Code: Paste inline SVG code (like from ).
