Skip to main content

Theme Settings

Overview​

Use Theme settings to customize the store's typography, colors, cart, social media, and more.

The Theme settings menu provides controls for adjusting the Ronin theme's settings. For example, you can use the color schemes to adjust the color groups used in the theme, or map each light color scheme to a dark one for dark mode.

Adjust a theme setting​

To adjust a theme setting, follow these steps.

  1. On the store's admin page, select Online store from the side menu.

  2. In the Current theme area, select Customize.

  3. From the customize theme menu, select Theme settings. Depending on the size of your device's screen, the menu is on the left or right side.

  4. From the Theme settings menu, select a menu section.

  5. In the expanded menu section, select a setting to adjust.

  6. Adjust the settings.

tip

When you're finished adjusting the theme, to avoid losing unsaved changes, select Save at the top of the Theme settings menu.

Ronin theme settings​

1. Logo and favicon​

Use Theme settings > Logo and favicon to customize your store's logo and favicon.

settings-logo-favicon.webp

  • Default logo: Select the main logo image for your store.
  • Inverse logo: Select a logo variant used when the header's transparent background is set to Inverse (for example, a light logo over dark hero images).
  • Favicon: Select an image to use as your store's favicon. The maximum image size for a favicon is 32px x 32px. Uploaded favicon images that exceed these dimensions are scaled down.

2. Colors​

Use Theme settings > Colors to set how colors are used throughout your store.

settings-colors.webp

Ronin uses a color scheme system. You can create multiple color schemes and apply them to different sections, blocks, modals, and drawers. Each color scheme includes:

  • Primary, Secondary, Tertiary: Accent colors used for highlights, links, and decorative elements. Links use the Secondary color.
  • Background: The main background color.
  • Layer: Background color for layered elements like cards and panels.
  • Background gradient: An optional gradient that replaces the background where possible.
  • Text & Text 2: Primary and secondary text colors. Icons use the Text color.
  • Button text & Button background: Styling for secondary buttons.
  • Button text inverse & Button background inverse: Styling for inverse buttons.
  • Border: Default border color, also used for the border of secondary buttons.
  • Overlay: Color for overlays on images, modals, and drawers.
  • Error, Warning, Success: Status indicator colors.
  • Status 1, Status 2, Status 3: Additional status colors for badges and labels.
  • Linear 1: A color reserved for linear decorative elements.

Primary buttons take their background and border from the Primary color and their label from the Text color.

3. Typography​

Use Theme settings > Typography to control how text is displayed throughout your store.

settings-typography.webp

Fonts

  • Body: Select the font family for body text.
  • Subheading: Select the font family for subheadings.
  • Heading: Select the font family for headings.
  • Accent: Select the font family for accent and decorative text.
  • Font size scale: Adjust the overall font size scale (100%-130%).

Text presets

Sizes automatically scale for all screen sizes.

  • Paragraph: Set the Size (8-200px), Line height, Mobile line height, and Color opacity of body text.
  • Heading 1 to Heading 6: Each heading level exposes the same set of controls:
    • Font: Which font family the heading uses. Options: Body, Subheading, Heading, Accent.
    • Size and Mobile size: The font size on desktop and mobile (8-200px).
    • Line height and Mobile line height: The line height on desktop and mobile.
    • Letter spacing and Mobile letter spacing: The spacing between characters on desktop and mobile (-10 to 10px).
    • Case: The text transform. Options: Default, Uppercase, Capitalize.

Selecting a different font can affect the speed of your store, and system fonts load faster than other fonts. To use a font that is not in the Shopify font library, see the Custom font guide.

4. Layout​

Use Theme settings > Layout to change the theme page's layout, from the width to the space between sections.

settings-layout.webp

  • Page width: Set the maximum container width (1200-1900px).
  • Spacing between sections: Control the vertical spacing between sections on desktop (0-90px).
  • Spacing between sections mobile: Control the vertical spacing between sections on mobile (0-90px).
  • Page side margin: Set the space between the page content and the edge of the screen on desktop (0-90px).
  • Mobile page side margin: Set the space between the page content and the edge of the screen on mobile (0-50px).
  • Container gap desktop: Set the inner padding of containers on desktop.
  • Container gap mobile: Set the inner padding of containers on mobile.
  • Grid: Set the Column gap and Row gap (4-40px). These affect areas with multiple columns or rows, such as product and collection grids.

5. Animation​

Use Theme settings > Animation to control the animation effects throughout your store.

