The Site Component exposes global site information such as the site name, logo, description, contact details, and configuration settings. It is typically used in headers, footers, sidebars, SEO blocks, and anywhere theme code needs access to site‑level metadata.
Activate the component by adding:
data-v-component-site
The component automatically loads the current site unless a specific site ID is provided.
Component Options
Options are added as HTML attributes using the data-v-* syntax.
| Option | Attribute | Description | Default |
|---|---|---|---|
| language_id | data-v-language_id |
Language for site description and meta fields | Current language |
| site_id | data-v-site_id |
Site ID to load (useful in multisite setups) | Current site |
Component Properties
All site fields are exposed through data-v-site-* attributes. The following tables group them by purpose for easier reference.
Branding & Identity
| Property | Attribute | Description |
|---|---|---|
| logo | data-v-site-logo |
Main site logo |
| logo-sticky | data-v-site-logo_sticky |
Logo used when header becomes sticky |
| logo-dark | data-v-site-logo_dark |
Logo for dark themes |
| logo-dark-sticky | data-v-site-logo_dark_sticky |
Sticky version for dark themes |
| favicon | data-v-site-favicon |
Favicon URL |
| webbanner | data-v-site-webbanner |
Banner image used in themes |
| url | data-v-site-url |
Base site URL |
| full-url | data-v-site-full_url |
Full domain URL |
Contact & Company Information
| Property | Attribute | Description |
|---|---|---|
| admin-email | data-v-site-admin_email |
Email used for system notifications (orders, signups) |
| contact-email | data-v-site-contact_email |
Public contact email |
| address | data-v-site-address |
Physical address |
| phone-number | data-v-site-description-phone_number |
Public phone number |
| company | data-v-site-company |
Company name |
| vat-id | data-v-site-vat_id |
VAT/tax ID |
| geocode | data-v-site-geocode |
Geolocation data (if used by theme) |
Description & SEO
These fields come from the description object.
| Property | Attribute | Description |
|---|---|---|
| title | data-v-site-description-title |
Site title |
| description | data-v-site-description-description |
Site description |
| meta-keywords | data-v-site-description-meta_keywords |
SEO keywords |
| meta-description | data-v-site-description-meta_description |
SEO description |
Localization & Formatting
| Property | Attribute | Description |
|---|---|---|
| language_id | data-v-site-language_id |
Default language ID |
| language | data-v-site-language |
Language code (e.g., en) |
| currency_id | data-v-site-currency_id |
Default currency ID |
| currency | data-v-site-currency |
Currency code (e.g., USD) |
| timezone | data-v-site-timezone |
Timezone offset |
| date_format | data-v-site-date_format |
Date formatting string |
| time_format | data-v-site-time_format |
Time formatting string |
| weight_type | data-v-site-weight_type |
Weight unit (e.g., kg) |
| length_type | data-v-site-length_type |
Length unit (e.g., cm) |
Image Processing Settings
These settings define how images are resized across the site.
| Property | Attribute | Description |
|---|---|---|
| post_xlarge_width | data-v-site-post_xlarge_width |
Width for extra‑large post images |
| post_xlarge_height | data-v-site-post_xlarge_height |
Height for extra‑large post images |
| post_xlarge_method | data-v-site-post_xlarge_method |
Resize method |
| post_large_width | data-v-site-post_large_width |
Width for large post images |
| post_large_height | data-v-site-post_large_height |
Height for large post images |
| post_large_method | data-v-site-post_large_method |
Resize method |
| post_medium_width | data-v-site-post_medium_width |
Width for medium post images |
| post_medium_height | data-v-site-post_medium_height |
Height for medium post images |
| post_medium_method | data-v-site-post_medium_method |
Resize method |
| post_thumb_width | data-v-site-post_thumb_width |
Thumbnail width |
| post_thumb_height | data-v-site-post_thumb_height |
Thumbnail height |
| post_thumb_method | data-v-site-post_thumb_method |
Resize method |
| product_xlarge_width | data-v-site-product_xlarge_width |
Product image width (XL) |
| product_xlarge_height | data-v-site-product_xlarge_height |
Product image height (XL) |
| product_xlarge_method | data-v-site-product_xlarge_method |
Resize method |
| product_large_width | data-v-site-product_large_width |
Product image width (L) |
| product_large_height | data-v-site-product_large_height |
Product image height (L) |
| product_large_method | data-v-site-product_large_method |
Resize method |
| product_medium_width | data-v-site-product_medium_width |
Product image width (M) |
| product_medium_height | data-v-site-product_medium_height |
Product image height (M) |
| product_medium_method | data-v-site-product_medium_method |
Resize method |
| product_thumb_width | data-v-site-product_thumb_width |
Product thumbnail width |
| product_thumb_height | data-v-site-product_thumb_height |
Product thumbnail height |
| product_thumb_method | data-v-site-product_thumb_method |
Resize method |
| image_format | data-v-site-image_format |
Output format (e.g., webp, jpg) |
| image_quality | data-v-site-image_quality |
Compression quality |
Comments Settings
| Property | Attribute | Description |
|---|---|---|
| close_comments_days_old | data-v-site-close_comments_days_old |
Auto‑close comments after X days |
| thread_comments_depth | data-v-site-thread_comments_depth |
Maximum nested comment depth |
| comments_per_page | data-v-site-comments_per_page |
Comments per page |
| default_comments_page | data-v-site-default_comments_page |
Show newest or oldest first |
| comment_order | data-v-site-comment_order |
Sort order (asc or desc) |
Order & Invoice Settings
| Property | Attribute | Description |
|---|---|---|
| invoice_format | data-v-site-invoice_format |
Format string for invoice numbers |
| order_id_format | data-v-site-order_id_format |
Format string for order IDs |
| processing_status_id | data-v-site-processing_status_id |
Default processing status |
| complete_status_id | data-v-site-complete_status_id |
Default complete status |
HTML Example
<div data-v-component-site>
<img data-v-site-logo alt="Site logo">
<h1 data-v-site-description-title></h1>
<p data-v-site-address></p>
</div>
This example loads the current site and displays the logo, title, and address.