# Customize the theme

***

{% embed url="<https://www.loom.com/share/130bf3b78ab1469da7656dcd433c00fb>" %}

### **1. Access the theme editor**

* From your **Shopify admin**, go to **Sales Channels** > **Online Store** > **Themes**.
* Next to the theme that you want to edit, click **Customize**.

<figure><img src="/files/4vHHp9lAxZcDfQm1bZOJ" alt=""><figcaption></figcaption></figure>

### **2. Modifying Colors and T**ypography

Customizing the [**colors**](/articles/theme-settings/inspiredtheme-settings-intro/colors.md) and [**typography**](/articles/theme-settings/inspiredtheme-settings-intro/typography.md) of your theme is a crucial step in creating a cohesive and branded storefront.&#x20;

{% tabs %}
{% tab title="Colors" %}

<figure><img src="/files/NyOsALTlBVv9zOoDIl3c" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="Typography" %}

<figure><img src="/files/M1NgKVwfQMrRjXb2ravx" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **3. Adding and Configuring Sections**

[Sections](/articles/sections/sections-available-in-inspiredtheme.md) in Shopify themes allow you to add and organize content on your store’s pages.

* Click the “**Add section**” link in the left sidebar, and a searchable list of available sections will appear.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/a2268679-c3da-4e50-8844-accdf1a695ad/Screenshot%202023-11-07%20at%204.35.37%20PM.png" alt=""><figcaption></figcaption></figure>

* Expand a section node using the expand icon ">" to view its blocks, or collapse it using the collapse icon "**∨"** to hide the blocks. You can click any section or block to view its settings.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/cdaf5341-6494-4183-932f-67a5b50417c3/image.png" alt=""><figcaption></figcaption></figure>

### **4. Customizing the Header and Footer**&#x20;

The [header](/articles/header/announcement-bar.md) and [footer](/articles/footer/footer-blocks.md) of your website play a significant role in the overall navigation and branding of your store. Customizing these areas allows you to showcase your logo, [**navigation menus**](/articles/general-information/navigation-menus.md), contact information, and other important elements.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/1fb20a14-7826-4978-a990-8803ffb5cd9d/Screenshot%202023-11-07%20at%204.42.02%20PM.png" alt=""><figcaption></figcaption></figure>

### **5. Adjusting the Product Page**

The [product pages](/articles/product-pages/product-information.md) in your store need to effectively showcase your products and provide a seamless shopping experience for your customers. The theme provides options to style and customize these pages to match your branding.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/a0fd8b39-8289-426d-994a-8159657a6c0a/Screenshot%202023-12-16%20at%203.38.57%20PM.png" alt=""><figcaption></figcaption></figure>

### **6. Changing the Cart and Checkout Pages**

You can modify the [cart](/articles/pages/other-pages/cart.md) and [checkout](/articles/pages/other-pages/checkout.md) pages to align with your branding and provide a seamless checkout experience. You can customize the cart layout, add trust badges, include upsell or cross-sell sections, and make the checkout process more intuitive.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/b0055487-f57d-4593-ae62-5b2ae01fa984/Screenshot%202023-12-16%20at%203.41.16%20PM.png" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.inspiredtheme.com/articles/general-information/customize-the-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.