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
   

1. Menu Settings Configuration

Step 1: Choose a Menu

1. Select the menu you want to show in this section.
2. You can configure your menus in your Shopify admin by going to Content → Menus.
   

Step 2: 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) or RGBA (e.g. rgba(255,255,255,0.8) for transparent 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 3: Mobile Settings Configuration

Number of menu items to show on mobile: Limits how many top-level items are displayed in a row on mobile. Any extra items will go into a collapsible sidebar menu.

Step 4: Sidebar Settings Configuration

1. Show sidebar on desktop: Toggle this ON to show a sidebar-style menu on desktop (instead of horizontal layout).
2. Sidebar title: The heading shown at the top of the sidebar when opened.
3. Custom sidebar icon: Upload your own icon for the menu button (e.g. hamburger icon). If not provided, the default hamburger icon is used.
4. Sidebar position: Choose if the sidebar opens from the Left or Right side of the screen.
5. Overlay background color: When the sidebar opens, a semi-transparent overlay covers the rest of the screen. Enter the hex color code or RGBA color code here.
   

Step 5: Menu Item Styling

Control the appearance of each top-level clickable menu item.

1. Text color / Text hover color
   
1. Defines the text color of menu items in their default state.
   
2. Enter a HEX or RGBA color code.
2. Background Color
1. Sets the background color of the menu item in its normal state.
2. Enter a HEX or RGBA 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 or RGBA 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. 
   

Step 6: Dropdown Style

Customize the appearance of dropdown menus when hovering over top-level items with submenus.

1. Show dropdown arrow: Toggle ON to show arrows next to menu items with blocks.
2. Custom arrow icon: Upload your own SVG or PNG arrow. Leave blank to use default arrow.
   

Step 7: 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: Sets the background fill for the button.
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 8: 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. Account for sticky header: Enable this if your theme already has a sticky header to avoid overlapping.
4. Header class: CSS class of the header element (leave blank to use default <header> tag)

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. 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.
2. 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).
3. Background Color
1. Sets the background color for the menu block.
2. Enter a hex code (e.g., #FFFFFF) or use the color picker.
4. Vertical Padding / Horizontal Padding
1. Adds space inside the menu block vertically or horizontally.
2. Enter values in pixels to control internal spacing.
   

There are six block types you can use for your menu blocks.

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

1. Block Title: Text shown above the blog post list. Enter a short, descriptive title and optional subtitle.
2. Blog Settings
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.
3. 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.

Image Gallery Block: Display up to 6 custom images with optional links.

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

1. Image 1–6
1. Image: Upload a banner or promotional image.
2. Image link: Enter a clickable link for the image.
3. 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. Image Settings (Desktop / Mobile) aspect ratio: Set the image shape using a ratio value.
3. Image fit: Choose how images scale and crop inside their container.
4. 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.
5. See More Button
1. Button text: Label for the button.
2. Button URL: Link destination.

Navigation Block: Display a list of quick-access links with icons, labels, and optional descriptions.

1. Block Title: Text above the link list.
2. Navigation Icon: Upload a visual for each link item.
3. Label: Text for the clickable link.
4. Description: Optional supporting text.
5. URL: Link destination.
6. See More Button
1. Button text: Label for the button.
2. Button URL: Link destination.

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

1. Block Title: Text above the link list.
2. Product Settings
3. Select Collection: Choose a Shopify collection to display.
4. Number of products to display: Set how many products are shown (e.g., 3–6).
5. Desktop / Mobile layout: Choose product layout for each screen type.
6. 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.
   

Now you know how to customize Tapita’s Menu Section to effectively showcase collections, blogs, images, and more — all from your Shopify menu. If you have any questions or need assistance, don’t hesitate to reach out to Tapita support.