How to add icons like an app on mobile version?

Store Design
, ,
1

I want to add icons on my mobile version like this:

IMG_0105.jpeg
IMG_0105.jpeg1125×210 24.8 KB

I want to add it to the bottom. Please help

2

Hi @aromaticaparfum ,

To add icons to the bottom of your mobile version (like shown in your image), you can use custom HTML and CSS. Here’s a step-by-step guide on how to achieve this in your Shopify store:

Steps to Add Icons to the Bottom of Mobile Version:1. Go to the Theme Code Editor:

  • From your Shopify Admin, navigate to Online Store > Themes.
  • Choose your Impulse theme (or whichever theme you are using) and click Actions > Edit Code.

  1. Create a Custom Section for Icons:

    • In the Sections folder, create a new file (if you don’t already have one for this purpose). You can name it something like mobile-icons.liquid.

  2. Add HTML for Icons:

    • In the mobile-icons.liquid file, add the HTML code for your icons. Here’s an example of how to structure it:

  • Replace path-to-your-iconX.png with the actual paths to your icon images.

  • Style Icons with CSS:

    • Open the Assets folder and find the CSS file (often named theme.css or base.css).

    • Add the following custom CSS at the bottom to position the icons at the bottom of the screen on mobile:

/* Style for the mobile icons container */
.mobile-icons-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #fff; /* Optional: adds a background to the icons */
  padding: 10px 0;
  z-index: 1000;
}

/* Style for each individual icon */
.mobile-icon img {
  width: 40px;  /* Adjust icon size */
  height: 40px; /* Adjust icon size */
}

/* Optional: Hover effect for icons */
.mobile-icon:hover {
  opacity: 0.7;
}

You can adjust the width, height and background-color to fit your design. The icons will be spaced evenly across the bottom of the mobile screen.

  • Add the New Section to Your Theme:

    • To ensure the icons display, go to your theme.liquid file (found under the Layout folder) or the file where you want to display the icons, and include the section like this:
{% section 'mobile-icons' %}

  1. This will load your new mobile-icons.liquid section at the bottom of the page.

  2. Save and Preview:

    • Save all changes and refresh your website. You should see the icons at the bottom of the mobile screen.

Additional Customization:- Positioning: If the icons are overlapping other elements or need more spacing, adjust the bottom , padding and margin properties in the CSS.

  • Icons: You can use different icon libraries (like FontAwesome) if you prefer not to upload image files. Here’s how you can use FontAwesome:

Just make sure to include the FontAwesome CDN link in your theme.liquid file if you use FontAwesome.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt