Add A Link To Footer Image On Dawn Theme?

Solved

Add A Link To Footer Image On Dawn Theme?

dreamtechzone_5
Shopify Partner
483 1 89

I have added two images to my footer section. I want to add separate links to these two images and place the images in the center. I am using Dawn theme. Here are two links:
1. https://urbanglowingstore.myshopify.com/
2. https://blue-chic-clothes.myshopify.com/


Store URL: https://urbanglowingstore.myshopify.com/
Password: Admin

 

Screenshot 2023-08-15 004732.jpg

Accepted Solution (1)

David_SHT
Globetrotter
605 125 127

This is an accepted solution.

Hi @dreamtechzone_5 ,

 

This is David at SalesHunterThemes.

If you want to add links to images, you will need to use custom code.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Section folder -> footer.liquid file.

You can search with Cmd + f: “ footer-block-image”.

You will see a code like the image below:

 

David_SHT_1-1692083235288.png

 

Replace it with this code:

 

 

<a href="{{ block.settings.link }}">
  <img
    srcset="{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 2x"
    src="{{ block.settings.image | image_url: width: 760 }}"
    alt="{{ block.settings.image.alt | escape }}"
    loading="lazy"
    width="{{ block.settings.image.width }}"
    height="{{ block.settings.image.height }}"
  >
</a>

 

 

 

The next step, you can search with Cmd + f: “alignment”.

You will see a code like the image below:

David_SHT_2-1692083823539.png

 

Add this code:

 

 

{
    "type": "url",
    "id": "link",
    "label": "Link"
}

 

 

Here is result after adding the code:

David_SHT_3-1692084115565.png

Save and In the theme editor.

Footer -> block image -> select link.

 

Here is the final result:

David_SHT_4-1692084813365.png

 

Hope this can help.

David | SalesHunterThemes team

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

View solution in original post

Replies 14 (14)

dreamtechzone_5
Shopify Partner
483 1 89

One more thing. I want to keep both images on same line in mobile version.

 

367474031_677417441080600_2168340798042082210_n.jpg

Transcy
Shopify Partner
285 19 87

Hello @dreamtechzone_5 ,

 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Sections -> footer.liquid file

Add anchor (<a>) tags around the images and set the href attribute to the desired URLs. It can look like this:

<div class="footer-images">
  <a href="https://urbanglowingstore.myshopify.com/"><img src="image-url-1.jpg" alt="Image 1"></a>
  <a href="https://blue-chic-clothes.myshopify.com/"><img src="image-url-2.jpg" alt="Image 2"></a>
</div>

Go to Assets folder -> base.css file or theme.scss.liquid file

Add this following code at the bottom of page

.footer-images {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-images a {
  margin: 0 20px;
}

Save and preview

 

Hope this can help.

Transcy

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
dreamtechzone_5
Shopify Partner
483 1 89

Where should I paste this code in the footer of the liquid folder?

 

<div class="footer-images">
<a href="https://urbanglowingstore.myshopify.com/"><img src="image-url-1.jpg" alt="Image 1"></a>
<a href="https://blue-chic-clothes.myshopify.com/"><img src="image-url-2.jpg" alt="Image 2"></a>
</div>

 

I have pasted the code here.

 

Screenshot 2023-08-15 114820.png

 

 

As a result the footer section looks like this.

 

Screenshot 2023-08-15 115041.png

David_SHT
Globetrotter
605 125 127

This is an accepted solution.

Hi @dreamtechzone_5 ,

 

This is David at SalesHunterThemes.

If you want to add links to images, you will need to use custom code.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Section folder -> footer.liquid file.

You can search with Cmd + f: “ footer-block-image”.

You will see a code like the image below:

 

David_SHT_1-1692083235288.png

 

Replace it with this code:

 

 

<a href="{{ block.settings.link }}">
  <img
    srcset="{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 2x"
    src="{{ block.settings.image | image_url: width: 760 }}"
    alt="{{ block.settings.image.alt | escape }}"
    loading="lazy"
    width="{{ block.settings.image.width }}"
    height="{{ block.settings.image.height }}"
  >
</a>

 

 

 

The next step, you can search with Cmd + f: “alignment”.

You will see a code like the image below:

David_SHT_2-1692083823539.png

 

Add this code:

 

 

{
    "type": "url",
    "id": "link",
    "label": "Link"
}

 

 

Here is result after adding the code:

David_SHT_3-1692084115565.png

Save and In the theme editor.

Footer -> block image -> select link.

 

Here is the final result:

David_SHT_4-1692084813365.png

 

Hope this can help.

David | SalesHunterThemes team

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

dreamtechzone_5
Shopify Partner
483 1 89

Thank you so much, Sir! It worked.

Can the two logos be placed on the same line in the mobile version and the two logos centered in the desktop version?
Besides, when I click on the logo, I want to open a new tab.

 

367495936_669475391406105_4086659134841594713_n.jpgScreenshot 2023-08-15 142251.png

David_SHT
Globetrotter
605 125 127

Hi @nafijhossain10 ,

About the two logos centered in the desktop version,

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> base.css file.

Add this following code at the bottom of page.

 

@media screen and (min-width: 750px)
 .footer .footer__blocks-wrapper {
  align-items: center;
 }
}

 

 

