Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
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
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?
The logo will always be the same.
Website URL: https://ryzeveli.com/
Theme: Debut
Thank you for your help
Your store is password protected, please send password by private message
My website is now open. I’m sorry about that I was working on a few things
This is an accepted solution.
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
Thank you very much, the logo is there perfectly. I appreciate your help.
Nice to hear!
My Friend,
How can I do this on Shopify 2.0 based theme.
Unfortunately there is no as such option.
How can I do it if i have different logos for each vendor?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024