settings-animation.webp

  • Desktop smooth scroll: Enable smooth scrolling on desktop devices.
  • Animate disabled: Turn off all reveal animations across the store. The settings below are hidden while this is on.
  • Animate duration: Set how long animations take to complete (300-4000ms).
  • Animate effect: Choose the reveal effect. Options: Fade, Fade up, Fade down, Fade left, Fade right, Zoom in, Zoom out, Rotate left up, Rotate right up, Snake up, Snake down, Snake left, Snake right, 3d up.
  • Animate strength: Set how pronounced the effect is (1-10).

6. Corner radius​

Use Theme settings > Corner radius to control the border radius of elements throughout your store.

settings-corner-radius.webp

  • Corner style: Choose the radius applied across buttons, cards, images, and input fields. Options: None, Extra small, Small, Medium, Large.

7. Buttons​

Use Theme settings > Buttons to customize the behaviour of buttons across your store.

settings-buttons.webp

  • Button loader: Choose the loading indicator shown inside a button while an action (such as adding to cart) is in progress. Options: Loader 1, Loader 2, Loader 3.

Button colors come from the active color scheme, and the button radius follows the Corner radius setting.

8. Input fields​

Use Theme settings > Input fields to customize the appearance of form input fields.

settings-input-fields.webp

  • Input presets: Choose the visual style applied to text inputs, selects, and text areas. Options: Style 1, Style 2.

9. Badges​

Use Theme settings > Badges to customize the sale badge shown on product cards and product pages.

settings-badges.webp

Sale badge

  • Preset: Choose the sale badge style. Options: Style 1, Style 2.
  • Content type: Choose what the badge displays. Options: Text, Percentage, Fixed amount.
  • Content: Appears when Content type is Percentage or Fixed amount. [sale] is replaced with the selected type (for example, -[sale] shows the discount percentage or amount).

10. Product cards​

Use Theme settings > Product cards to change the look of the product cards used in collection grids and product sections.

settings-product-cards.webp

  • Card presets: Choose the card layout. Options: Standard, Detailed, Overlay.
  • Show vendor: Show/hide the product vendor on the card.
  • Show price: Show/hide the product price on the card.
  • Show swatches: Show/hide color swatches on the card.
  • Show add to cart: Show/hide the Add to cart button on the card.
  • Show quick view: Show/hide the Quick view button on the card.
  • Show compare: Show/hide the Compare button on the card.

Product media

  • Aspect ratio: Set the shape of the card image. Options: Auto, 9:16, 3:4, 1:1, 4:3, 16:9, Custom. When you choose Custom, set the Width ratio and Height ratio.
  • Type hover effect: Choose what happens to the card image on hover. Options: Auto, Carousel, Carousel autoplay, Video.
  • Navigation style: Appears when the hover effect is Carousel. Choose the style of the carousel arrows. Options: Default, Circle, Square.
  • Enable bullets: Show pagination bullets on the card image (not available with the Video hover effect).
  • Bullet style: Appears when bullets are on. Options: Default, Sticks, Progress.

Variant option links

  • Maximum swatches to show: Set how many swatches appear on the card before the rest are collapsed (1-6).
  • Variant images: Switch the card image to the variant's image when a swatch is selected.

To learn where product cards are used, see Product sections.

11. Cart​

Use Theme settings > Cart to set how customers interact with the cart.

settings-cart.webp

  • Cart type: Set what happens when the Add to cart button is selected. Options: Drawer (a slide-in cart), Page (go to the cart page), Popup notification (a small confirmation popup).
  • Drawer position: Choose to show the cart drawer on the Left or Right of the screen.
  • Show cart drawer note: Show/hide the order note field in the cart drawer.
  • Show cart drawer discount: Show/hide the discount code field in the cart drawer.
  • Redirect to Cart page: Appears when Cart type is Page. Send the customer to the cart page after adding a product.
  • Show free shipping message: Show the free shipping bar in the cart drawer.
  • Free shipping threshold: Enter the minimum order amount required to qualify for free shipping. This value is used to show customers how close they are to unlocking free shipping.
  • Enable product suggestions: Recommend products that help the customer reach the free shipping threshold.
  • Select collection for product suggestions: Choose the collection the suggested products are taken from.

The drawer settings (position, note, discount, free shipping) appear only when Cart type is Drawer. To pair the free shipping bar with a real discount, see the Free shipping guide. To add gift wrapping, delivery notes, and other custom fields to the cart, see the Cart attributes guide.

12. Modal​

Use Theme settings > Modal to change the look of modals (for example, Quick view, size guide, and newsletter popups).

