Layout

Header

Setting	Description
Header width	Customize the header width using the range slider. You can adjust it to match the page width or make it wider or narrower. Drag the slider between 1440px and 2000px to choose your preferred header width. Note: This setting works together with large-screen scaling: If scaling is set to 0%, then on screens wider than 1850px, the header width will follow the value you selected here, including the header margin. If scaling is set to a higher value (for example, 30%), the layout will scale accordingly on larger screens. If a scaling percentage is selected (for example, 30% or 50%), large width values (such as 1600px) will be scaled down as needed to fit the available screen space, while respecting the defined margins.
Header margin	Controls the outer spacing around the header on desktop screens. Increase the value to add more space above and below the header, or decrease it to make the header sit closer to surrounding content.
Header margin mobile	Controls the outer spacing around the header on mobile devices. Adjust this to improve layout and readability on smaller screens by adding or reducing space around the header.

Page

Setting	Description
Page width	Page Width Customize the page width using the range slider. You can adjust it to make the page layout wider or narrower based on your preference. Drag the slider between 1400px and 2000px to select your desired page width. Note: This setting works together with large-screen scaling: If scaling is set to 0%, then on screens wider than 1850px, the page width will follow the exact value you selected here, including the page margin. If scaling is set to a higher value (for example, 30%), the layout will scale proportionally on larger screens. If a scaling percentage is selected (for example, 30% or 50%), large width values (such as 1600px) will be scaled down as needed to fit the available screen space, while respecting the defined margins.
Page margin	Controls the spacing around the content of the page on desktop screens. Increasing the margin adds more space between the page content and the edges of the screen, while decreasing it makes the content stretch closer to the edges.
Page margin mobile	Controls the spacing around the page content on mobile devices. Adjust this to ensure content is readable and visually balanced on smaller screens by adding or reducing space at the edges.
Scale for large screens	Adjust the base font size and the scale of elements on screens wider than 1850px. The default value is 30%. Increasing this value enlarges text and elements for better readability on very large displays.

Media

Media is the visual component of sections, for example, image in Image with Text section. You can set border settings to your media.

Setting	Description
Border radius	Use the slider to control the rounding of media. You can adjust the radius to achieve the desired level of roundness or squareness, aligning them with your design vision.

Content container

Container are the text areas within content sections—for example:

The text box on an Image Banner
Content blocks in the Pin Slider section
Content and bundle blocks in the Product Bundle section
Text in the Team Member block of a content section

Setting	Description
Border radius	Use the slider to control the rounding of content containers. You can adjust the radius to achieve the desired level of roundness or squareness, aligning them with your design vision.

Product card

Setting	Description
Card border radius	Applies to vertical product cards in featured collections, related products sections, collection pages, and search results. Use the slider to adjust corner roundness from 0px (square corners) to 40px (fully rounded corners) to match your store’s design style.
Small card border radius	Applies to horizontal product cards in product features sections, image banners, and pin sliders. Adjust the slider from 0px (square corners) to 30px (fully rounded corners) to align with your design.

Collection card

These settings apply to collection cards displayed in sections, as well as on the collection list page.

Setting

Description

Border radius

Use the slider to control the border radius of collection cards. Achieve the desired level of roundness or squareness, aligning them with your design vision.

The range is from 0px to 40px.

Blog post card

These settings apply to blog posts displayed in the Featured Blog section and on the Blog Template for blog archive page.

Setting

Description

Border radius

Use the slider to control the rounding of post cards. You can adjust the radius to achieve the desired level of roundness or squareness, aligning them with your design vision.

The range is from 0px to 40px.

Inputs

Inputs are interactive fields where customers enter information. You can customize their appearance in your theme settings to maintain a consistent look across your store.

This includes input fields in contact forms, newsletter signups, blog comment forms, and gift card forms.

Setting	Description
Border radius	Use the slider to control the rounding of inputs fields. You can adjust the radius to achieve the desired level of roundness or squareness, aligning them with your design vision. The range is from 0px to 40px.
Border thickness	Use the slider to adjust thickness of border. The range is from 0px to 6px.
Border opacity	You can increase or decrease visibility of border color to make it more expressive or less noticeable. The range is from 0% to 100%.

Animations

Setting	Description
Enable animations	Enable animations across your site.
Section headings scroll animation	Choose how section titles animate when scrolling: None Slide in Fade in
Card scroll animation	Choose how cards animate when scrolling: None Slide in Fade in
Product card hover effect	Choose the hover effect for product cards: None Zoom
Collection card hover effect	Choose the hover effect for collection cards: None Zoom
Article card hover effect	Choose the hover effect for article cards: None Zoom