Hello Community!
I notice on my website the product titles are below, which I do not think is very user friendly. Is there some code where this can be moved to the top of each product?
I use Dawn 2 theme and this is my website:
would really appreciate any help
Regards
Scott
Hi Scott,
This is definitely doable with a bit of code manipulation.
If you have some basic coding knowledge, just follow the steps below and that’ll put the product title above the image for each product on the page, otherwise, you may want to hire somebody to do it for you. I do offer such services, send me a message and I’ll handle it for you, contact/email info in signature.
Onto the steps, in your dashboard, click “Online Store”, then click the 3 dots next to the “Customize” button, and then click “Edit code” in the context menu.
The div you’re looking for is a div with a class of “card__content”, this is the div that contains both the product title and the product price.
You’ll need to copy this div and paste it just above its sibling div, its sibling div is the div that contains the product image (the class of this div will start with “card__inner” and may have some other text after that).
At this point, your product card will show an image along with the product title and the product price shown twice: once above the image and once below the image.
So now, you’ll want to remove the product price from above the image and the product title from below the image.
To remove the product price from above the image, do this: inside the div that was just pasted above the div that contains the product image, find a div with a class of “card-information” and either comment it out or delete it altogether. This will remove the price from above the image.
Now you’ll need to remove the title from under the image. To do that, inside the div that we copied earlier (the div with the class of “card__content”, located below the div that contains the product image), find an h3 tag, this is the tag that contains the product title, either comment it out or delete it. This will remove the product title from below the image.
And that’s it. Your product card should now consist of the product title, the product image below that, and the product price below that.
Hope that helps.
I forgot to mention the file in which to make the modifications; it’s “card-product.liquid”.
Hi, @Gen-Audio . I’m happy to look into this with you! I just have a few questions to make sure I’m giving you helpful advice going forward.
Since you’re using the Dawn theme there are many aspects of your theme that you can customize within your theme editor. This can be done using your theme’s available sections and blocks, instead of having to customize your theme code. There are some cases where you would still need to edit your theme code, but depending on where you’re trying to move your product titles, this may be possible to do with the settings you have built into your theme. If you tell me more about the change you’d like to make to your product titles I can review this further and share any suggestions I have. If you have a screenshot or image showing an example of how you’d like this to look, that can help as well.
Please let me know if you have any questions! The following guides may be able to help in the meantime as well:
Thanks to both replies here. This feature is not available in blocks and sections in the Dawn 2 theme. Also the first suggestion is very long winded so is a little difficult for me as I only have some basic knowledge of code.
This is the page that worries me the most as you have to scroll down to read the description and price. I thought it would be more use friendly with it displaying to the top on these images?
https://www.generationaudio.co.uk/collections/mastering
Regards
Scott
Hi, @Gen-Audio . Thanks for getting back to me with that context!
I’ve taken a look into this and you’re right that there aren’t settings built into Dawn to move where the product title is located on collection pages. One suggestion I have instead is to change the size or ratio of your images so that customers won’t need to scroll to see the product information. You can find the settings to do this by going to your theme editor and selecting your Product grid section in the Default collection template.
If you still want to move the product information this can be done by editing your theme code. If you’re not comfortable customizing theme code on your own you can hire a Shopify expert to assist you. At the moment you can hire Shopify experts from the Experts Marketplace here. However, we will soon be moving this to the Shopify Partner Directory so it’s good to be aware of this for the future. You can learn more about the Shopify Partner Directory here.
Happy to help if you have more questions!