Solved
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.
Hi, this would be the steps to accomplish this:
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:
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:
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
