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 create and manage reusable color combinations that can be applied throughout the theme. Color schemes help maintain a consistent brand identity across different sections of your online store. You can customize colors for backgrounds, text, buttons, borders, icons, and other visual elements, then assign the desired scheme to specific sections.

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 Theme settings icon, then select Color schemes.
4. In the Schemes section, select an existing scheme or click Add scheme to create a new one.
5. Click on the color swatch of the element you want to update (such as text, background, buttons, or borders).
6. Enter a HEX color code or choose a color using the color picker.
7. Apply the desired color scheme to individual sections throughout your store.
8. Click Save to apply your changes.

Layout Settings

Adjust the overall structure, spacing, and visual appearance of your theme. These settings control the maximum content width and corner radius used across elements such as buttons, cards, images, forms, and containers to create a consistent design throughout your store.

General Settings

Manage essential theme configurations related to branding and pricing display. These settings allow you to upload a favicon for browser visibility and control how currency values appear throughout your storefront.

Typography Settings

Adjust the global font styles, font weights, text sizes, and line heights used throughout your theme. These settings help maintain consistent readability, spacing, and brand style across the storefront.

Button Settings

Customize the appearance of buttons used throughout your storefront. These settings control button border styling and corner radius to maintain a consistent visual style across primary and secondary call-to-action buttons.

Form Controls Settings

Customize the appearance of form elements across your storefront, including input fields, dropdowns, search bars, and contact forms. These settings help maintain a consistent and polished design throughout all customer interaction areas.

Product Settings

Customize the appearance and behavior of product-related elements throughout the storefront, including product variants, labels, swatches, badges, and inventory tags. These settings help merchants create a clearer shopping experience while maintaining consistent product styling.

Product Tags & Badges:

These settings control the appearance of inventory and promotional badges shown on products.

Custom Tags

Gift Card Settings

Customize the appearance and styling of the Gift Card page across your storefront. These settings allow merchants to control banner images, typography, buttons, layout styling, and color schemes to create a branded and consistent gift card experience.

Button Settings

These settings control the styling of action buttons displayed on the gift card page.

Layout Settings

Cart Settings

These settings allow merchants to control cart type, free shipping progress, discount milestones, cart timers, shipping protection, and other cart-related features to improve conversion and user experience.

Cart Text Settings:

These settings control the messaging shown inside the cart for free shipping and discount incentives.

Cart Drawer Settings

These settings apply when the Drawer Cart layout is enabled.

Authentication Pages Settings

Customize the appearance and styling of customer authentication pages, including Login, Register, Reset Password, and Account Activation pages. These settings help maintain consistent branding and typography across all customer account-related pages.

Main Login:

Customize the design and content of the customer login page.

Main Register:

Customize the appearance of the customer registration page.

Main Reset Password:

Customize the password reset page used by customers.

Main Activate Account:

Customize the account activation page shown to customers after registration.

Social Media Settings

Manage and connect your store’s social media accounts to display social icons and links throughout the theme. Adding social media links helps customers discover and engage with your brand across different platforms.

Customize Social Media:

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 > Social media.
4. Under the Accounts section, enter the full URL for each social media profile you want to display.
5. Add complete links such as:
   • https://instagram.com/yourstore
   • https://facebook.com/yourstore
   • https://youtube.com/@yourstore
   • https://tiktok.com/@yourstore
6. Social icons will automatically appear in supported sections of the theme, such as the footer or announcement areas.
7. Click Save to apply your changes.

Custom CSS Settings

Add custom CSS styles to apply advanced design customizations across your entire online store. This setting is useful for merchants or developers who want to modify styling beyond the built-in theme settings, such as spacing, typography, button styles, colors, layouts, or custom visual effects.

Customize Custom CSS:

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 > Custom CSS.
4. In the CSS field, enter your custom CSS code.
5. Add styling rules to customize specific elements across the storefront. Example:

.card {
  border-radius: 30px;
}

6. Review the changes in the theme preview to ensure the styling appears correctly.
7. Click Save to apply your custom CSS changes.

Note: Incorrect CSS may affect the store layout or styling. It is recommended to test changes carefully before publishing to a live store.