How can I add a homepage menu and enhance website smoothness?

shimul508
Tourist
5 0 0

Hi, I saw a shopify website where they added a menu in the home page. The website is: www.htbazar.com. The menu is right below the slideshow. Can anyone tell me that how can I add a menu like this on my website? D I need any page builder or coding? Or, is there a option in shopify?

 

Also, my website home page is not smooth. Like, when I visit a website it's may load slow, but smooth. But my website is lagging when I scroll. Can you tell me how can I fix this? 

 

Also, Please tell me how to update theme? I'm using shopify origin theme. And an update available. Currently I'm running ad o facebook and instagram. Is there any problem if I update theme? Will updating do any harm to my  store or facebook ad?

 

My website is: www.lumish.net

 

I'm completely new. I'm using shopify from 15 february maybe. I tried to find these solution on youtube and google but couln't find. Please, help me. I'll be gratefull.

Replies 2 (2)

suyash1
Shopify Partner
9137 1137 1485

@shimul508 - your website loaded fast on my desktop

 

2] the other site is using a section where they have added icons section after slideshow, please check if your website has slideshow section. If yes then you can create like shown website else if no then you need page builder app like pagefly where you can create image columns

 

3] please contact shopify theme support about updating the theme, they would guide you better and you can ask them about this icon section as well.

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

oscprofessional
Shopify Partner
15854 2371 3074

Hello @shimul508,

To add menus in Shopify, follow these steps:

  1. Log in to Your Shopify Admin Dashboard: Visit the Shopify website and log in to your account.

  2. Navigate to the Navigation Settings: In the Shopify admin dashboard, go to "Online Store" and then click on "Navigation."

  3. Create a New Menu: Click on the "Add menu" button to create a new menu.

  4. Name Your Menu: Enter a name for your menu. This name is for internal reference and won't be visible to your customers.

  5. Add Menu Items: Click on the "Add menu item" button to start adding items to your menu. You can add different types of menu items, such as links to collections, products, pages, or blog posts.

    • To link to a collection: Choose "Collection" from the dropdown menu and select the collection you want to link to.
    • To link to a product: Choose "Product" from the dropdown menu and select the product you want to link to.
    • To link to a page: Choose "Page" from the dropdown menu and select the page you want to link to.
    • To link to a blog post: Choose "Blog" from the dropdown menu and select the blog post you want to link to.
    • You can also add a custom link by choosing "Custom link" from the dropdown menu and entering the URL and link text.
  6. Organize Menu Items: Drag and drop the menu items to arrange them in the order you want them to appear in your menu.

  7. Save Your Menu: Once you've added all the menu items and organized them, click on the "Save menu" button to save your changes.

  8. Assign Menu to Navigation: After saving your menu, you need to assign it to a navigation area on your website. Under "Menu settings," select where you want to display your menu (usually the main menu or footer menu).

  9. Save Changes: Click on the "Save" button to apply your changes.

  10. Preview Your Store: Visit your Shopify store and preview how the menu looks on your storefront. Make any necessary adjustments if needed.

That's it! You've successfully added menus to your Shopify store.

And  about Theme Upgradation

After reviewing your site on Google PageSpeed Insights, it received a good score overall. However, there is an issue with the Largest Contentful Paint (LCP) metric, mainly because the slides take a significant amount of time to load. Addressing this will require technical adjustments, as there are specific conditions to meet for optimization.

oscprofessional_0-1709296766286.png

One of the most common recommendations I found is “Defer offscreen images”. This is an indication that all of the site’s image assets are loading at once.

So you can use a lazy load for these images.

  • To defer the loading of offscreen images on your Shopify site, you will have to modify your Theme (theme. liquid file) to leverage the lazySizes library. Here's how:
  • Download the lazy sizes Javascript library from here and upload it to your theme's /assets folder. 
  • Note(once check ‘lazy sizes Javascript library’ in assets repo. has available or not)
  • Add the following lines to your theme. liquid just before the </head> tag:

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

  • Change the image tags in your theme by adding the class "lazyload" to the image tags and changing the src attribute to the data-src attribute. 

{% for img in product.images %}

 {% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

 <img class="lazyload" 

 src="{{ img | img_url: '300x' }}"

 data-src="{{ img_url }}"

 data-widths="[720, 1080]"

 data-aspectratio="{{ img.aspect_ratio }}"

 data-sizes="auto">

{% endfor %}

We’ve had the best success for our clients by working with our developers to implement the lazy sizes because it's quite complicated for non-technical people.

You need to work on the following points:

  • Pass core web vitals (important)
  • Reduce JS Payload.
  • Use Critical CSS.
  • Reduce Large Image Sizes
  • Migrate Tracking Codes To Google Tag Manager
  • Compress Images
  • Limit Third-Party JavaScript & Shopify Apps
  • Preload Web Fonts. 
  •  Use a standard web font.

Theme Upgrade:

Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization. 

You can improve your website speed score by fixing these issues.

If there is anything that needs to be clarified or included, please let us know.  We will surely help you. 

Have a nice day!

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing