Custom liquid option in footer

[adkowaty]

Hi,

There is a way to add a custom liquid to footer? I wish to embed google maps. 

Thanks for help in advance,

Regards,

Adrian

[Vitix_Dev]

Hi adkowaty,

You need to follow the below steps : 

Step 1: Get Your Google Maps Embed Code

1. Go to Google Maps and find the location you want to embed.
2. Click the Share button (it looks like a chain link).
3. Select Embed a map.
4. Choose the size and customize the map view if necessary.
5. Copy the iframe embed code that Google provides.

For example, it may look like this:

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Step 2: Add the Code to the Footer

1. Go to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Select your current theme and click on Actions > Edit code.
4. In the left-hand sidebar, find the Sections folder and open the footer.liquid file. This is where you can add custom content to your footer.
5. Paste the Google Maps iframe code inside the file. You can place it where you want it to appear in the footer. Typically, this would be within a div or just at the end of the footer content.

Example:

<!-- Your other footer content --> <div class="footer-google-map"> <iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> <!-- More footer content -->

Step 3: Style the Map (Optional)

Add custom CSS to adjust the map’s size and styling. To do this:

1. Go to Assets > theme.scss.liquid (or whatever your theme's main CSS file is named).
2. Add custom styles for your map. For example:

CSS

.footer-google-map iframe { width: 100%; height: 300px; /* Adjust the height as necessary */ border: none; }

Step 4: Save Your Changes

• Once you're happy with the placement and styling, save the changes to both the footer.liquid and theme.scss.liquid files.

Step 5: Test the Changes

• Visit your Shopify store and scroll to the footer to see the embedded Google Map.

This will help you.

Thanks 

Vitix Dev Team

[adkowaty]

Hello,

Thanks for your response. File have 565 lines, where should i put the code? 

Thanks for your time and help in advance,

Regards,

Adrian

[Vitix_Dev]

Hi @adkowaty ,

In the standard of the theme structure : 

1. Create snippets a file like custom_map.liquid file and put the map code.

2. Go to theme.liquid file and find such a name section 'footer'.

{% section 'footer' %}

This is responsible for the footer code. 

3. If you want to show above the footer, add the file custom_map.liquid by render 'custom_map.liquid'.

{% render 'custom_map' %}

I hope these steps will help you.

Thanks

Vitix Dev Team

[adkowaty]

Hi Vitix_Dev,

Thanks again for your time and help. What I'm looking for is to have option to add a custom liquid as a block in footer. 

Thanks in advance,

Regards,

Adrian