About you want click on the logo and it opens a new tab.

You can add this code in footer.liquid like the image below:

 

target="_blank"

 

Here is result after adding the code:

David_SHT_0-1692091554854.png

Save and preview.

 

About logos be placed on the same line in the mobile version. In this case if you don't know the code, I think you should hire an expert, they can help you add some custom code to make the section exactly as you want.

 

Hope this can help.

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

dreamtechzone_5
Shopify Partner
483 1 89

I want the collection list text to be centered in the mobile version.

 

367426114_989039375673144_563162683172475376_n.jpg

 

I want to reduce the size of the images as well. Thank you, Sir!

 

Screenshot 2023-08-15 001009.png

David_SHT
Globetrotter
605 125 127

Hi @nafijhossain10 ,

About collection list text to be centered in the mobile version,

Is your problem in collections page?

 

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> base.css file.

Add this following code at the bottom of page.

@media screen and (max-width: 749px){
 #shopify-section-template--20589353697592__main h1.title {
   text-align: center;
 }
}

 

About reduce the size of the image,

In base.css file.

Add this following code at the bottom of page.

.collection-list .card__inner.ratio {
    transform: scale(0.8);
}

Save and preview.

 

Hope this can help.

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

dreamtechzone_5
Shopify Partner
483 1 89

Hello Sir!

When I add 0.5 here the image is smaller but the space above the collection name is more. Also, there is more space under the heading title of the collection. Thank you.

Screenshot 2023-08-16 145603.png

It looks like this:

Screenshot 2023-08-16 152054.png

 

I have pasted this code:

Screenshot 2023-08-16 145506.png

 

Still not fixed:

367580625_661224499398288_6499439649403371893_n.jpg

 

David_SHT
Globetrotter
605 125 127

Hi @dreamtechzone_5 ,

About reduce the size of the image,

I suggest you other solution: 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> base.css file.

Add this following code at the bottom of page.

 

.collection-list .card__inner.ratio {
    max-width: 150px;
    margin-inline: auto;
}

 

 

About collection list text to be centered in the mobile version,

The code which i provided before just can be applied for this collection page: https://urbanglowingstore.myshopify.com/collections.

If you want to fix for the other page, please give me url of that page.

 

Hope this can help.

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

dreamtechzone_5
Shopify Partner
483 1 89

I want to center the collection list text on the home page in the mobile version.

https://urbanglowingstore.myshopify.com/

 

368420770_1260499581318116_623722556466278259_n.jpg

 

Also, I want to center the text of the collection list on the collection page in the desktop version. Thank you so much Sir!

https://urbanglowingstore.myshopify.com/collections

 

 

Screenshot 2023-08-16 202525.png

BlackMortymer
Not applicable
1 0 0

Thank you so much , i have struggle with this for over 6 hours, Thank you so much

SinghSells
Explorer
54 1 10

you are a legend. Thanks.

topnewyork
Astronaut
1130 151 189

I fount this on youtube, I think it will help you.

 

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month