Renovate Theme Settings
Renovate offers a wide range of customization options, giving you full creative control over your store without the need for coding. With Shopify's intuitive theme editor, you can easily adjust colors, typography, layouts, and other design elements to match your brand's identity and create a seamless shopping experience.
1. Favicon
A favicon is a small icon displayed in the browser tab next to your store's title. Adding a custom favicon helps strengthen your brand identity and makes your store easily recognizable across tabs and bookmarks.
How to Add a Favicon
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, open Theme Settings (bottom-left corner).
- Select the Favicon option.
- Upload your favicon image using the image selector.
- Recommended size: 32 × 32 pixels.
- Tip: Use a lightweight image file to ensure faster loading.
2. Typography
The Renovate theme allows you to fully customize your store's typography to match your brand identity. You can set separate fonts for headings and body text, ensuring a clear visual hierarchy and a consistent design across your store. Choose from Shopify's built-in Google Fonts library and apply your selections instantly for a modern and polished appearance.
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, open Theme Settings (bottom-left corner).
- Select the Typography option.
3. Colors
The Renovate theme includes a flexible color system based on color schemes. Each scheme groups together a set of colors that are applied consistently across your store's sections and components. You can create multiple color schemes and assign them to different sections or blocks to maintain a cohesive and visually balanced design.
What is a Color Scheme?
A color scheme is a predefined set of colors that you can reuse throughout your theme. Instead of customizing colors individually for each section, you can simply apply a scheme, which automatically controls elements such as background, text, buttons, and other design components. To learn more about Shopify color schemes, click here .
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, open Theme Settings (bottom-left corner).
- Select the Colors option.
4. Layout
The Renovate theme includes flexible layout settings that allow you to control the overall structure of your store. You can adjust page width, grid spacing, and section alignment to create a clean, balanced, and responsive design across all devices.
Layout Options
- Container Width: Defines the maximum width of your store's content area.
- Column Spacing: Adjusts the space between elements placed side by side.
- Row Spacing: Adjusts the space between stacked elements vertically.
How to Adjust Layout
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, open Theme Settings.
- Select Layout to access container width, grid, and spacing options.
- Adjust the values as needed and click Save.
5. Border Radius
The Renovate theme allows you to control the roundness of corners across various elements using border radius settings. Adjusting these values helps create a softer, more modern look that aligns with your store's overall design style.
Border Radius Options
- Button Border Radius: Adjust the corner roundness of buttons (e.g., 6px) to achieve a soft or sharp appearance.
- Image Border Radius: Control the corner roundness of images to match your overall design style.
How to Adjust Border Radius
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, open Theme Settings.
- Select Border Radius or the relevant section for buttons, images, badges, or input fields.
- Adjust the pixel values as needed to achieve your preferred rounded style.
- Click Save to apply the changes across your store.
6. Drawers
In the Renovate theme, drawers such as the cart drawer, quick view drawer, and menu drawer follow a unified color scheme to maintain visual consistency across your store. You can customize elements like background, text, buttons, and borders directly from Theme Settings, ensuring a seamless design that aligns with your brand.
How to Customize Drawers
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, open Theme Settings (bottom-left corner).
- Select the Colors or relevant drawer settings.
- Adjust the color scheme to control background, text, buttons, and borders inside drawers.
- Click Save to apply your changes across all drawer components.
7. Scroll to Top
The Scroll to Top feature in the Renovate theme allows users to quickly return to the top of the page with a single click. It enhances navigation and improves the overall user experience, especially on long pages such as product listings or collections. You can also customize its color scheme to match your store's design.
How to Enable & Customize Scroll to Top
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, open Theme Settings.
- Select Scroll to Top.
- Enable the feature by toggling it on.
- Select a Color Scheme to style the button.
- Click Save to apply your changes.
8. How To Edit the Quick Add Drawer
-
Media Settings:
Control the appearance of product media inside the quick add drawer.
- Add Background Color to Media: Enable this option to apply a background color behind product images. This is especially useful for transparent images.
- Background Color: Choose a background color (e.g., #F6F2F0) to improve image visibility and consistency.
-
Inventory Settings:
Customize how stock availability is displayed within the quick add drawer.
- In Stock Color: Select the color used to indicate available products (e.g., #21961C).
- Out of Stock Color: Select the color used for unavailable products (e.g., #FF0000).
- Threshold Color: Choose the color displayed when inventory is low (e.g., #D18D00).
- Inventory Threshold: Set the quantity limit (e.g., 10) below which stock is considered low.
-
Variant Picker:
Choose how product options (such as size or color) are displayed in the quick add drawer.
- Button: Displays options as clickable buttons.
- Dropdown: Displays options in a dropdown menu.
- Mixed: Displays color options as swatches and other options as dropdowns for a more intuitive selection experience.
-
Add to Cart Buttons:
Customize additional options related to the add to cart functionality on the product page.
- Show Dynamic Checkout Button: Enable this option to display an accelerated checkout button (such as Buy Now), allowing customers to skip the cart and proceed directly to checkout using supported payment methods.
- Show Gift Recipient Form: Enable this option to allow customers to send products as a gift. This adds fields for recipient details such as name, email, and a personalized message.
9. Search Drawer
The Renovate theme includes a Search Drawer that appears when customers click the search icon. It helps users quickly find products by displaying keywords, recommended products, and featured collections directly within the drawer, improving navigation and product discovery.
Keywords
- Show Keywords: Enable this option to display suggested search terms.
- Heading: Set the title for the keywords section (e.g., History).
- Enter Keywords: Add keywords separated by commas (e.g., Home, Table, Sofa) without extra spaces.
Products List
- Show Products List: Enable to display recommended or featured products inside the search drawer.
- Heading: Set the title for this section (e.g., Recommended For You).
- Select Products: Choose products you want to highlight. Only available products will be displayed.
Collection
- Show Collection: Enable to display a featured collection inside the search drawer.
- Heading: Set the title for the collection section (e.g., Sale).
- Select Collection: Choose the collection you want to showcase (e.g., Heritage Living).
- Select Image: Upload an optional image to visually represent the collection.
How to Configure the Search Drawer
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, navigate to the Search Drawer settings.
- Enable keywords, product list, or collection sections as needed.
- Add content such as keywords, products, and collections.
- Click Save to apply your changes.
10. Social media
The Renovate theme allows you to connect your store with various social media platforms, making it easy for visitors to follow and engage with your brand. Social media links appear throughout the theme, including the header, footer, and dedicated social icon sections.
How to Update Social Links
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Renovate theme.
- In the Theme Editor, open Theme Settings → Social Media.
- Paste the URLs of your social media accounts in the input fields next to each platform.
- Click Save to apply your changes.
Once added, your social icons will automatically display on your storefront, making it simple for customers to connect with your brand on platforms like Instagram, Facebook, Twitter, and more.