Solved

How do I add a logo next to my product title?

RYZEVELI
New Member
4 0 0

Could you help me add my brands logo next to (or above) my product title? The logo “FTP” in the picture I attached is an example of what I’m looking to do. 

89DC3A2B-E3CA-4F95-A77A-69A7D00AC811.jpeg

Accepted Solution (1)
PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

Hi, this would be the steps to accomplish this:

Screen Shot 2021-01-18 at 09.15.35.png

1- First of all I recommend making a copy of your theme to test the code there in case you break something.  Go to the theme and click Duplicate in the Actions dropdown.

2- Go to the copy of the live theme and in the Actions dropdown click Edit Code.

3- Add the logo to the Assets folder by clicking in Add a new asset:

Screen Shot 2021-01-18 at 09.12.35.png

I highly recommend you upload a your logo in vector format using .svg. However you can upload jpg, gif or png also. 
I recommend png over jpg for the logo if it is the one you pasted as example.
Now you would see your logo in the Assets folder:

Screen Shot 2021-01-18 at 09.12.58.png

4- Open product-template.liquid and search for the following line:

<h1 class="product-single__title">{{ product.title }}</h1>

You should find it around line 118

Now, above that line:

If you have used a logo in svg format, then add this line:

<img class="product-single__logo" src="{{ 'my-custom-logo.svg' | asset_url }}">

If you have used a png, jpg or gif image add this line:

<img class="product-single__logo" src="{{ 'my-custom-logo.png' | asset_img_url: '300x' }}">

Obviously adjust the filename to whatever name you used for yours.
Also, in the case of using a png, jpg or gif I recommend adjusting the '300x' to double the size that you want your logo to show.  So if you want the logo showing at 120px, then set that to '240x'

5- Now open Assets/theme.css or Assets/theme.scss.liquid. Depending on your Debut theme version you will have one or the other.
Go to the end of the file and add the following:

.product-single__logo {
	width: 120px;
}

 

6- Preview changes by going to the copy of your theme and clicking Actions > Preview.  If changes look good, go to step 7, if not, let me know

7- Publish the copy of your theme or make the same changes you just made in your Live Theme

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

View solution in original post

Replies 9 (9)

PeanutButter
Shopify Partner
385 67 181

Hi, would it be always the same logo or different logos for each vendor?

Also, can you share your site url and what theme you are using?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
RYZEVELI
New Member
4 0 0

The logo will always be the same.
Website URL: https://ryzeveli.com/
Theme: Debut

Thank you for your help

PeanutButter
Shopify Partner
385 67 181

Your store is password protected, please send password by private message

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
RYZEVELI
New Member
4 0 0

My website is now open. I’m sorry about that I was working on a few things 

PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

Hi, this would be the steps to accomplish this:

Screen Shot 2021-01-18 at 09.15.35.png

1- First of all I recommend making a copy of your theme to test the code there in case you break something.  Go to the theme and click Duplicate in the Actions dropdown.

2- Go to the copy of the live theme and in the Actions dropdown click Edit Code.

3- Add the logo to the Assets folder by clicking in Add a new asset:

Screen Shot 2021-01-18 at 09.12.35.png

I highly recommend you upload a your logo in vector format using .svg. However you can upload jpg, gif or png also. 
I recommend png over jpg for the logo if it is the one you pasted as example.
Now you would see your logo in the Assets folder:

Screen Shot 2021-01-18 at 09.12.58.png

4- Open product-template.liquid and search for the following line:

<h1 class="product-single__title">{{ product.title }}</h1>

You should find it around line 118

Now, above that line:

If you have used a logo in svg format, then add this line:

<img class="product-single__logo" src="{{ 'my-custom-logo.svg' | asset_url }}">

If you have used a png, jpg or gif image add this line:

<img class="product-single__logo" src="{{ 'my-custom-logo.png' | asset_img_url: '300x' }}">

Obviously adjust the filename to whatever name you used for yours.
Also, in the case of using a png, jpg or gif I recommend adjusting the '300x' to double the size that you want your logo to show.  So if you want the logo showing at 120px, then set that to '240x'

5- Now open Assets/theme.css or Assets/theme.scss.liquid. Depending on your Debut theme version you will have one or the other.
Go to the end of the file and add the following:

.product-single__logo {
	width: 120px;
}

 

6- Preview changes by going to the copy of your theme and clicking Actions > Preview.  If changes look good, go to step 7, if not, let me know

7- Publish the copy of your theme or make the same changes you just made in your Live Theme

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
RYZEVELI
New Member
4 0 0

Thank you very much, the logo is there perfectly. I appreciate your help. 

PeanutButter
Shopify Partner
385 67 181

Nice to hear!

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Inzamam
Visitor
3 0 0

My Friend,

How can I do this on Shopify 2.0 based theme.

Unfortunately there is no as such option.

nsh_sa
Visitor
1 0 1

How can I do it if i have different logos for each vendor?