Page Tag

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.

---

1. Spacing Options

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.

---

2. Background Customization

Choose between a solid color or a gradient background for your tag.

Solid Background Color: #000000

This is your fallback or default background color if gradient is disabled.

Activate Gradient Background: ✅

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.

---

3. Typography Options

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.

---

4. Text Styling

• 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.

---

5. Device Display Settings

Device Selection: All Devices

Determines whether the tag appears on Desktop, Mobile, or both.

---

6. Custom Positioning

Set exact placement of the tag if you’re using the "Custom" alignment option.

Desktop Position

• Top Offset: 500px

• Left Offset: 500px

• Right Offset: 200px

• Bottom Offset: 199px

Mobile Position

• 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.

---

7. Tag Content & Link

• 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.

---

8. SVG Icon Support

You can add a custom icon inside the tag by pasting SVG code.

• Activate SVG Icon: ✅

• SVG Icon Code: Paste inline SVG code (like from Bootstrap Icons).

SVG Icon Size

• Desktop: 24px

• Mobile: 20px

SVG icons allow for pixel-perfect, scalable visuals that look sharp on all devices.

---

Summary

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.