Theme Settings
Overview:
You can use theme settings to make changes to your online store’s typography, colors , social media links, cart , forms , buttons , Inputs , Product quick view, Gift card page , and checkout settings. 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:
- From your shopify admin, go to Online Store > Themes
- Click Customize next to the theme that you want to customize.
- Click the settings icon, and then click Color schemes.
- In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.
- Click the color swatch for the content type color that you want to change.
- 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.
- 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: 1326px - 1526px. Default: 1426px. |
| Section Border Radius | Adjusts the corner radius of sections. Range: 0px - 20px. Default: 10px. |
General Settings:
General configurations for icons, currency, and swatches:
| Setting | Description |
|---|---|
| Favicon | Upload a favicon icon for the browser tab. |
| Currency Format | Choose to display the currency code next to prices. Default: Disabled. |
| Variant Swatches | Choose how product variants are displayed: None, Native swatches, Colors, or Images. Default: Native swatches. |
| Custom badges | Use tags in the format {TagName,BackgroundColor,TextColor} and separate multiple tags with || to display them on product pages. |
| Color swatch values | Format color values as {ColorName,ColorValue} separated by ||, and use a PNG image named after the color (spaces replaced with hyphens, e.g. 'hot-pink.png') to display swatches |
Typography:
Control fonts and text scaling:
| Setting | Description |
|---|---|
| Body Font | Choose a font for the site’s body text. Default: Inter. |
| Font Scale | Adjust the scaling percentage of text sizes. Range: 90% - 110%. Default: 100%. |
| Headings Font | Choose a font for headings. Default: Syne Bold. |
Buttons:
Customize button appearance:
| Setting | Description |
|---|---|
| Border Width | Adjusts the thickness of button borders. Range: 0px - 5px. Default: 1px. |
| Border Radius | Adjusts the corner radius of buttons. Range: 0px - 70px. Default: 70px. |
Forms:
Style form fields:
| Setting | Description |
|---|---|
| Thickness | Adjusts form border thickness. Range: 0px - 5px. Default: 1px. |
Cart Settings:
Control the cart behavior and appearance:
| Setting | Description |
|---|---|
| Cart View | Choose between Drawer or Page cart styles. Default: Drawer. |
| Enable line item variation update | Select this checkbox to show/hide the line item variation updation. |
| 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. |
| Show view cart | Select this checkbox to enable/disable the view cart button on the cart drawer. |
| Cart drawer Color Scheme | Choose a predefined color scheme to ensure consistency with the store’s branding. |
| Related product slideshow settings | Customize this section by using the settings on the right side of the theme editor, as described in the following table. |
| Title | Enter any text to appear as the rotating text in the cart drawer. |
| Related collection | Selecting this will show the related products setup from Search and discovery app. |
| Max products to show | Adjust this range bar to select the number of products. |
| Show price | Select this checkbox to enable/disable the price. |
| Auto-play slides | Select this checkbox to enable/disable the “Auto-play slides” option in the slider. It keeps changing slides automatically on the storefront. |
| Show pagination | Select this checkbox to enable/disable the “Show pagination” option in the slider. |
| Change slides every | This settings will only work when the “Auto-play slides” option is enabled. And, it only provides a range of 2 to 9 seconds. |
Quick View:
Enable a streamlined product preview for customers:
| Setting | Description |
|---|---|
| Show SKU/Stock/Vendor | Toggle visibility of SKU, stock status, or vendor name. Default: Enabled. |
| Enable WhatsApp | Add a WhatsApp button with a custom message for quick assistance. Default: Disabled. |
Social media:
Customize Social media:
- Click Theme settings > Social media.
- 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 .
- Click Save.
Gift Card Settings:
Customize the appearance of gift cards:
| Setting | Description |
|---|---|
| Gift Card Logo | Upload a logo to appear on gift cards. |
| Logo Width | Set the logo width for desktop and mobile views. |
| Color Scheme | Choose a color scheme for the gift card section. Default: Scheme2. |