settings-modal.webp

  • Inherit color scheme: Use the color scheme of the section that opened the modal.
  • Color schema: When inheriting is off, choose the color scheme applied to all modals.
  • Modal padding: Set the inner padding of the modal.
  • Modal margin: Set the distance between the modal and the edge of the screen.
  • Type of animate: Choose the opening animation. Options: None, Zoom, Fade, Fade up, Fade down, Fade left, Fade right, Smart zoom, Smart fade zoom, Slide up, Slide down, Slide left, Slide right.
  • Type of easing: Choose the easing curve of the animation, from Linear and Ease through the quad, cubic, quart, and quint families to Bounce, Back, Elastic, Spring, Decay, and Bezier.
  • Modal duration: Set how long the animation takes (200-2000ms).
  • Modal backdrop opacity: Set the darkness of the overlay behind the modal (0-100%).
  • Modal backdrop blur: Blur the page content behind the modal (0-100).

13. Drawer​

Use Theme settings > Drawer to change the look of drawers (cart drawer, filter drawer, mobile menu, and more).

settings-drawer.webp

  • Inherit color scheme: Use the color scheme of the section that opened the drawer.
  • Color schema: When inheriting is off, choose the color scheme applied to all drawers.
  • Drawer padding: Set the inner padding of the drawer.
  • Drawer margin: Set the distance between the drawer and the edge of the screen.
  • Type of easing: Choose the easing curve of the slide-in animation. The options are the same as for modals.
  • Drawer duration: Set how long the animation takes (200-2000ms).
  • Drawer backdrop opacity: Set the darkness of the overlay behind the drawer (0-100%).
  • Drawer backdrop blur: Blur the page content behind the drawer (0-100).

14. Swatches​

Use Theme settings > Swatches to customize how color swatches are displayed on product cards and product pages.

settings-swatches.webp

  • Swatches name: Enter color option names for all languages, separated by commas. Example: Color,Couleur,Colour. Options whose name matches this list are rendered as swatches.
  • Variant images: Use the variant's image as the swatch instead of a solid color.

For a step-by-step setup, see the Color swatches guide.

15. Variant pickers​

Use Theme settings > Variant pickers to customize the appearance of variant option buttons on product pages.

settings-variant-pickers.webp

  • Variant width: Choose whether option buttons size to their content or stretch to fill the row. Options: Fit, Fill.
  • Appearance: Each of the three colors below can be picked from the active color scheme (Default, Foreground, Foreground 2, Primary, Secondary, Tertiary, Background, Button text, Button background, Button text inverse, Button background inverse, Layer, Overlay, Border, Error, Warning, Success, Status 1, Status 2, Status 3, Linear 1, Transparent) or set to Custom. Scheme colors show an opacity slider (5-100%); Custom shows a color picker.
    • Label color, Label opacity, Label custom color: The option label text.
    • Background color, Background opacity, Background custom color: The option button background.
    • Border active color, Border active opacity, Border active custom color: The border of the selected option.

To show color options as swatches instead of buttons, see the Color swatches guide.

16. Image lazyload​

Use Theme settings > Image lazyload to defer loading of off-screen images.

settings-image-lazyload.webp

  • Enable lazyload: Load images only when they are about to enter the viewport.
  • Type of loading: Choose the placeholder shown while an image loads. Options: Loader 1, Loader 2, Loader 3.

17. Currency format​

Use Theme settings > Currency format to show the currency code next to prices.

settings-currency-format.webp

Currency codes

  • Show currency codes: Cart and checkout prices always show currency codes. Example: $1.00 USD.

18. Dark mode​

Use Theme settings > Dark mode to map each light color scheme to the dark color scheme that replaces it when dark mode is on.

settings-dark-mode.webp

  • Dark mode mapping: Enter one pair per line in the format Light scheme: Dark scheme, using the color scheme names from Theme settings > Colors. The default mapping is:
Scheme 1: Scheme 5
Scheme 2: Scheme 4

Every section, block, modal, or drawer that uses a scheme on the left switches to the scheme on the right when a visitor turns on dark mode. Schemes not listed keep their colors in both modes.

The visitor-facing toggle is the Dark mode block of the Floating sidebar section. For the full setup, see the Dark and light mode guide.

19. Social media​

Use Theme settings > Social media to integrate social media into your store.

settings-social-media.webp

  • Social media accounts: Add the link to your store's social media. Enter links for X (Twitter), Facebook, Pinterest, Instagram, TikTok, Tumblr, Snapchat, YouTube, and Vimeo (for example, https://x.com/shopify).
note

When you enter a social media link, the theme displays the corresponding icon wherever you add a Social media block, such as in the footer. Networks without a link are hidden. See Theme blocks for details.