Customizing the Runase theme - Homepage

Runase theme is a visually and functionally rich Shopify theme. Runase blends sporty spirit, design, and performance — a gallery-inspired Shopify theme with elegant layouts, mobile speed, SEO, and effortless shopping.

This guide provides detailed instructions for configuring every aspect of the theme's core functionality. 

👉 View theme demo 

1. Adding Runase theme to your store

Go to Shopify Theme Store and search for Runase. 

On the Runase theme details page, click Try Theme. Wait for Shopify to add Runase to your store.

Once added, verify that Runase appears in the Theme Library section of your Shopify admin. Refresh the page if needed.

In the Runase Theme Library pane (1), select an option from the table below:

(2) Preview: Temporarily apply the Runase theme to review its appearance in your store.

(3) Rename: Change the name of the installed Runase theme instance in your theme library.

(4) Duplicate: Create a copy of the Runase theme in your theme library.

(5) Download Theme File: Download the Runase theme as a ZIP file.

(6) Edit Code: Open the code editor to modify the Runase theme's code.

(7) Edit Default Theme Content: Edit the language content available in your store.

(8) Customize: Customize settings and sections to suit your store

2. Customizing Runase Homepage

2.1. Header configuration

Sticky header

Toggle this ON to keep the menu stick to the top of your pages.

The sticky menu only works on the desktop.

Logo: Set the logo position for the logo of your store: Default (Left) or Center.

Megamenu

Menu: Choose a menu you want to display

Show caret: Toggle this ON to show a plus sign + indicating smaller categories. 

Search type

Dropdown: 

Popup: 

Theme Settings

Cart type: Click the dropdown and choose your preferred cart style:

Drawer: When clicked, the cart will appear as a sidebar drawer.

Page: Users clicking on the Cart icon will be redirected to the Cart page. 

Popup notification: Users clicking on the Cart icon will see a Cart popup. 

Logo: You can upload or select your store logo. The uploaded logo will be displayed in the preview area above.

Desktop logo width: Adjust the Desktop logo width to control how wide your logo appears on desktop screens.

Enable search suggestions: Toggle this option On to enable search suggestions when customers type in the search bar.

Dropdown color: Select a color scheme (e.g., Scheme 1) to be used for the search dropdown menu.

Search terms

Click the dropdown and select the menu you want to use for Search - Terms.

These terms will appear as suggestions when search suggestions are enabled.

Suggest products

When search suggestions are enabled, suggested products will appear below the search bar.

You can preview example products (e.g., ForceStride Trainer, GoalStrike Pro, LightStep Runner).

Click Change to modify which products are suggested.

Image ratio: Adjust the Image ratio slider for suggested product images (default is 100%).

Show currency codes: Toggle this option On to display currency codes next to prices in search suggestions.

Suggest links

Click the dropdown and select the menu you want to use for Search - Links.

These links will appear as suggestions when search suggestions are enabled.

Blogs: Select the blog you want to use for search suggestions (e.g., News).

Qty badge color scheme: Choose a color scheme (e.g., Scheme 2) for the quantity badge.

Popup color: Select a color scheme (e.g., Scheme 1) for popup notifications.

1.1. Blocks

Add a menu item: In the Theme Editor, click Add block. Select Horizontal item menu.

General 

1. Horizontal title: Type in the title of the horizontal item menu (e.g. Categories).
2. Target: Choose the target window when the horizontal items are clicked (e.g. Current window).

Dropdown configuration

1. Enable dropdown item: Toggle ON to make the dropdown items appear at the header.
2. Dropdown type: Default, Highlight 
3. Dropdown color scheme: Choose the color scheme for the dropdown.
4. Dropdown width: Enter a pixel or a percentage number (e.g. 450 px, 100%) to Adjust the width of the dropdown menu.
5. Dropdown content width: Enter a pixel or a percentage number (e.g. 450 px, 100%).
6. Dropdown align: Decide the dropdown align style to follow the Item size or the Container. 

Category block

1. Enable category block: Toggle ENABLED to make the category blocks appear at the dropdown menu.
2. Width: Adjust the width of the category block. Enter a percentage number (e.g. 75%).
3. Category column: Decide the number of category columns displayed on the dropdown menu. Enter a number (e.g. 4).

Static block configuration

You can display up to 6 static blocks

1. Enable static block 1: Toggle this ON to display the static block on the horizontal menu.
2. Width: Adjust the width of the top block. Enter a percentage number (e.g. 25%).
3. Image: Select an image display with the static block.
4. Link image: Paste a link or search for an image to display on the static block.
5. Description: Add a description for the static block.