For any website, the menu does more than just list pages — it guides shoppers, shapes their journey, and helps turn visits into purchases. That’s why a clear, well-structured menu is essential to both user experience and store performance.

Tapita Mega Menu #2 Section is a powerful, flexible navigation section that lets you display a rich dropdown menu with multiple content blocks. You can showcase collections, blog posts, product grids, image galleries, and more, all inside a menu item.

1. Two Layout Options: Choose between a classic horizontal or side vertical menu layout to best fit your store’s structure and shopping experience
2. Multi-Functional Block System: Mix and match blocks for products, blog posts, social media, store info, image galleries, and more – each designed to serve a different merchandising purpose
3. Visual Navigation Enhancements: Add images to categories and featured content to create a more engaging and intuitive menu experience
4. Fully Customizable Design: Tailor every aspect – layout, typography, spacing, and colors – to stay consistent with your brand identity
5. Responsive & Speed-Optimized: Works seamlessly across all devices while maintaining smooth performance and fast load times
   

👉 View section demo

1. How to add the Mega Menu #2 section

For instructions on how to add a mega menu section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.

2. How to customize the Mega Menu #2 section

After adding your desired Mega Menu #2 Section to your store, you can customize its content as follows within the Shopify Theme Editor.

1. Menu Settings Configuration

Step 1: Choose a Menu

Select the menu you want to show in this section. 

You can configure your menus in your Shopify admin by going to Content → Menus.

Step 2: Logo Settings Configuration

Logo image: 

Select a logo image for the menu.

If no image is selected, the shop name will be displayed instead.

1. Logo height
1. Height of the logo image. The menu bar height will adapt to the logo height.
2. Enter a number in pixels (e.g. 10) to adjust the height of the logo image.
2. Logo padding left
1. Left padding for the logo image or text (shop name).
2. Enter a number in pixels (e.g. 10) to adjust the left padding of the logo image.
   

Step 3: Menu Wrapper Settings Configuration

1. Menu width
1. Adjust the display width of the menu.
   

Step 4: Container Styling Configuration

