Shopify themes, liquid, logos, and UX
Hi, so I want to use meta fields to show on each product page , the brand (vendor) of each product , but I want this to be clickable , so customer can click vendor and be taken to the vendor collection (brand page)
is this something that’s possible?
If the brand is mentioned in the admin view for your products, it should be possible to show that link on the product page as well.
Do you have any experience coding in Shopify?
I have a small amount of experience, any help appreciated?
You'll want to place this code as a link on your product.liquid file wherever you want the title to appear:
{{ product.vendor | escape }}
If you need help setting this up, please feel free to send me an email at zqdo.tech@gmail.com.
Hello @spoiledbratuk, just wanted to check back in and see if you still needed any help. Thanks!
Yes you can create metafields from custom content in settings and then you need to add code in theme files in product.liquid o make it to work
You can use a metaobject instead and provide the vendor name and vendor link. The call the metaobject in your theme. Unfortunately, this will be not a simple solution and you need to hire someone to do this for you
Ive managed to set a "brand" metafield - showing vendor name , but I need to make this clickable , or if not possible , show vendor description (collection / brand description) do you think this would be possible?
I recommend using metaobject so the link, brand name, and description are link together. You use details/summary to show the information when you click on the brand name.
Refer to the code here.
{% assign brands = shop.metaobjects['brands'].values %}
{% for brand in brands %}
<details>
<summary>{{ brand.name }}</summary>
<p>{{ brand.description }}<a href="{{ brand.link }}" target="_blank">More details</a</p>
</details>
{% endfor %}
If you are unable to make this work. I recommend hiring someone to do this for you
Hello @spoiledbratuk
Yes, it is possible to use meta fields to display the brand or vendor information on each product page in Shopify and make it clickable to navigate to the vendor collection or brand page. Here's a general guide on how to achieve this:
Access the Shopify Theme Editor: Log in to your Shopify admin and go to "Online Store" > "Themes." Locate the active theme and click on the "Customize" button to access the Theme Editor.
Open the product template settings: In the Theme Editor, find the section related to the product template. This section might be named "Product Pages," "Product Template," or something similar. Click on it to access the settings for the product template.
Edit the product template code: Look for an option that allows you to edit the product template code or customize the layout. Typically, this option is labeled as "Edit Code" or similar.
Locate the code responsible for displaying the brand or vendor: In the product template code, find the section that handles the display of the brand or vendor information. This section might include code such as {{ product.vendor }}
.
Wrap the vendor code with an anchor tag: Modify the code to wrap the vendor information with an anchor tag (<a>
tag) to make it clickable. For example.
<a href="/collections/vendors?q={{ product.vendor | handle }}">
{{ product.vendor }}
</a>
This code creates a link that points to the vendor collection or brand page based on the vendor's handle. The {{ product.vendor | handle }}
filter converts the vendor name to a URL-friendly format.
6.Save and publish changes: Save the modifications to the product template code and publish the theme to make the changes live on your product pages.
After implementing the above code, the brand or vendor information on each product page will be clickable, and when clicked, it will take the customer to the corresponding vendor collection or brand page.
Please note that the specific code and steps may vary depending on your theme and customization. If you encounter any difficulties or need more specific instructions, consider reaching out to your theme developer or Shopify support for further assistance.
Thankyou, the issue is the product doesnt have a vendor listed on it , so I would need to list the vendor as a metafield in order to display - and the metafield is what I am trying to get linked ?
User | RANK |
---|---|
145 | |
98 | |
78 | |
69 | |
65 |
This blog post is a recap of the webinar Getting Ready For BFCM: How To Run A Flash Sal...
By Jacqui Oct 3, 2023Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023