Trafik Plus
Theme settings

General settings

Updated 3 weeks ago

The theme editor's General settings control colors, typography, layout, buttons, inputs, social links, header, search, and cart across your entire store.

Favicon

Set the icon shown in the browser tab from the Favicon panel.

Colors

Customize the colors used throughout your store from the Colors panel. Click a color swatch to open the picker, or enter a hex code directly, then click Save.

General colors

These are the V1 general colors.

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

  • Body background: the background of the main content area.

  • Body text: the color of the main body text.

  • Card background: the background of individual product/content cards.

  • Card text: the text color within cards.

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

Choose colors that reflect your brand and stay readable and accessible, especially for text and links.

Separate color groups also cover buttons (general and CTA buttons like add-to-cart and checkout), the announcement bar, the header, and the footer.

Typography

Set the font family, size, line height, and letter spacing for headings and body text from the Typography panel — different sections of the site can use different fonts. See Shopify's font documentation for more.

General styles

Adjust your site's overall layout from the General styles panel:

  • Page gutter: the space between the page edges and the main content.

  • Badge border radius: the corner rounding on badges and labels.

  • Card border radius: the corner rounding on cards and product boxes.

  • Grid (vertical / horizontal): the spacing between sections and elements.

  • Overlay background color: the color used for modal and lightbox overlays.

  • Overlay background blur: the blur level applied to overlays.

Changes preview in real time in the theme editor.

Buttons

Set border radius and border width for every button on the site from the Buttons panel, previewed live in the theme editor.

Inputs

Set the border radius for input fields like search bars and contact forms from the Inputs panel.

Products

Configure how product images, badges, and ratings 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.

  • Show product description: shows the product description on product cards.

  • Show product rating: shows the star rating on product cards.

Social media

Add your Facebook, X (Twitter), Instagram, and other social profile URLs to display them in the footer. Include the full URL with the https:// or http:// prefix.

Header group

Keep the header pinned as customers scroll from the Header group panel.

Customize your header's layout and appearance, including your logo and navigation menu. Choose how navigation items display:

  • Only icons: icons only, no text.

  • Icons and text: both icons and text.

  • Only text: text only, no icons.

Enable predictive search to show suggested terms as customers type. You can also set the media aspect ratio, feature keywords, and select featured products to display in the search drawer.

Cart

Configure cart behavior from the Cart panel:

  • Cart type: a drawer or a separate page.

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

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

  • Show discount code: displays a discount-code field in the cart footer, where customers can apply a code before checkout.

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

  • Show payment icons: displays your accepted payment method icons.

  • Free shipping bar: shows a progress bar toward a free shipping threshold.

  • Free shipping threshold: the order value required to qualify for free shipping.

Currency format

Toggle whether currency codes show next to prices from the Currency format panel.

Was this helpful?
Was this helpful?