Customizing the Runase theme - Homepage
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.
1. Adding Runase theme to your store
In your Shopify admin, navigate to Sales Channels > Online Store > Themes > Theme Library
From the Add Theme dropdown, select Visit Theme Store to open the Shopify Theme Store.
In the Search field, enter Runase as the search term.
Select Runase from the search results.
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
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.
Menu
Choose a menu you want to display
Color scheme
Choose one among 17 color schemes for your menu.
Make header on slideshow
Toggle this ON to let the header appear on the slideshow section (next section).
Header color on slideshow
Adjust the color scheme for the header on the slideshow.
Background transparent
Adjust the transparency of the header background.
Enter a pixel number (e.g. 10 px), the higher number, the more transparent background.
Show border
Toggle this ON to display the header border.
Logo
Position
Adjust the position of the logo.
Choose between Left or Center.
Logo on slideshow
Select an image as the logo to be displayed on the slideshow.
Mobile
Mobile menu color
Choose the color scheme for the menu to display on the mobile view.
Section configuration
Bottom margin
Add space to the bottom of the menu header.
Enter a pixel number (e.g. 10 px)
1.1. Horizontal item menu configuration
General
Horizontal title
Type in the title of the horizontal item menu (e.g. Categories).
Target
Choose the target window when the horizontal items are clicked (e.g. Current window).
Dropdown configuration
Enable dropdown item
Toggle ENABLE to make the dropdown items appear at the header.
Dropdown type: Default, Highlight
Dropdown color scheme
Choose the color scheme for the dropdown.
Dropdown width
Adjust the width of the dropdown menu.
Enter a pixel or a percentage number (e.g. 450 px, 100%).
Dropdown content width
Adjust the width of the dropdown menu.
Enter a pixel or a percentage number (e.g. 450 px, 100%).
Dropdown align
Decide the dropdown align style to follow the Item size or the Container.
Category block
Enable category block
Toggle ENABLED to make the category blocks appear at the dropdown menu.
Width
Adjust the width of the category block.
Enter a percentage number (e.g. 75%).
Category column
Decide the number of category column display on the dropdown menu
Enter a number (e.g. 4).
Static block configuration
You can configure up to 6 static blocks
Enable top block 1
Toggle this ON to display the top block on the horizontal menu.
You can display up to 6 top blocks.
Width
Adjust the width of the top block.
Enter a percentage number (e.g. 25%).
Image
Select an image display with the top block.
Link image
Paste a link or search for an image to display on the top block.
Description
Add description for the top block
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
2. Hero banner
Layout
Choose the layout style for the hero banner.
Full
Display the banner spanning the full width of the viewport with media filling edge-to-edge.
Column
Display the banner in a contained column layout, often with text and media side-by-side or in a stacked column format on wider screens.
Preload image
Toggle this ON to preload the hero image for faster perceived loading (recommended for primary above-the-fold banners).
Desktop
Image ratio
Select the aspect ratio for the desktop image display: options typically include Natural (original ratio), Square (1:1), Landscape (e.g. 16:9 or similar), Portrait, etc. (exact ratios depend on theme implementation).
Image
Upload or select the main image to display on desktop views.
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
A Shopify-hosted video
Select and insert a video file hosted in Shopify
Mobile
Image ratio
Select the aspect ratio for the mobile image display (often different from desktop to optimize for vertical screens): Natural, Square, Landscape, Portrait, etc.
Image
Upload or select the image optimized for mobile views.
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
A Shopify-hosted video
Select a video file hosted in Shopify.
Media link
Enter a URL to make the entire media (image or video) clickable, directing to the specified link.
Information
Color scheme
Adjust the color scheme of the text and overlay elements in the hero banner.
Scheme 4 (select from available predefined schemes, e.g. Scheme 1–Scheme 5 or custom named schemes in the theme).
Background image
Select an optional background image for the section (separate from the main hero media).
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Desktop position
Choose the focal point/position of the background image on desktop:
Top left
Top center
Top right
Center left
Center
Center right
Bottom left
Bottom center
Bottom right
Default: Center
Mobile position
Choose the focal point/position of the background image on mobile:
Top left
Top center
Top right
Center left
Center
Center right
Bottom left
Bottom center
Bottom right
Default: Center
Desktop alignment
Choose the text/content alignment on desktop:
Left
Center
Right
Mobile alignment
Choose the text/content alignment on mobile:
Left
Center
Right
Section layout
Background image
Select an image as the overall section background (if different from hero media).
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Section full width
Toggle this ON to display the entire section in full width (edge-to-edge).
Section max width
Adjust the maximum width of the section.
Enter a pixel number (e.g. 1900 px).
Content full width
Toggle this ON to display the content (text, buttons) in full width within the section.
Content max width
Adjust the maximum width of the content area.
Enter a pixel number (e.g. 1900 px).
Padding desktop
Add spacing on the top and bottom of the section in the desktop view.
Enter a pixel number (e.g. 50 px).
Padding tablet, mobile
Add spacing on the top and bottom of the section in tablet and mobile views.
Enter a pixel number (e.g. 30 px).
Margin desktop
Add external spacing (left/right) around the section in the desktop view.
Enter a pixel number (e.g. 0 px).
Margin tablet, mobile
Add external spacing (left/right) around the section in tablet and mobile views.
Enter a pixel number (e.g. 0 px).
2.1. Block
Image Block
Upload an image
Width: Slide to the desired value or enter a pixel number (140 px)
Heading
Add the main heading text displayed in the hero banner. Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Enter the default or example heading text (this field pre-fills or suggests "GET READY NOW" as a sample prompt).
Width
Adjust the maximum width of the heading text container. Enter a pixel number (e.g. 800 px) or leave blank for full available width.
Font size
Set the font size for the heading text across devices.
Desktop
Enter the font size for desktop view. Enter a pixel or point number (e.g. 54 px).
Tablet
Enter the font size for tablet view. Enter a pixel or point number
Mobile
Enter the font size for mobile view. Enter a pixel or point number
Text
Add the subheading text displayed in the hero banner. Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Enter the default or example subheading text
Width
Adjust the maximum width of the subheading text container. Enter a pixel number (e.g. 800 px) or leave blank for full available width.
Font size
Set the font size for the subheading text across devices. Note: Overall theme font for this subheading is fixed at 12 pt base; use these overrides only if needing device-specific adjustments beyond the global 12 pt setting.
Desktop
Enter the font size for desktop view. Enter a pixel or point number. Recommended: Match global 12 pt unless scaling up for emphasis.
Tablet
Enter the font size for tablet view. Enter a pixel or point number
Mobile
Enter the font size for mobile view. Enter a pixel or point number. Recommended: Keep at 14 pt or slightly reduce for better readability on small screens.
Button
Button label: Add content for the button
Button Link: Search or insert a link
3. Mini banner slider
Section header
Heading
Add the main heading for the mini banner slider section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Shop by Category
Enter or edit the heading text (this field can pre-fill or suggest "Shop by Category" as an example).
Heading size
Select the size of the heading text.
Small
Medium
Large
Subheading
Add optional subheading text below the main heading.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Description
Add optional longer description text for the section.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Alignment
Choose the alignment of the header content (heading, subheading, description).
Default
Center
Button label
Add text for the call-to-action button in the section header.
Button link
Enter the destination URL for the header button.
Open this link in a new window
Toggle this ON to make the header button open its link in a new browser tab.
Show swiper navigation
Toggle this ON to display previous/next arrows or dots for sliding through the banners.
Section body
Information position
Choose where the text overlay appears relative to the media.
Inside
Outside
Information color scheme
Adjust the color scheme applied to text, buttons and overlays inside the banners.
Scheme 3 (select from available theme color schemes).
Media ratio on desktop & tablet
Select the aspect ratio for banner images/videos on desktop and tablet views (e.g. Landscape 16:9, Square 1:1, Portrait 4:5, Natural/original).
Media ratio on mobile
Select the aspect ratio optimized for mobile view (often taller ratios like 3:4 or 9:16 for better vertical fit).
Desktop
Settings specific to desktop display of each slide/banner (repeatable block settings for adding multiple slides follow similar structure per slide: upload image/video, add heading, subheading, button, link, etc.).
Tablet
Settings specific to tablet display (inherits from desktop in many cases unless overridden).
Mobile
Settings specific to mobile display (inherits or uses separate ratio/optimizations).
Section layout
Color scheme
Adjust the overall section background and border color scheme.
Scheme 1 (select from available theme color schemes).
Background image
Select an optional background image for the entire section.
Upload images
Select
Explore free images
Section full width
Toggle this ON to make the section span the full viewport width (edge-to-edge).
Content full width
Toggle this ON to allow the slider content to use full available width inside the section.
Padding desktop
Add top and bottom spacing inside the section on desktop.
Enter a pixel number (e.g. 40 px).
Padding tablet, mobile
Add top and bottom spacing inside the section on tablet and mobile.
Enter a pixel number (e.g. 20 px).
Margin desktop
Add external left/right spacing around the section on desktop.
Enter a pixel number (e.g. 0 px).
Margin tablet, mobile
Add external left/right spacing around the section on tablet and mobile.
Enter a pixel number (e.g. 0 px).
3.1. Item
Image
Desktop
Upload or select the main image to display on desktop and larger screens.
Upload images
Select an existing image from your Shopify files (example: putting-on-your-shoes_925x_1b188cf2-dc79-4abe-b49e-e4f91129cb46.jpg).
Explore free images
Browse and insert from Shopify's free stock image library.
Mobile
Upload or select a separate image optimized for mobile views (optional; falls back to desktop image if not set).
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Video
Desktop
Select a Shopify-hosted video file to play on desktop instead of or alongside the image (optional).
Select
Mobile
Select a Shopify-hosted video file optimized for mobile (optional; falls back to desktop video or image).
Select
Media link
Enter a URL to make the entire image or video area clickable, directing visitors to the specified page or product.
Heading
Add the main heading text for this banner item.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Running
Enter or edit the heading text (this field can pre-fill or suggest "Running" as an example).
Subheading
Add optional subheading text that appears below the heading.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Button one
Button label
Add text for the primary call-to-action button.
Button link
Enter the destination URL for the primary button.
Button two
Button label
Add text for the optional secondary call-to-action button.
Button link
Enter the destination URL for the secondary button.
4. Product mixer
Section header
Heading
Add the main heading text for the product mixer section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Featured collections
Enter or edit the heading text (this field can pre-fill or suggest "Featured collections" as an example).
Heading size
Select the size of the heading text.
Small
Medium
Large
Description
Add optional longer description text that appears below the heading.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Our most-wanted styles, handpicked for performance and everyday wear. Designed to move with you, built to last, and ready for any workout or off-duty moment.
Enter or edit the description text (this field can pre-fill or suggest the example text shown above).
Button label
Add text for the call-to-action button in the section header.
Discover now
Enter or edit the button text (this field can pre-fill or suggest "Discover now" as an example).
Button link
Enter the destination URL for the header button.
Open this link in a new window
Toggle this ON to make the header button open its link in a new browser tab.
Section body
Desktop column
Select the number of product columns to display on desktop screens (typically options like 2, 3, 4, 5, or 6 columns depending on theme).
Tablet column
Select the number of product columns to display on tablet screens (usually fewer than desktop, e.g. 2 or 3 columns).
Mobile
Select the number of product columns to display on mobile screens (commonly 1 or 2 columns for better readability).
Section layout
Color scheme
Adjust the overall color scheme for the section background, text, and product cards.
Scheme 1 (select from available predefined color schemes in the theme).
Background image
Select an optional background image for the entire section.
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Section full width
Toggle this ON to display the section edge-to-edge across the full viewport width.
Content full width
Toggle this ON to allow the product grid/content to expand to full available width inside the section.
Padding desktop
Add top and bottom internal spacing for the section on desktop views.
Enter a pixel number (e.g. 60 px).
Padding tablet, mobile
Add top and bottom internal spacing for the section on tablet and mobile views.
Enter a pixel number (e.g. 40 px).
Margin desktop
Add external left and right spacing around the section on desktop views.
Enter a pixel number (e.g. 0 px).
Margin tablet, mobile
Add external left and right spacing around the section on tablet and mobile views.
Enter a pixel number (e.g. 0 px).
4.1. Item
Tab name
Add the name of this tab as it will appear in the navigation or selector.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Choose your top
Enter or edit the tab name text (this field can pre-fill or suggest "01. Choose your top" as an example).
Description
Add the descriptive text that explains or promotes the content of this tab.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Breathable, lightweight, and built for motion. Pick a top that keeps you cool, comfortable, and focused from warm-up to finish.
Enter or edit the description text (this field can pre-fill or suggest the example text shown above).
Collection
Select the product collection to display products from in this tab.
Top
Choose or search for the collection named "Top" (or any desired collection; this field links to your store's collections).
Maximum products to show
Set the maximum number of products to display in this tab's grid or list.
Enter a number (e.g. 12).
5. Product tab
Section header
Heading
Add the main heading text displayed at the top of the product tab section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Explore the Products
Enter or edit the heading text (this field can pre-fill or suggest "Explore the Products" as an example).
Heading size
Select the size of the heading text.
Small
Medium
Large
Subheading
Add optional subheading text that appears below the main heading.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Description
Add optional longer description text for the section header.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Our performance-driven sports products designed to elevate your game.
Enter or edit the description text (this field can pre-fill or suggest the example text shown above).
Alignment
Choose the alignment of the header content (heading, subheading, description).
Default
Center
Section body
Image
Upload or select the main promotional image for the product tab section (often displayed as a background or featured visual).
Upload images
Select an existing image from your Shopify files (example: product-tab-image.jpg).
Explore free images
Browse and insert from Shopify's free stock image library.
Product style
Choose the display style for the products in the tabs.
Default
Variant
Maximum products to show
Set the maximum number of products to display across all tabs or per tab (depending on theme implementation).
Enter a number (e.g. 12).
Note: If collections have more products, only this number will be shown, typically sorted by featured order.
Large desktop column
Select the number of product columns to display on extra-large desktop screens (e.g. 4, 5, or 6 columns).
Desktop column
Select the number of product columns on standard desktop screens (e.g. 3 or 4 columns).
Tablet column
Select the number of product columns on tablet screens (e.g. 2 or 3 columns).
Mobile column
Select the number of product columns on mobile screens (usually 1 or 2 columns for optimal viewing).
Button label
Add text for the call-to-action button (often appears below the tabs or at the bottom of the section).
Section layout
Color scheme
Adjust the overall color scheme for the section background, text, tabs, and product cards.
Scheme 1 (select from available predefined color schemes in the theme).
Section full width
Toggle this ON to display the section edge-to-edge across the full viewport width.
Content full width
Toggle this ON to allow the product grid and tab content to expand to full available width inside the section.
Padding desktop
Add top and bottom internal spacing for the section on desktop views.
Enter a pixel number (e.g. 60 px).
Padding tablet, mobile
Add top and bottom internal spacing for the section on tablet and mobile views.
Enter a pixel number (e.g. 40 px).
Margin desktop
Add external left and right spacing around the section on desktop views.
Enter a pixel number (e.g. 0 px).
Margin tablet, mobile
Add external left and right spacing around the section on tablet and mobile views.
Enter a pixel number (e.g. 0 px).
5.1. Tab
Tab name
Add the name of this tab as it will appear in the tab navigation or selector.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Soccer
Enter or edit the tab name text (this field can pre-fill or suggest "Soccer" as an example).
Collection
Select the product collection whose items will be displayed when this tab is active.
Soccer
Choose or search for the collection named "Soccer" (or any desired collection; this field links to your store's available collections).
6. Split hero showcase
Section header
Heading
Add the main heading text displayed prominently in the split hero showcase section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Heading size
Select the size of the heading text.
Small
Medium
Large
Subheading
Add optional subheading text that appears below the main heading.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Description
Add optional longer description text for the section header.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Alignment
Choose the alignment of the header content (heading, subheading, description).
Default
Center
Button label
Add text for the call-to-action button in the section header.
Button link
Enter the destination URL for the header button.
Open this link in a new window
Toggle this ON to make the header button open its link in a new browser tab.
Section body
Desktop banner height
Adjust the height of the banner/media display on desktop views.
Enter a pixel number (e.g. 600 px).
Tablet banner height
Adjust the height of the banner/media display on tablet views.
Enter a pixel number (e.g. 450 px).
Mobile banner height
Adjust the height of the banner/media display on mobile views.
Enter a pixel number (e.g. 400 px).
Section footer
Button label
Add text for the call-to-action button in the section footer (often a secondary or global call-to-action).
Button link
Enter the destination URL for the footer button.
Open this link in a new window
Toggle this ON to make the footer button open its link in a new browser tab.
Section layout
Color scheme
Adjust the overall color scheme for the section background, text, and overlay elements.
Scheme 1 (select from available predefined color schemes in the theme).
Background image
Select an optional background image for the entire section.
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Section full width
Toggle this ON to display the section edge-to-edge across the full viewport width.
Content full width
Toggle this ON to allow the content (split banners, text, buttons) to expand to full available width inside the section.
Padding desktop
Add top and bottom internal spacing for the section on desktop views.
Enter a pixel number (e.g. 80 px).
Padding tablet, mobile
Add top and bottom internal spacing for the section on tablet and mobile views.
Enter a pixel number (e.g. 50 px).
Margin desktop
Add external left and right spacing around the section on desktop views.
Enter a pixel number (e.g. 0 px).
Margin tablet, mobile
Add external left and right spacing around the section on tablet and mobile views.
Enter a pixel number (e.g. 0 px).
6.1. Item (Maximum 3 items)
Image
Image
Upload or select the main image for this item/slide in the split hero showcase.
Upload images
Select an existing image from your Shopify files (example: black-bag-over-the-shoulder_925x_7f23744e-2641-4dd8-bfb2-6070418c087a.jpg).
Explore free images
Browse and insert from Shopify's free stock image library.
Link
Enter a URL to make the entire image area clickable, directing to the specified page, product, or collection.
Size
Choose how the image fits within its container.
Auto
Display the image at its natural size and aspect ratio (may leave space or crop depending on container).
Cover
Scale the image to cover the entire container while maintaining aspect ratio (may crop edges; recommended for full-background effect).
Information
Color scheme
Adjust the color scheme for text, buttons, and overlays on this specific item.
Scheme 1 (select from available predefined color schemes in the theme).
Heading
Add the main heading text for this item.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Trail Running
Enter or edit the heading text (this field can pre-fill or suggest "Trail Running" as an example).
Subheading
Add optional subheading text that appears below the heading.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Description
Add optional longer descriptive text for this item.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Grip every mile. Rugged footwear and apparel designed for traction, protection, and stability on unpredictable terrain.
Enter or edit the description text (this field can pre-fill or suggest the example text shown above).
Button label
Add text for the call-to-action button on this item.
Shop now
Enter or edit the button text (this field can pre-fill or suggest "Shop now" as an example).
Button link
Enter the destination URL for the button.
7. Mini banner slider
Section header
Heading
Add the main heading text for the mini banner slider section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Feature
Enter or edit the heading text (this field can pre-fill or suggest "Feature" as an example).
Heading size
Select the size of the heading text.
Small
Medium
Large
Subheading
Add optional subheading text that appears below the main heading.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Description
Add optional longer description text for the section header.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Alignment
Choose the alignment of the header content (heading, subheading, description).
Default
Center
Button label
Add text for the call-to-action button in the section header.
Button link
Enter the destination URL for the header button.
Open this link in a new window
Toggle this ON to make the header button open its link in a new browser tab.
Show swiper navigation
Toggle this ON to display navigation controls (arrows and/or dots) for sliding through the mini banners.
Section body
Information position
Choose where the text overlay (heading, subheading, description, buttons) appears relative to the media.
Inside
Outside
Media ratio on desktop & tablet
Select the aspect ratio for banner images or videos on desktop and tablet views (e.g. Landscape 16:9, Square 1:1, Portrait 4:5, Natural/original).
Media ratio on mobile
Select the aspect ratio optimized for mobile view (often taller ratios like 3:4 or 9:16 for vertical screens).
Desktop
Settings specific to desktop display of each slide/banner (repeatable block settings for adding multiple slides follow similar structure per slide: upload image/video, add heading, subheading, button, link, etc.).
Tablet
Settings specific to tablet display (inherits from desktop in many cases unless overridden).
Mobile
Settings specific to mobile display (inherits or uses separate ratio/optimizations).
Section layout
Color scheme
Adjust the overall color scheme for the section background, text, and banner elements.
Scheme 1 (select from available predefined color schemes in the theme).
Background image
Select an optional background image for the entire section.
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Section full width
Toggle this ON to display the section edge-to-edge across the full viewport width.
Content full width
Toggle this ON to allow the slider content to expand to full available width inside the section.
Padding desktop
Add top and bottom internal spacing for the section on desktop views.
Enter a pixel number (e.g. 40 px).
Padding tablet, mobile
Add top and bottom internal spacing for the section on tablet and mobile views.
Enter a pixel number (e.g. 20 px).
Margin desktop
Add external left and right spacing around the section on desktop views.
Enter a pixel number (e.g. 0 px).
Margin tablet, mobile
Add external left and right spacing around the section on tablet and mobile views.
Enter a pixel number (e.g. 0 px).
7.1. Item
Item
Image
Desktop
Upload or select the main image to display on desktop and larger screens.
Upload images
Select an existing image from your Shopify files (example: city-woman-fashion_925x_2x_103736b2-2443-4f5c-a931-f767d1b67ac8.jpg).
Explore free images
Browse and insert from Shopify's free stock image library.
Mobile
Upload or select a separate image optimized for mobile views (optional; falls back to desktop image if not set).
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Video
Desktop
Select a Shopify-hosted video file to play on desktop instead of or alongside the image (optional).
Select
Mobile
Select a Shopify-hosted video file optimized for mobile (optional; falls back to desktop video or image).
Select
Media link
Enter a URL to make the entire image or video area clickable, directing visitors to the specified page or product.
Heading
Add the main heading text for this item.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Free Your Stride
Enter or edit the heading text (this field can pre-fill or suggest "Free Your Stride" as an example).
Subheading
Add optional subheading text that appears below the heading.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Redesigned with lightweight stability and plush cushioning for support to go further.
Enter or edit the subheading text (this field can pre-fill or suggest the example text shown above).
Button one
Button label
Add text for the primary call-to-action button.
Shop Women's
Enter or edit the primary button text (this field can pre-fill or suggest "Shop Women's" as an example).
Button link
Enter the destination URL for the primary button.
Button two
Button label
Add text for the optional secondary call-to-action button.
Shop Men's
Enter or edit the secondary button text (this field can pre-fill or suggest "Shop Men's" as an example).
Button link
Enter the destination URL for the secondary button.
8. Image with tab
Section body
Color scheme
Adjust the color scheme applied to the text, overlays, and content elements within the tabbed image area.
Scheme 4 (select from available predefined color schemes in the theme).
Image
Upload or select the main image to display in the section.
Upload images
Select an existing image from your Shopify files (example: putting-on-your-shoes_925x_1b188cf2-dc79-4abe-b49e-e4f91129cb46.jpg).
Explore free images
Browse and insert from Shopify's free stock image library.
Image ratio
Select the aspect ratio for the displayed image (applies to desktop, tablet, and mobile unless overridden elsewhere).
Options typically include: Natural (original ratio), Square (1:1), Landscape (e.g. 16:9), Portrait (e.g. 4:5 or 3:4), etc.
Section layout
Color scheme
Adjust the overall color scheme for the section background and surrounding elements (may differ from the body color scheme if separate controls exist).
Scheme 4 (select from available predefined color schemes in the theme).
Background image
Select an optional background image for the entire section (displays behind the main image and tabs).
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Section full width
Toggle this ON to display the section edge-to-edge across the full viewport width.
Content full width
Toggle this ON to allow the image, tabs, and any overlaid content to expand to full available width inside the section.
Padding desktop
Add top and bottom internal spacing for the section on desktop views.
Enter a pixel number (e.g. 60 px).
Padding tablet, mobile
Add top and bottom internal spacing for the section on tablet and mobile views.
Enter a pixel number (e.g. 40 px).
Margin desktop
Add external left and right spacing around the section on desktop views.
Enter a pixel number (e.g. 0 px).
Margin tablet, mobile
Add external left and right spacing around the section on tablet and mobile views.
Enter a pixel number (e.g. 0 px).
8.1. Tab
Heading
Add the main heading text for this tab.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
OUR PHILOSOPHY
Enter or edit the heading text (this field can pre-fill or suggest "OUR PHILOSOPHY" as an example).
Description
Add the descriptive or explanatory text content for this tab.
9. Group product
Section header
Heading
Add the main heading text for the group product section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Follow us on ins @Runase
Enter or edit the heading text (this field can pre-fill or suggest "Follow us on ins @Runase" as an example).
Heading size
Select the size of the heading text.
Small
Medium
Large
Subheading
Add optional subheading text that appears below the main heading.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Description
Add optional longer description text for the section header.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Alignment
Choose the alignment of the header content (heading, subheading, description).
Default
Center
Button label
Add text for the call-to-action button in the section header.
Button link
Enter the destination URL for the header button.
Open this link in a new window
Toggle this ON to make the header button open its link in a new browser tab.
Show swiper navigation
Toggle this ON to display navigation controls (arrows and/or dots) when the section is set to slider mode.
Section body
Type
Choose the display format for the grouped products.
Grid
Display products in a static grid layout.
Slider
Display products in a horizontal sliding carousel.
Image ratio
Select the aspect ratio for product images across all devices (e.g. Square 1:1, Landscape 3:2, Portrait 2:3, Natural/original).
Thumbnail limit
Set the maximum number of product thumbnails/items to show in the section (applies to both grid and slider modes).
Enter a number (e.g. 8).
Slider configuration
Desktop
Adjust slider-specific settings for desktop views (e.g. slides per view, spacing, autoplay, loop, etc.; exact options depend on theme implementation).
Tablet
Adjust slider-specific settings for tablet views (inherits from desktop or allows independent control).
Grid configuration
Desktop
Select the number of columns for the grid layout on desktop screens (e.g. 3, 4, 5 columns).
Tablet
Select the number of columns for the grid layout on tablet screens (e.g. 2 or 3 columns).
Mobile
Select the number of columns for the grid layout on mobile screens (typically 1 or 2 columns).
Section footer
Button label
Add text for the call-to-action button in the section footer (often used as a secondary or "view all" button).
Button link
Enter the destination URL for the footer button.
Section layout
Color scheme
Adjust the overall color scheme for the section background, text, product cards, and borders.
Scheme 3 (select from available predefined color schemes in the theme).
Background image
Select an optional background image for the entire section.
Upload images
Select an existing image from your Shopify files.
Explore free images
Browse and insert from Shopify's free stock image library.
Section full width
Toggle this ON to display the section edge-to-edge across the full viewport width.
Content full width
Toggle this ON to allow the product grid/slider content to expand to full available width inside the section.
Padding desktop
Add top and bottom internal spacing for the section on desktop views.
Enter a pixel number (e.g. 50 px).
Padding tablet, mobile
Add top and bottom internal spacing for the section on tablet and mobile views.
Enter a pixel number (e.g. 30 px).
Margin desktop
Add external left and right spacing around the section on desktop views.
Enter a pixel number (e.g. 0 px).
Margin tablet, mobile
Add external left and right spacing around the section on tablet and mobile views.
Enter a pixel number (e.g. 0 px).
9.1. Item
Image
Upload or select the main image for this item (often used as a featured visual, social-style post image, or promotional banner).
Upload images
Select an existing image from your Shopify files
Explore free images
Browse and insert from Shopify's free stock image library.
Heading
Add the main heading text for this item.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Enter or edit the heading text
Description
Add the main body text or caption for this item, such as a product announcement, social-style post, or promotional message.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Enter or edit the description text
Products
Select one or more products to associate with this item (displays product cards, add-to-cart options, or linked images below or alongside the description).
10. Gallery
12. Footer
Color scheme
Choose the color scheme for the footer.
Logo
Logo copyright
Select an image as the logo copyright for your site.
Logo copyright width
Adjust the width of the logo copyright.
Enter a pixel number (e.g. 91).
Logo bottom
Select an image as the logo at the bottom of the page.
Language selector
Enable language selector
Toggle this ON to show the language selector dropdown.
Payment method
Show payment method
Toggle this ON to show available payment methods at your store.
Follow on Shop
To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled.
Enable Follow on Shop
Toggle this ON to enable Follow on Shop.
Desktop column
Select the number of columns displayed on the desktop view.
Enter a number (e.g. 3).
Tablet column
Select the number of columns displayed on the tablet view.
Enter a number (e.g. 3).
Mobile column
Select the number of columns displayed on the mobile view.
Enter a number (e.g. 1).
Section padding
Desktop vertical spacing
Adjust the vertical padding of the footer on the desktop view.
Enter a pixel number (e.g. 45 px).
Tablet, mobile vertical spacing
Adjust the vertical padding of the footer on the tablet, mobile view.
Enter a pixel number (e.g. 45 px).
Menu
Heading
Add the heading of this section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Menu
Choose a menu for the footer menu item.
Now you know how to customize the Runase theme to boost your store performance. If you have any questions or need assistance, please don't hesitate to contact Tapita support at support@tapita.io