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:

General Settings

General configurations for icons and  currency.

Typography

Control fonts and text scaling:

Buttons:

You can adjust the borders and thickness of some interactive content types, such as drawers, buttons, variants or quantity inputs.

Customize  Buttons: 

1. From your shopify admin, go to Online Store > Themes
2. Click Customize next to the theme that you want to customize.
3. Click Theme settings > Buttons.
4. By moving the range slider to change the appearance of your button Border.
5. By moving the range slider to change the Corner radius of your button.
6. Click Save.

Forms:

Inputs are interactive areas that require customer input, for example a quantity selector, an email signup form, or cart notes. 

Customize Inputs: 

1. From your shopify admin, go to Online Store > Themes
2. Click Customize next to the theme that you want to customize.
3. Click Theme settings > Inputs
4. By moving the range slider to change the appearance of your input Border.
5. By moving the range slider to change the Corner radius of your input.
6. Click Save.

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 Hot, Trend, 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

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:

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: