The Styles section allows you to configure the visual appearance of many elements across your website. These settings control how dates, buttons, content layouts, galleries, and other interface components are displayed.
To access these settings, go to:
Design → Styles
Changes made here affect the entire website and provide centralized control over common design elements.
Appearance
The Appearance tab controls general visual elements used throughout the site.
- Date Format – Select how dates appear across the website.
- Date Style – Choose the shape used for date badges.
- Date Colors – Set the text and background color used for date displays.
- Date Size – Control the size of date elements.
The Branding settings allow you to define the primary color palette used throughout the site. These colors are referenced by various interface components and templates.
Additional options include:
- Texture Directory – Select a directory that contains background textures available for use in advanced templates.
- Link Icons – Enable or disable icons that appear next to certain types of links.
Buttons
The Buttons tab allows you to configure the appearance and behavior of the different button styles used throughout the website.
Each button style can be customized with the following settings:
- Button Color – Background color of the button.
- Text Color – Color of the button text.
- Hover Colors – Colors used when the user moves their mouse over the button.
- Shape – Button shape (square, rounded, or circular).
- Size – Button size ranging from small to extra-large.
- Fill Style – Background, outline, or transparent style.
- Hover Animation – Optional animation applied when hovering over the button.
A live preview is displayed so you can immediately see how your changes will appear.
Content
The Content tab controls how structured content such as news items and store products are displayed.
For News pages, you can configure:
- Layout style
- Which metadata fields are displayed
- Image sizing and display rules
- Related items
- Page title block behavior
You may also control whether elements such as titles, descriptions, images, categories, tags, authors, and media types appear in news listings.
For Store pages, similar options allow you to control:
- Item details display
- Related items
- Product image display and sizing
- Offerings display
The First Section Title Suppression option allows you to hide the title of the first section on certain types of pages when it would otherwise duplicate the page title.
Components
This section includes styling options for certain built-in components.
Currently this includes configuration for the Scroll to Top button, where you can control:
- Whether the button is displayed
- Button color and icon
- Button position on the page
- Button animation
- Scroll animation style
- Scroll speed
- Button shape, border, and transparency
Galleries
The Galleries tab defines the default behavior for image gallery sections.
Viewer options include:
- Lightbox viewer
- SimpleViewer
- Masonry gallery
Additional settings allow you to configure:
- Thumbnail display styles
- Masonry gallery dimensions
- Number of columns
- Spacing between images
- How many images load initially
- How many images load when expanding the gallery
Optional features include gallery search, lazy loading, thumbnail navigation, and slideshow behavior.
Layout
The Layout tab controls default spacing used for sections and sub-sections across the website.
These settings define the default padding (inner spacing) and margin (outer spacing) used when rendering page sections.
- Padding Top / Right / Bottom / Left
- Margin Top / Right / Bottom / Left
Separate settings are available for both main sections and sub-sections.
Adjusting these values allows you to control how much spacing appears between content blocks throughout the site.