Theme settings
Global theme settings
Use Theme settings to control styles and behavior shared across Radian. In the Shopify Theme Editor, select the gear icon, open a tab below, make one group of changes at a time, and preview the affected templates before saving.
Global scope
A global setting can affect multiple templates and sections. A section-level setting can override the global value where the Theme Editor provides that option.
Use Extras for storefront-wide utility behavior, product 3D presentation, and shared chevron controls.
GENERAL OPTIONS
| Show breadcrumbs | Display the navigation path on supported templates. |
|---|---|
| Show collections page in breadcrumbs | Include the collections list in collection and product breadcrumb paths. |
| Smooth scroll | Apply smooth scrolling to supported in-page navigation. |
| Close button animation | Animate supported close buttons when visitors hover or interact with them. |
| Close button border | Show the shared border used by supported close buttons. The icon and border follow the active color scheme. |
Configure 3D product media
Enable Custom 3D view to use Radian’s model presentation controls. Native presentation uses Shopify’s native model viewer instead. When the custom view is active, adjust its background, grid, exposure, shadow intensity and softness, and viewpoint controls.
CHEVRON CONTROLS
| Background color | Set the shared background used by supported chevron controls. |
|---|---|
| Border | Show or hide the chevron border. |
| Corner radius | Adjust the shared chevron shape. |
Check the result
Open a product with 3D media and a page with breadcrumb and carousel controls. Confirm the selected behaviors remain readable and usable on desktop and mobile.
Use Favicon to upload the small store icon displayed in browser tabs and bookmarks. The storefront logo is configured in the Header Logo block.
FAVICON OPTION
| Favicon | Upload a square image with a simple mark that remains recognizable at browser-tab size. |
|---|
Recommended favicon
Use a square PNG with a simple mark. A 32 × 32 px source is suitable for the browser-tab favicon.
Check the result
Open the storefront in a new browser tab and confirm the favicon remains clear at a small size. Configure desktop and mobile logo images in Header > Logo.
Color schemes let sections and blocks reuse a coordinated set of background, text, button, link, and accent colors.
CREATE A COLOR SCHEME
| Open Colors | In Theme settings, select Colors. |
|---|---|
| Add or edit a scheme | Choose colors that preserve readable contrast for text and controls. |
| Apply the scheme | Open a section or supported block and select the scheme from Color scheme. |
| Review every state | Check links, buttons, form fields, badges, and hover or active states. |
Global relationship
Editing a scheme updates every section and block that uses it. Duplicate or create another scheme when only one area needs a different palette.
Check the result
Preview light and dark content areas on desktop and mobile. Confirm text, focus indicators, borders, and interactive states have sufficient contrast.
Typography controls the store’s font families, hierarchy, responsive scale, spacing, line height, capitalization, and weight.
FOUNDATION
| Heading fonts | Choose the main display font and an optional secondary heading font, then set the base heading size. |
|---|---|
| Body font | Choose the reading font and control size, mobile scale, letter spacing, line height, and capitalization. |
Configure text styles
Display, Page title, Section heading, Secondary heading, Subheading, and Caption each have independent font source, desktop and mobile scale, line height, letter spacing, and capitalization controls. Subheading and Caption also support a bolder style.
SPECIALIZED TEXT
| Navigation | Choose Body or Heading as the source, then set size, weight, and capitalization. |
|---|---|
| Products | Choose the product-title style and set product title and price sizes. |
| Product cards | Choose the card-title font source, size, and capitalization. |
| Collection cards | Choose the collection-title font source and size. |
Check the result
Review long headings, product titles, prices, navigation labels, and body copy at desktop and mobile widths. Confirm text wraps without overlap or clipping.
Layout defines reusable content widths and gaps that sections can select through their Section layout setting.
LAYOUT PRESETS
| Page | Configure the standard page container. |
|---|---|
| Content | Configure a focused content container. |
| Narrow | Configure a smaller reading-width container. |
| Custom | Configure an additional reusable width preset. |
Each preset provides Full width, Maximum width, Column gap, and Row gap. Sections that select that preset inherit those values.
Prevent iOS input zoom
Enable Prevent iOS input zoom when form inputs should avoid Safari’s automatic zoom behavior on supported iOS devices.
Check the result
Preview sections that use each preset. Confirm containers align consistently and no section creates page-level horizontal scrolling.
Scrollbar settings control the appearance of supported custom scroll areas across the theme.
SCROLLBAR OPTIONS
| Color | Choose the shared scrollbar color. |
|---|---|
| Shape | Choose Rounded or Square. |
| Thickness | Set the scrollbar thickness. |
Check the result
Test a section with horizontal scrolling and a page tall enough for vertical scrolling. Confirm the scrollbar remains visible against the selected color schemes.
Buttons controls the shared button size and corner radius, plus purchase-button presentation on product forms.
BUTTON OPTIONS
| Button size | Choose Small, Medium, or Large as the shared default size. |
|---|---|
| Corner radius | Adjust the shared button shape. |
| Add to cart style | Choose the default Fill or Outline treatment for product Add to cart buttons. |
| Quick view Add to cart style | Choose a separate Fill or Outline treatment for the Add to cart button inside Quick view. |
| Add to cart animation | Choose the purchase animation and direction used after a successful add. |
| Add to cart hover | Enable the hover animation and choose its direction. |
| Buy it now style and animation | Configure the dynamic checkout treatment independently from Add to cart. |
| Purchase options heading | Set the label displayed above one-time and selling-plan options. |
Section overrides
A section or block can expose its own button style and size. Those local controls take precedence where they are available.
Check the result
Review standard section buttons and a product with purchase options. Confirm Add to cart and Buy it now remain visually distinct and readable.
Product card settings define the default presentation used by collection grids and sections that render Radian product cards.
PRODUCT GRID CURSOR
| Enable cursor | Show the custom product-grid cursor on supported pointer devices. |
|---|---|
| Cursor label | Set its visible action text. |
| Background and text | Choose colors with sufficient contrast. |
CARD CONTENT
| Shape and media | Set card radius, image ratio, hover effect, and video autoplay. |
|---|---|
| Product details | Show or hide title, price, vendor, variant options, badges, and quick view. |
| Alignment | Align product-card content consistently. |
| Savings | Choose Amount or Percent and decide whether the saved value is shown. |
| Mobile quick view mode | Choose Always show button, Open quick view directly when the card is tapped, or Reveal the button after the first tap. |
| Variant style | When variant options are enabled, choose Hover reveal or Always show beside the product price. |
| Variant overlap display | Let variant options expand from an overlap on hover, or keep them expanded in the card layout. |
Quick-view button
The Quick view section controls the trigger icon and its visual options. Product card controls whether quick view appears and how a card behaves on mobile.
Local overrides
Sections with Use global settings enabled inherit these choices. Disable that option in a section only when its cards need a different presentation.
Check the result
Test cards with a second image, video, variants, a sale price, sold-out inventory, and quick view. Also verify touch devices, where hover-only behavior is unavailable.
Product badges control status labels rendered by supported product cards and product displays.
SHARED BADGE STYLE
| Transparent badges | Remove badge backgrounds while retaining badge text. |
|---|---|
| Corner radius | Set the shared shape of rendered badges. |
BADGE TYPES
| Sale | Enable the badge, choose Text or Percentage, and set text and background colors. |
|---|---|
| Sold out | Enable the badge and set its text and background colors. |
| Pre-order | Enable the badge and set its text and background colors. |
| Purchase option | Enable the badge for supported purchase-option products and set its colors. |
Check the result
Preview products that represent each state. A badge appears only when both the global badge option and the product/card context support that state.
Swatches replace supported variant text with color or product-media choices on product cards and product forms.
GENERAL OPTIONS
| Show swatches | Enable swatches on supported product cards. |
|---|---|
| Use variant images | Use a variant image when one exists. If that variant has no image, use its configured swatch color; when no custom color exists, use the same default fallback as product forms. |
| Material option style | Show material values as Text or Variant image. |
COLOR SWATCH STYLE
| Size | Choose Small, Medium, or Large for the swatch control itself. |
|---|---|
| Shape | Choose Circle or Square. |
| Border | Choose None or Solid, then set thickness and opacity. |
| Color option names | Enter the product option names that should be treated as colors. |
Add custom colors
In Custom color swatches, map a variant value to a CSS color using “Value: #HEX”. Keep the value spelling identical to the product option value. Add additional mappings on separate lines.
Product setup required
Assign variant images in Shopify Admin before enabling variant-image swatches. Swatch matching depends on the product option names and values exposed by Shopify.
Check the result
Test products with color, material, and image-based variants in the product page, quick view, and product cards.
Size guide defines the default page opened by Size guide buttons in Product page, Featured product, and Quick view.
SIZE GUIDE OPTION
| Default size guide page | Select a published Shopify page containing the store's default measurements and fitting guidance. |
|---|
Product override
A product-specific Size guide page metafield takes priority over this global page when it contains a value.
Check the result
Open products with and without a product-specific Size guide. Confirm the correct page opens in the shared product popup.
Cart controls where customers review cart items and how the header cart indicator appears.
CART OPTIONS
| Cart type | Choose Drawer to open an overlay or Page to send customers to the cart page. |
|---|---|
| Cart icon style | Choose Cart, Cart bag, Cart basket, or Cart tote. |
| Cart badge style | Choose Dot or Counter for the header indicator. |
FREE SHIPPING BAR
| Cart page and Cart drawer | Enable the bar independently in each cart surface. |
|---|---|
| Minimum amount | Set the cart value required to unlock free shipping. |
| Progress and success messages | Customize the message before and after the threshold is reached. |
| Progress color | Choose a solid color or gradient for the progress indicator. |
Check the result
Add a product from a product page and quick view. Confirm the selected destination opens, the new line item is visible immediately, and the badge updates.
Cart content settings
Upsells and other cart content are configured in their own global or cart section settings; they are not part of the Cart tab.
Search controls storefront search access, predictive results, and filtering on the search results page.
SEARCH OPTIONS
| Enable search | Show search access in supported header layouts. |
|---|---|
| Predictive search | Display results while a visitor types. |
| Predictive result type | Return Products only or Products, articles, and pages. |
| Search page filters | Show or hide filters on search results. |
| Filter layout | Choose Sidebar, Drawer, Dropdown, or Sticky panel for search results. |
Shopify configuration
Use Shopify Search & Discovery to configure searchable data, filters, synonyms, and related storefront behavior.
Open Shopify Search & Discovery
Check the result
Search for products and content from desktop and mobile. Confirm predictive results match the selected type and the results-page filters open in the chosen layout.
Upsell defines the default presentation for complementary products rendered in supported product and cart contexts.
TEXT
| Heading | Set the default upsell heading. |
|---|---|
| Text styles | Choose styles for the heading, product title, and price. |
LAYOUT AND MEDIA
| Layout style | Choose Stacked or Panel tab. |
|---|---|
| Thumbnail ratio | Choose Square, Landscape, or Portrait. |
| Media | Set corner radius and optional video autoplay. |
| Product details | Show or hide price and vendor. |
BUTTON
| Label | Set the upsell action label. |
|---|---|
| Style | Choose Primary, Secondary, or Outline. |
| Size | Choose Default, Small, Medium, or Large. |
Product recommendations required
Complementary products must be available to the theme through Shopify product recommendations. Configure them with Shopify Search & Discovery.
Check the result
Test a product and cart that contain complementary recommendations. Confirm layout, media, price/vendor visibility, and the add action.
Filters controls collection-page filtering, sorting, filter groups, and the presentation of common filter types.
FILTER CONTROLS
| Show filters | Display collection filters when Shopify returns filter data. |
|---|---|
| Show sorting | Let visitors change the product order. |
| Show chevrons | Display chevrons on supported filter and sort controls. |
| Layout | Choose Sidebar, Drawer, Dropdown, or Sticky panel. |
| Sticky panel radius | Set the panel shape when Sticky panel is selected. |
FILTER GROUPS
| Standard groups | Show or hide category, price, availability, product type, brand, and additional filters. |
|---|---|
| Color | Show the color filter, enable swatches, and choose Vertical list or Dot grid. |
| Size | Show the size filter and choose Checkbox list or Box grid. |
Shopify configuration
Available filters and their values come from Shopify Search & Discovery. Theme settings control presentation; they do not create filter data.
Set up storefront filters in Shopify
Check the result
Open a collection containing varied product data. Test each enabled filter, sorting, clear/reset behavior, empty results, and the selected layout on desktop and mobile.
Customer account selects the navigation menu shown by the supported account interface.
SET IT UP
| Create a menu | In Shopify Admin, create or update the menu intended for customer accounts. |
|---|---|
| Choose the menu | Open Theme settings > Customer account and select it under Customer account menu. |
| Review destinations | Confirm every menu item points to a valid customer-account or store destination. |
Account availability
Customer account links also depend on the customer-account configuration enabled in Shopify Admin.
Check the result
Sign in with a customer account and verify the selected menu, labels, destinations, and mobile navigation.
Drawers & popups controls the shared backdrop and shadow used by supported overlays such as Cart drawer, Quick view, Menu drawer, Search, Flyout, and Discovery.
OVERLAY OPTIONS
| Overlay opacity | Adjust the darkness of the page backdrop behind an open surface. |
|---|---|
| Overlay blur | Apply the shared backdrop blur when supported. |
| Overlay shadow | Enable the shared shadow and adjust its opacity and horizontal or vertical offset. |
Color schemes
Close icons, borders, drawer content, and popup content continue to follow the active section or surface color scheme.
Check the result
Open Menu drawer, Search, Quick view, Cart drawer, Flyout, and Discovery. Confirm the overlay hands off cleanly without flashing, stacking, or covering the Header incorrectly.
Animations defines shared movement for buttons, links, navigation, chevrons, and the scroll-to-top control.
ANIMATION OPTIONS
| Enable animations | Turn supported global animations on or off. |
|---|---|
| Buttons | Choose Default, Rolling, or Cascade and set a direction. |
| Button hover | Enable the hover animation and set its direction. |
| Links and navigation | Choose an animation and direction independently for each. |
| Chevron hover | Choose Rolling, Fill, or None and set its direction. |
| Scroll to top | Show or hide the storefront scroll-to-top control. |
Accessibility
Radian respects supported reduced-motion and keyboard-navigation behavior. Keep essential information and actions usable without animation.
Check the result
Test mouse, touch, and keyboard navigation. Confirm labels remain readable during animation and controls do not move unexpectedly when focused.
Social media controls product-sharing actions and the social account URLs used by supported social-link blocks.
PRODUCT SHARING
| Show or hide Facebook sharing. | |
| X | Show or hide X sharing. |
| Show or hide Pinterest sharing. | |
| Copy link | Show or hide the copy-link action. |
SOCIAL ACCOUNTS
| Supported networks | Facebook, Instagram, YouTube, TikTok, X, Snapchat, Pinterest, Tumblr, and Vimeo. |
|---|---|
| Add a URL | Paste the complete public profile URL for each account you want to expose. |
| Hide an account | Leave its field blank instead of entering a placeholder link. |
Check the result
Open a product page and every location that displays social links. Confirm sharing opens the correct service and each profile URL leads to the intended account.
Header localization settings
Country and Language selectors are configured in the Header. Their available choices still depend on Markets and published languages in Shopify Admin.
Review before publishing
FINAL STOREFRONT CHECK
| Desktop and mobile | Review the home page, a collection, a product, search, cart, and customer account at multiple viewport sizes. |
|---|---|
| Commerce states | Test available, sold-out, sale, variant, selling-plan, quick-view, and cart interactions. |
| Accessibility | Check keyboard navigation, focus visibility, color contrast, reduced motion, and readable text wrapping. |
| Shopify data | Confirm Markets, languages, Search & Discovery, product recommendations, menus, and product data are configured in Shopify Admin. |
Save only after the affected storefront paths behave as expected. If a setting appears to have no effect, first check whether the current section uses a local override.