Trafik Plus
Theme settings

General settings

Updated 2 months ago

The theme editor's General settings control the logo, colors, typography, layout, animation, products, header, search, pagination, cart, cursor, and custom code across your entire Pops store. Settings are organized into panels; most apply at the theme level, while product quick add is configured per section.

Set your favicon and logo from the Logo panel. The favicon is scaled down to 32x32px for display in the browser tab.

  • Favicon image: the icon shown in the browser tab.

  • Logo image: the image used in the header and footer.

  • SVG logo: an SVG version of your logo that overrides the image logo when you want a scalable, crisp image.

Colors

Set the colors used across the store from the Colors panel. A default color scheme applies to the whole theme, and separate groups cover buttons, cards, accordions, badges, popups, prices, ratings, CTA buttons, the free shipping bar, the scrollbar, and the page frame. Each color is a swatch you can pick from a picker or set with a hex code.

  • Default color scheme: the color scheme applied across the theme.

  • Primary color: the main color used for selected elements and media backgrounds.

  • Price regular: the color of a product's regular price.

  • Price sale: the color of a product's sale price, kept visually distinct from the regular price.

  • Product rating: the color of the star rating system.

Typography

Choose the typefaces and sizes for headings and body text from the Typography panel. Each ships with a default font you can replace.

  • Font (Headings): the typeface used for headings.

  • Font size scale (Headings): scales heading sizes from 100% to 150%.

  • Border width (Headings): the width of the heading border, from 0 to 3px.

  • Uppercase headings: renders headings in all caps.

  • Font (Body): the typeface used for body text.

  • Font size scale (Body): scales body text sizes from 100% to 130%.

Border radius schemes

Choose from three border radius schemes to control the corner rounding across the theme. Each scheme sets the top-left, top-right, bottom-right, and bottom-left corner radius from 0 to 100.

Cards

Control card styling from the Cards panel, including neumorphism, border width, and which border radius scheme applies to article cards, product cards, and popups.

Layout

Control spacing and decorative page effects from the Layout panel:

  • Enable page noise: adds a subtle texture to the page background (on by default).

  • Animate page noise: animates the noise texture (on by default).

  • Show page frame: displays a frame around the page (on by default).

  • Page gutters: the horizontal spacing on mobile and desktop separately.

  • Grid spacing: the spacing between grid items on mobile and desktop separately.

Page noise and page frame controls have their own size, opacity, border radius, and stroke width settings that appear when the feature is enabled.

General styles

Adjust badge and swatch rounding, overlay blur, accordion icon style, and story bubble sizing from the General styles panel.

Animation

Set how content animates into view from the Animation panel.

  • Heading animation type: options include None, From bottom, Jumping letters, and From vertical start.

  • Heading enable split: splits the heading text for animation.

  • Heading split type: when text animates, split it by Letters, Words, or Lines.

Shadows

Set the shadow offset, blur, spread, and opacity for cards, headings, and buttons from the Shadows panel.

Buttons

Set button neumorphism, border radius scheme, border width, and hover effect type (Fade, Slide up, Pulse, or Shine) from the Buttons panel.

Inputs

Set the border radius scheme, height, and vertical and horizontal padding for input fields from the Inputs panel.

Products

Configure how product images, badges, and reviews display from the Products panel:

  • Review app: select your reviews provider from Judge Me, Loox, Okendo, Yotpo, Ryviu, Junip, Stamped, or Other.

  • Show secondary image on hover: swaps the product photo for the secondary image when a customer hovers over it.

  • Show product badge: displays product badges on product cards.

  • Size option translations: translate size option labels.

Quick add for products is enabled at the section level, not globally.

Social media

Add your X, Facebook, Pinterest, Instagram, TikTok, Threads, Tumblr, Snapchat, YouTube, and Vimeo profile URLs from the Social media panel to display them in the footer.

Header group

Control header behavior and icon layout from the Header group panel:

  • Enable sticky header group: keeps the header pinned as customers scroll (on by default).

  • Layout: choose between Only icons, Icons and text, or Text only for header items.

Enable predictive search to suggest matching products and terms as customers type (on by default).

Pagination

Turn on lazy loading pagination so collection pages load more products automatically as customers scroll rather than jumping to a new page. See Enable a View more button for product lists for the full setup and preview steps.

Cart

Configure how your cart behaves from the Cart panel:

  • Cart type: display the cart as a Page or a Drawer.

  • Show vendor: shows the vendor name for each cart item.

  • Show notes: lets customers add a note to their order.

  • Show discount code: lets customers enter a discount code at checkout.

  • Show item count: shows the number of items in the cart.

  • Free shipping threshold: the order value required to qualify for free shipping (defaults to 30).

Custom cursor

Choose a custom cursor style from the Custom cursor panel:

  • CSS cursor: uses a standard CSS cursor, with optional cursor images for the pointer and for links.

  • Line trailing cursor: adds a line that trails the cursor.

  • Sparkle trailing cursor: adds a sparkle trail behind the cursor, with configurable sparkle color, size, and spacing.

The cursor-specific settings appear only when you select that cursor type.

Date format

Choose how dates display across the store from the Date format panel, with options such as Mar 22, 2024 and 03/22/2024.

Currency format

Toggle whether currency codes show next to prices from the Currency format panel (on by default).

Custom HTML/JS

Add custom JavaScript and HTML snippets that load at the start and end of the page head and body from the Custom HTML/JS panel.

Was this helpful?
Was this helpful?