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.

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.

---

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.

Show size variant on 'Add to Cart' button

Size options appear over the image on hover when a size variant is available.

The "Add to Cart" button is enabled. To display size variants, the variant name must be set to "Size".

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

'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.

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.

---

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.

Make sure the value matches your store’s actual shipping policy so customers see accurate progress messaging.

---

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.

Use a clear square image for best results.

---

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

Paste full URLs for each social profile to ensure links work correctly.

---

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.