Theme Settings

Overview:

You can use theme settings to make changes to your online store’s typography, colors , social media links, cart  etc. When you make changes to your theme settings, the changes apply to your entire online store.


Color Scheme: 

From here, you can select the colors you want to use throughout the theme. You can create multiple unique color schemes and apply them to different sections throughout your online store.


Customize your color scheme:

  1. From your shopify admin, go to Online Store > Themes
  2. Click Customize next to the theme that you want to customize.
  3. Click the settings icon, and then click Color schemes.
  4. In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.
  5. Click the color swatch for the content type color that you want to change.
  6. To set your color, enter a hex color code or choose the color from the color picker. To set the color to transparent, delete the hex code from the text field.
  7. Click Save.

Layout Settings

Adjust the overall structure and spacing of your theme:

Setting

Description

Page Width Controls the maximum width of the page. Range: 1200px - 1700px. Default: 1440px.

General Settings

General configurations for icons and  currency.

Setting

Description

Favicon Upload a favicon icon for the browser tab.
Currency Format Choose to display the currency code next to prices. Default: Disabled.

Typography

Control fonts and text scaling:

Setting

Description

Body Font Choose a font for the site’s body text. Default: Poppins
Font Scale Adjust the scaling percentage of text sizes. Range: 90% - 110%. Default: 100%.
Headings Font Choose a font for headings. Default: Poppins 

Authentication Page: 

You can set logo banner image for all Account pages. Note – Only visible for desktop.

Customize your Authentication pages:

  1. From your shopify admin, go to Online Store > Themes
  2. Click Customize next to the theme that you want to customize.
  3. Click the settings icon, and then click Authentication pages.
  4. Click on the change button to change the color scheme. By default color scheme 4 is applied for Authentication pages.
  5. By moving the range slider to change the Top/Bottom padding.
  6. Click Save.

Custom tags

Overview

Custom tags allow you to display special badge labels (such as HotTrend, or New) on product collections or items.

Each tag defines the tag name, background color, text color, title text color, and the collection handle where it will appear.

Tag Format

Each tag should be written inside curly brackets {} in the following order:

Format:

{Hot,#ff0000,#ffffff,#ffffff,collection-handle}||

{Trend,#000000,#ffffff,#ffffff,collection-handle}


Explanation of Fields

Field Description
TagName The text that appears on the badge (e.g., HotTrendNew).
TagBackgroundColor Hex color code for the badge background (e.g., #ff0000 for red).
TagTextColor Hex color code for the text on the badge.
TitleTextColor Hex color code for the title text (if applicable).
CollectionHandle The handle (URL slug or identifier) of the collection where the badge will be displayed.

Swatches Settings

Swatches view

Select how product swatches are displayed on your storefront.

Available options:

None – Disables swatches for product variants.

Native swatches – Displays color swatches using Shopify’s built-in functionality.

Color – Shows swatches using the color code or name defined in the Color swatch values field.

Image – Displays swatches using custom image files based on the color name.

Color swatch values

Define custom color swatches using color names and values.

Format: {ColorName,#HexCode} or {ColorName,ColorValue}

Separate multiple entries using ||.

Examples:

{Dark gray,#A9A9A9}

{Hot Pink,hot-pink.png} (for image-based swatches)

When using image swatches, upload a PNG file named to match the color name (spaces replaced by hyphens).

Example: Hot Pink → hot-pink.png



Custom Tags

Badge tags

Assign visual badges to specific product tags.

Format: {TagName,#TextColor,#BackgroundColor}

Separate multiple badges using ||.

Examples:

{New,#000000,#ffffff} – Displays a “New” badge with black text on a white background.

{Trending,#ffffff,#000000} – Displays a “Trending” badge with white text on a black background.

Cart Settings

Control the cart behavior and appearance:

Setting

Description

Cart View Choose between Drawer or Page cart styles. Default: Drawer.
Enable Cart Notes Enable a field for cart notes. Default: Enabled.
Enable free shipping message bar

Select this checkbox to enable/disable the shipping bar on the cart.

Note – This feature only works with a shipping method. If you’re using multiple shipping methods, it might show false values to the customers. Refer to Free shipping guide for more information on setting up the free shipping feature in Kidu.

Message

Type any relevant message to notify the users has reached the minimum shipping price. 

Note – Use ||amount|| to display the amount within the message.

Minimum shipping price

Type any price for providing free shipping to the customers. After reaching this price, the user will be shown a success message.

Note – Users must write a number, no letters or special characters.

Enable vendor Displays the vendors of the products.
Cart drawer Color Scheme Choose a predefined color scheme to ensure consistency with the store’s branding.

Social media:

Customize  Social media: 

  1. Click Theme settings > Social media.
  2. To add links to your social media accounts, enter the links to your accounts in the fields provided under Accounts. Enter full links, such as https://instragram.com/shopify , https://facebook.com/shopify .
  3. Click Save.

Gift Card Settings

Customize the appearance of gift cards:

Setting Description
Gift Card – Banner Image The banner image appears at the top of the gift card page or section. Click Select to upload a custom banner. You can also click Explore free images to choose from available stock options.
Gift Card – Desktop Featured Image This image is shown only on desktop devices (not on mobile). It highlights the gift card visually on larger screens. Click Select to upload your desktop-specific image or choose Explore free images.
Logo – Image The logo represents your brand and may appear on the gift card, checkout page, or other sections. Click Select to upload your business logo or choose Explore free images to use available visuals.
Image Format Supported image types: JPG, PNG, SVG.
Quality Recommendation Use high-quality, correctly sized images for best results.
Editing Options You can replace or remove uploaded images anytime.
Display Note The Desktop Featured Image is visible only on desktop views, not on mobile or tablet.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us