Custom CSS

You can find the Custom CSS field in the theme settings and within each section, allowing you to modify any visual aspect of your theme.

With the Custom CSS field, you can easily apply your own styles to enhance the look and feel of your store. Whether you want to adjust colors, modify spacing, or change typography, this feature gives you the flexibility to personalize your theme and make it uniquely yours. Simply enter your CSS rules in the designated field, and you'll see the changes reflected in real time.

Examples of what you can achieve with Custom CSS

1) Swatches size

Variant swatches

2) Different height of Image/Video Banner

.blocks {
  min-height: 200px;
}

3) Different color for Headings

h1,h2,h3,h4 {
  color: aqua;
}

4) Different width ratios for Image with Text section

.block:nth-child(1) {
  --block-width: 60%;
}
.block:nth-child(2) {
  --block-width: 40%;
}

5) Header layout desktop/mobile

You can specify the browser window width at which the Header changes to the mobile layout. To do this, use the Custom CSS field within the Header section.

ket-header {
  --mobile-header-below: 1200px;
}

How to Use the Inspector Tool to Customize Your Website with Additional CSS

The Inspector tool is a powerful feature available in most modern web browsers, allowing you to view and modify the HTML and CSS of any webpage in real-time. This can be particularly useful for customizing your website’s design. Here’s a step-by-step guide on how to use the Inspector tool to add custom CSS to your website:

1. Open the Inspector Tool:

   • Right-click on the webpage you want to customize and select “Inspect” or “Inspect Element” from the context menu. Alternatively, you can press F12 or Ctrl + Shift + I (or Command + Option + I on Mac) to open the Developer Tools.

2. Navigate to the Elements Tab:

   • Once the Developer Tools are open, navigate to the “Elements” tab. This section displays the HTML structure of the webpage, along with the associated CSS styles.

3. Select an Element:

   • Hover over the elements in the HTML code or the webpage itself. When you hover over an element in the code, it will be highlighted on the page, allowing you to easily identify which part of the website you’re working with. Click on the element you want to customize.

4. View and Edit CSS:

   • With the desired element selected, look for the “Styles” panel usually located on the right side of the Inspector. Here, you can see the existing CSS rules applied to that element. You can modify these styles directly by clicking on them, or you can add new CSS rules by clicking inside the empty area at the bottom of the “Styles” panel.

5. Add Custom CSS:

   • Type your custom CSS rules in the “Styles” panel. For example, you can change colors, fonts, sizes, margins, and more. As you make changes, you’ll see them reflected in real-time on the webpage.

6. Testing Changes:

   • The changes made using the Inspector tool are temporary and will reset once the page is refreshed. To keep your customizations, you will need to copy the CSS code you’ve written and save it in your Custom CSS field in your theme/section settings.

7. Save Your Changes:

   • Navigate to the appropriate settings area (“Theme Editor > Custom CSS,” or “Section > Custom CSS”) and paste your modified CSS code into field. Save your changes to apply the new styles permanently.

By utilizing the Inspector tool, you can easily experiment with different styles and configurations, helping you create a more personalized and visually appealing website. Whether you want to adjust layouts, enhance typography, or add unique design elements, the Inspector is an invaluable resource for web customization.