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
🤔 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.
