# Theme customization options Customize the global design and shared theme behavior of **Agnes** from **Theme settings** in the Shopify theme editor. These settings help you control your store’s typography, colors, layout, buttons, product cards, pop-ups, social links, and more, so your storefront feels consistent across every page. {% hint style="success" %} #### **How to access theme settings** 1. From your Shopify admin, go to **Online Store > Themes**. 2. Find the **Agnes** theme. 3. Click **Customize**. 4. In the theme editor sidebar, open **Theme settings**. {% endhint %} *** ### Typography Use the Typography settings to control the fonts and text sizing used throughout your store. #### Navigation menu These settings affect menu text used in your header and footer navigation. **Font** Choose the font family used for navigation links. **Size** Set the font size for navigation menu items. Available options: * 14px * 15px * 16px * 17px * 18px * 19px * 20px #### Headings These settings control heading styles across the theme. **Font** Choose the font family used for headings. **H1 font size** Set the size of H1 headings. **H2 font size** Set the size of H2 headings. **H3 font size** Set the size of H3 headings. **H4 font size** Set the size of H4 headings. **H5 font size** Set the size of H5 headings. **H6 font size** Set the size of H6 headings. **Line height** Control the vertical spacing between lines in headings. Options: 1. Tight 2. Normal 3. Loose **Letter spacing** Control the spacing between letters in headings. Options: 1. Tight 2. Normal 3. Loose #### Body text These settings control paragraph and general body text across your store. **Body font** Choose the font family used for body text. **Size (desktop)** Set the default body text size for desktop. **Size (mobile)** Set the default body text size for mobile devices. **Line height** Control the vertical spacing between lines of body text. Options: 1. Tight 2. Normal 3. Loose **Tip:** For most stores, **16px** is the safest and most readable starting point on both mobile and desktop. If your brand uses a more editorial or spacious style, **18px on desktop** can also work well. *** ### Colors Use the Colors settings to build and manage your store’s color schemes. #### Color schemes Color schemes let you define reusable combinations of colors for text, backgrounds, buttons, links, and more. These schemes can then be applied throughout the theme. Each color scheme includes the following settings: **Typography colors** * **Heading**: Sets the heading color. * **Accent**: Sets the accent color used in supporting UI elements. * **Text**: Sets the main body text color. **Background colors** * **Background**: Sets the solid background color. * **Background gradient**: Adds a gradient background. **Primary button/input** * **Text**: Sets the text color of the primary button/input. * **Background**: Sets the background color of the primary button/input. * **Border**: Sets the border color of the primary button/input. **Primary button hover** * **Hover text**: Sets the text color on hover. * **Hover background**: Sets the hover background color. * **Hover border**: Sets the hover border color. **Secondary button/input** * **Text**: Sets the text color of the secondary button/input. * **Background**: Sets the background color of the secondary button/input. * **Border**: Sets the border color of the secondary button/input. **Secondary button hover** * **Hover text**: Sets the text color on hover. * **Hover background**: Sets the hover background color. * **Hover border**: Sets the hover border color. **Additional colors** * **Inner text**: Sets text color used inside contrast areas. * **Inner background**: Sets background color used inside contrast areas. * **Placeholder**: Sets placeholder or muted background color. * **Icons**: Sets icon color. * **Links**: Sets link color. * **Links hover**: Sets hover color for links. * **Sold out badge**: Sets the sold-out badge color. * **Sale badge**: Sets the sale badge color. #### Body color scheme Choose the default color scheme used across the main body of the store. *** ### Layout Control the overall page width and content spacing used throughout the theme. #### Page maximum width Set the maximum width of the page container. Use a larger width for a more spacious layout, or a smaller width for a more contained look. #### Page width Set the overall width of page content as a percentage. This affects how wide content appears inside the browser window. *** ### Buttons Use these settings to define the global style of buttons across the theme. #### Border width Set the thickness of button borders. #### Border radius Round the corners of buttons. #### Background opacity Control the transparency of button backgrounds. #### Hover effect Choose the hover animation style applied to buttons. Options: 1. None 2. Slide 3. Flip text #### Uppercase Enable this setting to display button labels in uppercase. #### Width Set a default width for buttons. #### Padding Control the inner spacing of buttons. **Tip:** If your button labels are longer, increase button width or padding to improve balance and readability. *** ### Inputs These settings control the appearance of form fields such as text inputs, email fields, and search bars. #### Border width Set the thickness of input borders. #### Show only bottom border When enabled, only the bottom border is applied to inputs. #### Border radius Round the corners of input fields. #### Background opacity Control the transparency of input backgrounds. #### Padding Adjust the inner spacing of input fields. *** ### Product cards Product card settings control how products appear in grids, featured collections, search results, and other product listings. #### **Media aspect ratio** Choose how product images are framed. Options: 1. Fit to image 2. Square 3. Portrait #### **Show 'Add to Cart' button** Show or hide the add to cart button on product cards. #### **Show vendor** Show or hide the product vendor. #### **Show product type** Show or hide the product type. #### **Show price** Show or hide the product price. #### **Show discount percentage on sale badge** When enabled, discount percentages are shown on product cards instead of "Sale". #### **Show color swatch** Show or hide product color swatches. To learn more about swatches, click [here](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/theme-settings#options-with-swatches). #### **Show size variant on 'Add to Cart' button** Size options appear over the image on hover when a size variant is available. {% hint style="info" %} The "Add to Cart" button is enabled. To display size variants, the variant name must be set to "Size". {% endhint %} #### **Show product tags** Show or hide product tags. To hide specific tags, add 'hide' to the tag name (e.g., 'Summer hide'). Set the maximum number of product tags shown. #### **Show badge** Show or hide custom badges. #### **Show product compare checkbox** Show or hide the product compare checkbox. This checkbox works with the "Product compare popup" feature, so "Product compare popup" must be enabled for it to function properly. #### **Enable second image on hover** Display a second product image on hover when available. #### **Enable zoom effect on hover** Apply a zoom effect to product media on hover. #### **Enable lifting effect on hover** Apply a lift animation to the product card on hover. #### **Enable product image slider** Enable a slider when multiple product images are available. **Appearance** #### **Padding** Set the inner spacing of product cards. #### Gap between cards Set spacing between product cards. #### **Overlay opacity** Control the opacity of image overlays. #### **Enable maximum width** Limit the maximum width of product cards. #### **Maximum width** Set the maximum width of product cards. This applies only when 'Enable maximum width' is checked. #### **Enable inner card color** Enable an inner color style inside the card. #### **Shadow** Add a shadow to product cards. #### **Text alignment** Set text alignment within the product card. #### **Button color scheme** Choose whether product card buttons use the primary or secondary button style. #### **Title font size** Adjust the title size as a percentage. #### **Price font size** Adjust the price size as a percentage. **Border** #### **Border width** Set the border thickness of product cards. #### **Border radius** Round the corners of product cards. *** ### Blog cards These settings control how blog articles appear in blog listings and featured blog sections. #### **Media aspect ratio** Choose how blog images are displayed. Options: 1. Fit to image 2. Square 3. Portrait 4. Landscape #### **Style** Choose the overall blog card style. Options: 1. Standard 2. Box #### **Show image** Show or hide featured blog images. #### **Show date** Show or hide the article publish date. #### **Show author** Show or hide the article author. #### **Show excerpt** Show or hide the article excerpt. #### **Show tags** Show or hide article tags. #### **Maximum number of tags to show** Set the maximum number of tags shown. #### **Show comments count** Show or hide the number of article comments. #### **Enable zoom effect on hover** Apply a zoom effect on hover. #### **Enable lifting effect on hover** Apply a lift animation on hover. **Appearance** #### **Padding** Set the inner spacing of blog cards. #### **Overlay opacity** Control overlay opacity. #### **Enable maximum width** Limit the maximum width of blog cards. #### **Maximum width** Set the maximum width of blog cards. This applies only when 'Enable maximum width' is checked. #### **Text shadow** Add a text shadow to blog content. #### **Enable inner color card** Enable an inner color style inside the card. #### **Shadow** Add a shadow to blog cards. #### **Text alignment** Set text alignment within the blog card. #### **Top label color** Choose the color used for top labels. This is shown on the search page. **Border** #### **Border width** Set the border thickness of blog cards. #### **Border radius** Round the corners of blog cards. *** ### Page cards Page card settings control the appearance of cards used for page-based content. #### **Enable lifting effect on hover** Apply a lift animation on hover. **Appearance** #### **Padding** Set the inner spacing of page cards. #### **Overlay opacity** Control overlay opacity. #### **Enable maximum width** Limit the maximum width of page cards. #### **Maximum width** Set the maximum width of page cards. #### **Shadow** Add a shadow to page cards. #### **Text alignment** Set text alignment within the page card. #### **Top label color** Choose the color used for top labels. This is shown on the search page. **Border** #### **Border width** Set the border thickness of page cards. #### **Border radius** Round the corners of page cards. *** ### Pop-ups Use these settings to control the global appearance of theme pop-ups, including variant selection pop-ups. **General pop-up settings** #### **Shadow** Add a shadow to pop-ups. #### **Input color scheme** Choose whether inputs inside pop-ups use the primary or secondary input style. #### **Button color scheme** Choose whether buttons inside pop-ups use the primary or secondary button style. #### **Input width** Set the width of input fields inside pop-ups. #### **Border radius** Round the corners of pop-ups. #### **Color scheme** Choose the color scheme used for pop-ups. **Variant pop-up** These settings affect the pop-up experience used for product variants. #### **Style** Choose how the variant pop-up is displayed. Options: 1. Full 2. Box #### **Media fit** Choose how product images fit inside the pop-up. Options: 1. Contain 2. Cover {% hint style="info" %} 'Cover' maintains its aspect ratio and fills the width and height of the section. 'Contain' maintains its aspect ratio and increases or decreases the size of the image to fill the section. {% endhint %} #### **Media aspect ratio** Choose the media ratio used in the variant pop-up. Options: 1. Square 2. Landscape #### **Media width (desktop)** Set the width of the media area on desktop. #### **Show product media** Show or hide product media inside the pop-up. #### **Show vendor** Show or hide vendor information. #### **Show description** Show or hide product description content. #### **Show discount percentage on sale badge** When enabled, discount percentages are shown on product cards instead of "Sale". #### **Variant selector type** Choose how product variants are selected. Options: 1. Button 2. Dropdown #### **Enable swatch** Show or hide product color swatches. To learn more about swatches, click [here](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/theme-settings#options-with-swatches). *** ### Drawers These settings control the appearance of theme drawers, such as side panels used for cart, filters, or other drawer-based content. #### Shadow Add a shadow to drawers. #### Button color scheme Choose whether drawer buttons use the primary or secondary button style. #### Input color scheme Choose whether drawer inputs use the primary or secondary input style. #### Input width Set the width of input fields shown in drawers. #### Color scheme Choose the color scheme used for drawers. *** ### Free shipping Use this setting to support free shipping progress features across the theme. #### Free shipping limit Enter the order amount customers need to reach to qualify for free shipping. Adjust settings for free shipping on the cart page or cart drawer. {% hint style="info" %} Make sure the value matches your store’s actual shipping policy so customers see accurate progress messaging. {% endhint %} *** ### Shadow intensity These settings control the strength of shadows used across the theme. #### Box shadow intensity Set the intensity of box shadows. #### Text shadow intensity Set the intensity of text shadows. *** ### Badge These settings control the appearance of badges such as sale or sold out labels. #### Shape Choose the shape of badges. Options: 1. Round 2. Square #### Padding Set the inner spacing of badge labels. *** ### Favicon Use this setting to upload the icon shown in the browser tab. #### Favicon Upload your favicon image. {% hint style="info" %} Use a clear square image for best results. {% endhint %} *** ### Social media Add your store’s social media profile links here. These links may appear in areas such as the utility bar, the footer, social icons, or other theme elements depending on your section setup. Available fields: * Facebook * Instagram * YouTube * LinkedIn * TikTok * Twitter / X * Snapchat * Pinterest * Tumblr * Vimeo {% hint style="info" %} Paste full URLs for each social profile to ensure links work correctly. {% endhint %} *** ### Currency format Control how currency is displayed across the storefront. #### Enable currency code Enable this setting to show the currency code alongside prices. This can be helpful for stores selling in multiple currencies or to customers in different regions. --- # 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://moodboard-creations.gitbook.io/agnes/theme-configuration/theme-customization-options.md?ask= ``` 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.