User Guide

Search limit to:






[OTSB User Guide] General Template - DO NOT EDIT

by Admin on Jul 29, 2025

The [Section Name] section displays a selected collection with layout and media options, allowing you to showcase products with videos, images, headings, and buttons for enhanced presentation.

[SECTION IMAGE]

1. Section Components

Section [Section Name] [Brief one-line description of what this section does]
Available block [Block 1 Name] [One-line description of what this block does]
[Block 2 Name] [One-line description of what this block does]

2. Location & Setup

To add & set up the Featured Categories section:

  • Open the Shopify Theme Editor (Online store > Themes > Customize)
  • Decide where you want to place the new section.
  • Click “Add Section”.
  • Select “Featured Categories”.

3. Highlight Features

  • Slider Layout: Choose horizontal or vertical product sliders.
  • Block Priority: Products > Video > Image (used in vertical layout).
  • Sticky Title Cards: Option to pin titles during scroll.
  • Custom Blocks: Use headings, images, and buttons creatively.

4. Common Use Cases

🤔 How to highlight a product?

example content

💡 Note: Best used when there are only 1–3 product blocks to keep layout clean.

🤔 How to create a sticky heading?

example content

Pro tip: Sticky headings work best with long vertical sliders.

🤔 How to add video next to products?

example content

5. Layout Recommendations

🤔 Layout 1: Basic

STEP 1: Go to Theme Editor > Header > Mobile navigation section.

STEP 2: Click “Add block” under the section and choose the Account and log in block, the Cart block, or the Social icons block.

STEP 3: Drag and drop the block to arrange its position.

STEP 4: Click "Save" and preview.

🤔 Layout 2: Highlight Heading

✍️Why would you need to use metafield for collection images?

  • You want to show a designed image for the collection on the menu, without changing the featured images of that collection.
  • You want to show higher-resolution images on the menu.

✍️ How to do it?

STEP 1: Create a collection metafield: 

  • In Shopify admin, go to Settings > Metafields and Metaobjects > Collection > Add definition.
  • Give your metafield a name.
  • Choose type as File.
  • Click Save.

STEP 2: Assign a value for the collection metafield:

  • Go back to Shopify admin, and click on the Products Collection tab.
  • Choose a collection.
  • Scroll down to Metafields.
  • Upload an image in the newly created collection metafield.
  • Click Save.

STEP 3: Set up in Theme Editor: 

  • In Theme Editor (Visit it by clicking on Online store Themes Customize)
  • Click on Mobile navigation > tap on a menu block > scroll to Auto-fill collection images with metafield on the newly appeared panel.
  • Under the metafield's name, copy the text after “custom.”→ Paste to this “Auto-fill collection images with metafield” field. (See the image below).

STEP 4: Click "Save".

🤔 Layout 3: With Buttons

✍️Why would you need to use Quick access blocks?

  • You want to show a designed image for the collection on the menu, without changing the featured images of that collection.
  • You want to show higher-resolution images on the menu.

✍️ How to add Quick access blocks to the menu?

STEP 1:

In the Theme Editor, go to Mobile navigation > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Menu) > Scroll down and find the Quick access blocks section on the new right panel.

STEP 2: 

Turn on the toggle that says “Enable quick access blocks”.

STEP 3:

Customize the look of all the blocks: Enable swipe on mobile, corner radius, size of icon and font, colors of text, background, etc.

STEP 4: 

Scroll down to the Block 1 group to:

  • (optional) Add an icon from the list or enter the SVG code. 
  • Enter the Block title.
  • Assign a Block link for it.

STEP 5: (optional) Repeat the process of Step 3 for Block 2, Block 3, and Block 4 if you want to add more quick links.

STEP 6: Click "Save".

🤔 Layout 4: With Videos

There are two ways to add a promotional image to your mobile menu:

  • Method 1: Add the image inside a menu block. (This makes the image shown only if the customers open those menu items).
  • Method 2: Add the image to the Mobile navigation section. (This makes the image shown right outside when the customers view the mobile menu).

✍️ Method 1: To show the image inside a menu item:

STEP 1: 

In the Theme Editor, go to Mobile navigation > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Menu) > Scroll down and find the Promotion section on the new right panel.

STEP 2: 

In the Image setting, click "Select" to assign an image.

STEP 3: 

Tick 'Enable text overlay' to make the text appear on the promotion image, and adjust the Overlay opacity and other Colors as needed.

STEP 4: Add more content:

  • Add/change the content of a promotion block.
  • Add a button for the promotion image.

STEP 5: Click “Save” when done.


✍️ Method 2: To show the image right outside the mobile menu:

STEP 1: 

In the Theme Editor, go to Mobile navigation > Add an Image block, drag and drop it to the position you want.

STEP 2: 

In the Image setting, click "Select" to assign an image.

STEP 3: 

Add a link for the Image or click to open this link in a new window.

STEP 4: Click “Save” when done.

🤔 Layout 5: tbu

Adding a small label next to the menu name is a great way to draw user attention.

To bring the label up, just do these steps:

STEP 1:

In the Theme Editor, go to Mobile navigation > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Menu) > Scroll down and find the Menu label section on the new right panel.

STEP 2: 

Enter content into the Label field.

STEP 3:

Customize the colors of the label as you want.

STEP 4: (Optional)

Choose an existing icon from the Icon dropdown list, or if you want to use a different icon from the list, there are two options:

  • In the Icon drop-down list, choose Use another icon, then copy the icon name from this theme icon list and paste it into the Use another icon field.
  • In the Icon drop-down list, choose Use another icon, then paste the SVG code of your go-to icon into the Custom icon (SVG code) field.

STEP 5: Click "Save".

🤔 Layout 6: tbu

Eurus lets you draw attention to specific menu items using stylish effects like sparkles, circles, or underlines. 

Here’s how to set it up:

STEP 1:

In the Theme Editor, go to the Mobile navigation section under Header group > find the Menu highlight section.

STEP 2: 

Toggle on the Enable menu highlight setting.

STEP 3:

Enter the menu names into the Highlight menus. Some rules to notice are:

  • Menu names MUST MATCH EXACTLY, including case and spacing. 
  • Enter one menu name per line. For example, if the menu name is "NEW ARRIVALS," you must enter NEW ARRIVALS, exactly as it appears in your menu.

⚠️ Note: Don’t add extra space before or after, e.g., "NEW ARRIVALS " (with a trailing space), as it won't work.

    • Include translations for multilingual stores.

    STEP 4: 

    Choose the highlight Style you want & change the color.

    STEP 5: Click "Save".

    6. Support Information

    Need help? Contact our support team at Omni Themes Support.