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
From your Shopify admin, go to Online Store > Themes.
Find the Agnes theme.
Click Customize.
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:
Tight
Normal
Loose
Letter spacing
Control the spacing between letters in headings.
Options:
Tight
Normal
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:
Tight
Normal
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:
None
Slide
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:
Fit to image
Square
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.
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:
Fit to image
Square
Portrait
Landscape
Style
Choose the overall blog card style.
Options:
Standard
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:
Full
Box
Media fit
Choose how product images fit inside the pop-up.
Options:
Contain
Cover
Media aspect ratio
Choose the media ratio used in the variant pop-up.
Options:
Square
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:
Button
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.
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:
Round
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.
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
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.
Last updated