1. Container background color
1. Sets the background color for the whole menu container. 
2. Example: Use HEX (e.g. #FFFFFF for white).
   
2. Container vertical padding
1. Adds space above and below the menu container.
2. Enter a number in pixels (e.g. 10) to create breathing room.
3. Container horizontal padding
1. Adds space to the left and right of the menu container. This helps center your content or prevent it from stretching edge-to-edge.
2. Enter a number in pixels (e.g. 10) to create breathing room.
   

Step 5: Menu List Padding

1. List vertical padding
1. Set the top and bottom padding for the menu list container.
2. Enter a  number in pixels (e.g. 10) to create breathing room.
2. List horizontal padding
1. Set the left and right padding for the menu list container.
2. Enter a  number in pixels (e.g. 10) to create breathing room.
   

Step 6: Menu Item Styling

1. Control the appearance of each top-level clickable menu item.
1. Text color / Text hover color
2. Defines the text color of menu items in their default state.
3. Enter a HEX color code.
2. Background Color
1. Sets the background color of the menu item in its normal state.
2. Enter a HEX color code. Example: #FFFFFF.
3. Background Hover Color
1. Sets the background color when the user hovers over the menu item.
2. Enter a HEX color code. Example: #F5F5F5.
4. Border Radius
1. Controls the roundness of the menu item's corners.
2. Enter a pixel value. Use 0 for square corners or 4–8 for rounded ones.
5. Vertical Padding
1. Adds space above and below the text inside each menu item.
2. Enter a pixel value.
6. Horizontal Padding
1. Adds space on the left and right sides of the text inside each menu item.
2. Enter a pixel value. 
   

1. Font size
1. Set font size for menu item text.
2. Enter a pixel value.
2. Font family
1. Choose from a diverse font family options.
   

1. Customize the appearance of dropdown menus when hovering over top-level items with submenus.
2. Show dropdown arrow: Toggle ON to show arrows next to menu items with blocks.
3. Custom arrow icon: Upload your own SVG or PNG arrow. Leave blank to use the default arrow.
   

Step 8: See More Button Styling

This button appears in blocks like blogs or collections when you have more items than shown.

1. Button color & hover color: Set the button’s text color for normal and hover states.
2. Button background color & hover background color: Sets the background fill for the button and hover states.
3. Button padding (top & bottom): Controls button size by adding space inside. Larger padding = taller button.
4. Button font size & font weight: Adjust the size and boldness of the button text.
   

Step 9: Sticky Menu Settings

Make your menu stay visible as users scroll down the page.

1. Enable sticky menu: When ON, the menu will “stick” to the top of the screen as the user scrolls.
2. Sticky menu z-index: Defines layering priority.
3. Move to header when sticky: Toggle this ON to move the mega menu into the header element when sticky menu is enabled. 
4. Header class: CSS class of the header element (leave blank to use default <header> tag)
   

Add custom styles to this section only.

2. Menu Block Configuration

Each block represents one clickable menu item (like Home, Shop, Collections, etc.). You can customize the layout and content of each block independently.

General Block Settings

1. Block Title
1. Custom title for this block. Note: menu item’s name which is set in the Menus of Shopify Settings will overwrite the block title. 
2. Only used in sidebar for extra blocks that don't have corresponding navigation items.
2. Layout Type
1. Controls whether items inside the block are stacked vertically or arranged horizontally.
2. Choose Vertical or Horizontal depending on how you want the content aligned.
3. Menu Width
1. Defines how wide the entire menu block stretches.
2. Select either Full Width (spans the whole screen) or Page Width (matches your page content width).
4. Background Color
1. Sets the background color for the menu block.
2. Enter a hex code (e.g., #FFFFFF) or use the color picker.
5. Vertical Padding / Horizontal Padding
1. Adds space inside the menu block vertically or horizontally.
2. Enter values in pixels to control internal spacing.
   

Blog Block: Display a selection of recent blog posts from your store.

Block Title Styling

1. Title font size: Set the font size for the main block title. Enter a pixel number.
2. Title font weight: Set the font weight (boldness) for the block title.
3. Title color: Set the color for the main block title. Type in color hex code (e.g. 1B2E3C) or drag to adjust to your desired color. 
4. Title line height: Set the line height for the block title.
   

Blog Subtitle Styling

1. Subtitle font size: Set the font size for the block subtitle.
2. Subtitle font weight: Set the weight for the block subtitle.
3. Subtitle color: Set the color for the block subtitle. Type in color hex code (e.g. 1B2E3C) or drag to adjust to your desired color. 
4. Subtitle line height: Adjust the line height for the block subtitle. 
   

Blog Card Title Styling

1. Card title font size: Set the font size for blog card titles (regular cards).
2. Card title font weight: Set font weight for blog card titles
3. Card title color: Set the color for the blog card subtitle. Type in color hex code (e.g. 1B2E3C) or drag to adjust to your desired color. 
4. Card title line height: Adjust the line height for blog card titles.
   

Configurations are similar to Block Title Styling, Block Subtitle Styling, and Blog Card Title Styling above. 

Blog Card Author Styling

Configurations are similar to Block Title Styling, Block Subtitle Styling, and Blog Card Title Styling above.

Blog Card Gap Styling

Configurations are similar to Block Title Styling, Block Subtitle Styling, and Blog Card Title Styling above. 

Blog Card Date Styling

Configurations are similar to Block Title Styling, Block Subtitle Styling, and Blog Card Title Styling above. 

1. Select Blog: Choose a Shopify blog to display posts from.
2. Total number of posts to display: Set how many posts will appear in the block (e.g., 3 or 4).
3. Position of highlighted post: Highlight a specific post to make it visually stand out. Enter the position (e.g., 1 for the first post). Enter 0 to disable highlighting.
4. Blog layout: Choose between Row (horizontal) or Column (vertical) display.
5. Width of highlighted post: Controls the relative width of the highlighted post. Use a number between 2–6.
   

See More Button

1. Button text: Text for the button that links to your full blog page.
2. Button URL: Destination link for the button.
   

Collection Gallery Block: Display up to 3 collections with custom titles, descriptions, and images.

1. Width
1. Determines the width of the gallery block.
2. Enter a value in columns (e.g., 8 col).
   
2. Grid Row Height
1. Sets the height of each row in the desktop grid layout.
2. Enter a value in pixels (e.g., 50 px).
3. Mobile Item Height
1. Defines the fixed height for all items on mobile devices.
2. Enter a value in pixels (e.g., 200 px).
   

2, Block Title Styling

1. Title Font Size
1. Sets the font size for the main block title.
2. Enter a value in pixels (e.g., 18 px).
2. Title Font Weight
1. Adjusts the font weight (boldness) for the block title.
2. Enter a value (e.g., 600).
   
3. Title Color
1. Specifies the color for the main block title.
2. Enter a HEX color code (e.g., #333333).
4. Title Line Height
1. Controls the line height for the block title.
2. Enter a value (e.g., 1.2).
   
5. Subtitle Font Size
1. Sets the font size for the block subtitle.
2. Enter a value in pixels (e.g., 14 px).
6. Subtitle Font Weight
1. Adjusts the font weight for the block subtitle.
2. Enter a value (e.g., 400).
   
7. Subtitle Color
1. Specifies the color for the block subtitle.
2. Enter a HEX color code (e.g., #1B2E3C).
8. Subtitle Line Height
1. Controls the line height for the block subtitle.
2. Enter a value (e.g., 1.4).
   

3, Text Positioning & Styling

1. Text Position
1. Defines the position of text on the images.
2. Select from options: Bottom Left, Center, Right.
2. Text Alignment
1. Sets the text alignment within the container.
2. Select from options: Left, Center, Right.
   

4, Collection Title Styling

1. Collection Title Font Size
1. Sets the font size for collection titles on images.
2. Enter a value in pixels (e.g., 20 px).
2. Collection Title Font Weight
1. Adjusts the font weight for collection titles.
2. Enter a value (e.g., 600).
   
3. Collection Title Color
1. Specifies the color for collection titles.
2. Enter a HEX color code (e.g., #FFFFFF).
4. Collection Title Line Height
1. Controls the line height for collection titles.
2. Enter a value (e.g., 1.2).
   

5, Collection Subtitle Styling

1. Collection Subtitle Font Size
1. Sets the font size for collection subtitles on images.
2. Enter a value in pixels (e.g., 14 px).
2. Collection Subtitle Font Weight
1. Adjusts the font weight for collection subtitles.
2. Enter a value (e.g., 400).
   
3. Collection Subtitle Color
1. Specifies the color for collection subtitles.
2. Enter a HEX color code (e.g., #F0F0F0).
4. Collection Subtitle Line Height
1. Controls the line height for collection subtitles.
2. Enter a value (e.g., 1.4).
   

6, Overlay Settings

1. Overlay Background
1. Sets the background overlay color for better text readability.
2. Enter a HEX color code (e.g., #0000004D).
2. Overlay Opacity
1. Adjusts the opacity of the overlay background.
2. Enter a percentage value (e.g., 30 %).
   

7, Collection Configuration

1. Collection
1. Select the collection to display (e.g., ADIDAS, CONVERSE, Girl's).
2. The first collection is on the top left, the second is on the bottom left, and the third one is on the right side. 
3. Choose from available collections.
2. Custom Title
1. Allows overriding the collection title with a custom name (e.g., Gold Collection, Diamond Collection, Gem Collection).
2. Leave blank to use the collection name.
3. Subtitle
1. Adds a subtitle to the collection (e.g., Timeless. Pure. Powerful., Fine diamonds, perfectly cut for lasting impact, Vibrant gemstones, crafted to stand out with elegance).
2. Enter text as needed.
4. Additional text below the title
1. Provides space for extra text below the collection title.
2. Enter text as needed.
5. Custom Image
1. Allows overriding the collection image with a custom image.
2. Leave blank to use the collection featured image.
   

Collection Gallery Block 2: Display up to 8 collections with custom titles, descriptions, and images.

1, Layout Settings

1. Width
1. Determines the width of the gallery block.
2. Enter a value in columns (e.g., 12 col).
   
2. Item Height (Desktop)
1. Sets the fixed height for items on the desktop.
2. Enter a value in pixels (e.g., 350 px).
3. Item Height (Mobile)
1. Sets the fixed height for items on mobile.
2. Enter a value in pixels (e.g., 260 px).
   

2, Block Title Styling

1. Title Font Size
1. Sets the font size for the main block title.
2. Enter a value in pixels (e.g., 18 px).
2. Title Font Weight
1. Adjusts the font weight (boldness) for the block title.
2. Enter a value (e.g., 600).
   
3. Title Color
1. Specifies the color for the main block title.
2. Enter a HEX color code (e.g., #FFFFFF).
4. Title Line Height
1. Controls the line height for the block title.
2. Enter a value (e.g., 1.2).
   
5. Description Font Size
1. Sets the font size for the block description.
2. Enter a value in pixels (e.g., 14 px).
6. Description Font Weight
1. Adjusts the font weight for the block description.
2. Enter a value (e.g., 400).
7. Description Color
1. Specifies the color for the block description.
2. Enter a HEX color code (e.g., #666666).
   
8. Description Line Height
1. Controls the line height for the block description.
2. Enter a value (e.g., 1.4).
   

3, Text Positioning & Styling

1. Text Position
1. Defines the position of text on the images.
2. Select from options: Bottom Left.
2. Text Alignment
1. Sets the text alignment within the container.
2. Select from options: Left, Center, Right.
   

4, Collection Title Styling

1. Collection Title Font Size
1. Sets the font size for collection titles on images.
2. Enter a value in pixels (e.g., 20 px).
2. Collection Title Font Weight
1. Adjusts the font weight for collection titles.
2. Enter a value (e.g., 600).
   
3. Collection Title Color
1. Specifies the color for collection titles.
2. Enter a HEX color code (e.g., #FFFFFF).
4. Collection Title Line Height
1. Controls the line height for collection titles.
2. Enter a value (e.g., 1.2).

5, Collection Description Styling

1. Collection Description Font Size
1. Sets the font size for collection descriptions on images.
2. Enter a value in pixels (e.g., 14 px).
2. Collection Description Font Weight
1. Adjusts the font weight for collection descriptions.
2. Enter a value (e.g., 400).
3. Collection Description Color
1. Specifies the color for collection descriptions.
2. Enter a HEX color code (e.g., #F0F0F0).
4. Collection Description Line Height
1. Controls the line height for collection descriptions.
2. Enter a value (e.g., 1.4).
5. Hide Collection Description
1. Option to hide collection descriptions from display.
2. Toggle on or off.
   

6, Overlay Settings

1. Overlay Background
1. Sets the background overlay color for better text readability.
2. Enter a HEX color code (e.g., #0000004D).
2. Overlay Opacity
1. Adjusts the opacity of the overlay background.
2. Enter a percentage value (e.g., 30 %).
   

7, Collection Configuration

1. Collection
1. Select the collection to display (e.g., ADIDAS).
2. Choose from available collections.
2. Custom Title
1. Allows overriding the collection title with a custom name (e.g., Best Seller 1).
2. Leave blank to use the collection name.
3. Description
1. Adds a description to the collection.
2. Enter text as needed.
4. Additional text below the title
1. Provides space for extra text below the collection title.
2. Enter text as needed.
5. Custom Image
1. Allows overriding the collection image with a custom image.
2. Leave blank to use the collection featured image.

Collection List Block: Display up to 40 collections in the form of a list, with optional product counts or collection descriptions.

1, Layout Settings

Width

Determines the width of the gallery block.

Enter a value in columns (e.g., 4 col).

2, Block Title Styling

Title Font Size

Sets the font size for the main block title.

Enter a value in pixels (e.g., 18 px).

Title Font Weight

Adjusts the font weight (boldness) for the block title.

Enter a value (e.g., 700).

Title Color

Specifies the color for the main block title.

Enter a HEX color code (e.g., #000000).

Title Line Height

Controls the line height for the block title.

Enter a value (e.g., 1.2).

Subtitle Font Size

Sets the font size for the block subtitle.

Enter a value in pixels (e.g., 14 px).

Subtitle Font Weight

Adjusts the font weight for the block subtitle.

Enter a value (e.g., 400).

Subtitle Color

Specifies the color for the block subtitle.

Enter a HEX color code (e.g., #6B7280).

Subtitle Line Height

Controls the line height for the block subtitle.

Enter a value (e.g., 1.4).

3, Collection Item Title Styling

Item Title Font Size

Sets the font size for individual collection item titles.

Enter a value in pixels (e.g., 16 px).

Item Title Font Weight

Adjusts the font weight for collection item titles.

Enter a value (e.g., 600).

Item Title Color

Specifies the color for individual collection item titles.

Enter a HEX color code (e.g., #000000).

Item Title Line Height

Controls the line height for collection item titles.

Enter a value (e.g., 1.2).

4, Collection Item Count Styling

Item Count Font Size

Sets the font size for collection item count/description.

Enter a value in pixels (e.g., 14 px).

Item Count Font Weight

Adjusts the font weight for collection item count.

Enter a value (e.g., 400).

Item Count Color

Specifies the color for collection item count/description.

Enter a HEX color code (e.g., #6B7280).

Item Count Line Height

Controls the line height for collection item count.

Enter a value (e.g., 1.2).

5, Collection Settings

Number of collections to show

Determines how many collections to display.

Enter a value (e.g., 6).

Show product count instead of description

Option to display product count instead of collection description.

Toggle on or off.

6, See More Button

Show 'See More' button

Enables or disables the 'See More' button.

Toggle on or off.

Button text

Sets the text for the 'See More' button.

Enter text (e.g., See all collections).

Button URL

Specifies the URL link for the 'See More' button.

Paste a link or search.

1, Layout Settings

Width

Determines the width of the gallery block.

Enter a value in columns (e.g., 4 col).

2, Block Title Styling

Title Font Size

Sets the font size for the main block title.

Enter a value in pixels (e.g., 18 px).

Title Font Weight

Adjusts the font weight (boldness) for the block title.

Enter a value (e.g., 700).

Title Color

Specifies the color for the main block title.

Enter a HEX color code (e.g., #000000).

Title Line Height

Controls the line height for the block title.

Enter a value (e.g., 1.2).

Subtitle Font Size

Sets the font size for the block subtitle.

Enter a value in pixels (e.g., 14 px).

Subtitle Font Weight

Adjusts the font weight for the block subtitle.

Enter a value (e.g., 400).

Subtitle Color

Specifies the color for the block subtitle.

Enter a HEX color code (e.g., #6B7280).

Subtitle Line Height

Controls the line height for the block subtitle.

Enter a value (e.g., 1.4).

3, Collection Item Background & Spacing

Item Background Color

Sets the background color for collection items.

Enter a HEX color code (e.g., #FFFFFF).

Item Hover Background Color

Sets the background color when hovering over collection items.

Enter a HEX color code (e.g., #FFFFFF).

Item Vertical Padding

Adds top and bottom padding for collection items.

Enter a value in pixels (e.g., 20 px).

Item Horizontal Padding

Adds left and right padding for collection items.

Enter a value in pixels (e.g., 20 px).

4, Collection Item Styling

Show collection descriptions

Option to display collection descriptions.

Toggle on or off.

Display collection descriptions below titles

Option to show descriptions below titles.

Toggle on or off.

Collection Title Font Size

Sets the font size for collection titles.

Enter a value in pixels (e.g., 16 px).

Collection Title Font Weight

Adjusts the font weight for collection titles.

Enter a value (e.g., 600).

Collection Title Color

Specifies the color for collection titles.

Enter a HEX color code (e.g., #1B2E3C).

Collection Title Line Height

Controls the line height for collection titles.

Enter a value (e.g., 1.3).

Description Font Size

Sets the font size for collection descriptions.

Enter a value in pixels (e.g., 12 px).

Description Font Weight

Adjusts the font weight for collection descriptions.

Enter a value (e.g., 400).

Description Color

Specifies the color for collection descriptions.

Enter a HEX color code (e.g., #666666).

Description Line Height

Controls the line height for collection descriptions.

Enter a value (e.g., 1.4).

5, Collection Configuration

Collection

Select the collection to display (e.g., ADIDAS).

Choose from available collections.

Custom Title

Allows overriding the collection title with a custom name (e.g., Earrings).

Leave blank to use the collection name.

Override the collection title

Option to override the collection title.

Leave blank to use the collection name.

Custom Description

Allows adding a custom description for the collection.

Enter text as needed.

Custom Image

Allows overriding the collection image with a custom image.

Leave blank to use the collection featured image.

6, Footer Button

Show footer button

Enables or disables the footer button.

Toggle on or off.

Button text

Sets the text for the footer button.

Enter text (e.g., View All Products).

Button URL

Specifies the URL link for the footer button.

Enter a link (e.g., All collections).

Button Font Size

Sets the font size for the footer button.

Enter a value in pixels (e.g., 14 px).

Button Font Weight

Adjusts the font weight for the footer button.

Enter a value (e.g., 500).

Button Text Color

Specifies the text color for the footer button.

Enter a HEX color code (e.g., #4B0000).

Button Background Color

Sets the background color for the footer button.

Enter a HEX color code (e.g., Transparent).

Button Hover Text Color

Sets the text color when hovering over the footer button.

Enter a HEX color code (e.g., #FFFFFF).

Button Hover Background Color

Sets the background color when hovering over the footer button.

Enter a HEX color code (e.g., #4B0000).

Button Border Color

Sets the border color for the footer button.

Enter a HEX color code (e.g., #4B0000).

Button Hover Border Color

Sets the border color when hovering over the footer button.

Enter a HEX color code (e.g., #4B0000).

Button Border Radius

Controls the rounded corners for the footer button.

Enter a value in pixels (e.g., 50 px).

Button Vertical Padding

Adds top and bottom padding for the footer button.

Enter a value in pixels (e.g., 12 px).

Button Horizontal Padding

Adds left and right padding for the footer button.

Enter a value in pixels (e.g., 24 px).

1. Block Title: Text shown above the image gallery.
2. Image Settings (Desktop / Mobile layout): Choose how many images appear per row on each device.
3. Image aspect ratio (Desktop / Mobile): Define the shape of the images.
4. Image fit: Choose how the image fills its container:
   
1. Cover crops and fills
2. Contain keeps full image in view
3. Fill stretches image to fit
   
4. Image 1–6
   
1. Image: Upload a banner or promotional image.
2. Image link: Enter a clickable link for the image.
   
5. See More Button
1. Button text: Text shown on the button.
2. Button URL: Where the button leads when clicked.
   

Information Block: Highlight services or selling points with an image, title, and description.

1. Block Title: Text above the list of information items. 
2. Block Title Styling:
   
1. Adjust title font size, font color, font weight.
2. Title line height: Adding space before title line.
3. Title bottom margin: Adding space after title line. 
   
3. Block Subtitle: Text below the Block Title. 
1. Adjust subtitle font size, font color, font weight.
2. Subtitle line height: Adding space before subtitle line.
3. Subtitle bottom margin: Adding space after subtitle line. 
4. Image Settings (Desktop / Mobile) aspect ratio: Set the image shape using a ratio value. 
5. Image fit: Choose how images scale and crop inside their container.
   
1. Information 1–6
   
1. Image: Upload an icon or small graphic.
2. Title: Short label for each information item (e.g., “Free Returns”).
3. Description: Supporting text shown below the title.
4. URL: Optional link for each item.
   
6. See More Button
1. Button text: Label for the button.
2. Button URL: Link destination.
   

1, Layout Settings

Width

Determines the width of the gallery block.

Enter a value in columns (e.g., 4 col).

2, Block Title Styling

Title Font Size

Sets the font size for the main block title.

Enter a value in pixels (e.g., 18 px).

Title Font Weight

Adjusts the font weight (boldness) for the block title.

Enter a value (e.g., 600).

Title Color

Specifies the color for the main block title.

Enter a HEX color code (e.g., #1B2E3C).

Title Line Height

Controls the line height for the block title.

Enter a value (e.g., 1.2).

3, Block Subtitle Styling

Subtitle Font Size

Sets the font size for the block subtitle.

Enter a value in pixels (e.g., 14 px).

Subtitle Font Weight

Adjusts the font weight for the block subtitle.

Enter a value (e.g., 400).

Subtitle Color

Specifies the color for the block subtitle.

Enter a HEX color code (e.g., #1B2E3C).

Subtitle Line Height

Controls the line height for the block subtitle.

Enter a value (e.g., 1.4).

4, Navigation Link Styling

Link Font Size

Sets the font size for navigation links.

Enter a value in pixels (e.g., 14 px).

Link Font Weight

Adjusts the font weight for navigation links.

Enter a value (e.g., 400).

Link Color

Specifies the color for navigation links.

Enter a HEX color code (e.g., #1B2E3C).

Link Hover Color

Sets the color for navigation links on hover.

Enter a HEX color code (e.g., #4B0000).

Link Line Height

Controls the line height for navigation links.

Enter a value (e.g., 1.6).

Dot Color

Sets the color for the hover dot indicator.

Enter a HEX color code (e.g., #4B0000).

5, Navigation Links

Navigation Item 1

Text

Enter text for the navigation item (e.g., Dainty Rings Collection | BUY 3, GET 15%).

URL

Specifies the URL link for the navigation item.

Paste a link or search.

6, See More Button

Show 'See More' button

Enables or disables the 'See More' button.

Toggle on or off.

Button text

Sets the text for the 'See More' button.

Enter text (e.g., See more).

Button URL

Specifies the URL link for the 'See More' button.

Paste a link or search.

Block Title: Text above the link list.

Navigation Icon: Upload a visual for each link item.

Label: Text for the clickable link.

Description: Optional supporting text.

URL: Link destination.

See More Button

Button text: Label for the button.

Button URL: Link destination.

Product Block: Feature products from a selected collection directly in the menu.

1. Block Title: Text above the link list.
   

Product Settings

1. Select Collection: Choose a Shopify collection to display.
2. Number of products to display: Set how many products are shown (e.g., 3–6).
3. Desktop / Mobile layout: Choose product layout for each screen type.
4. See More Button
1. Button text: Label for the button.
2. Button URL: Link destination.
   

Social Block: Add social media icons that link to your brand’s social profiles.

1. Block Title: Text above the link list.
2. Icon Size (Desktop / Mobile icon size): Enter icon size in pixels (e.g., 24px, 32px).
3. Social 1–6
   
1. Icon: Upload or choose a platform icon.
2. Label: Short name for the platform.
3. URL: Enter the full profile link.
4. See More Button
1. Button text: Optional text for an additional CTA.
2. Button URL: Link to a full social media hub or page.