Shopify themes, liquid, logos, and UX
Hi there,
I would like to add a button "back to the collection" on my product page. The button should link to the collection that was just viewed previously / the collection that is associated with a product (I only have one collection for each product). I would need two "back to collection" buttons : one between the product information, and the "you may also like" section, and one between the "you may also like" section, and the footer.
Here is a screenshot:
Here is the link and password to the shop:
https://384f77-3.myshopify.com/collections/archive-six
mewnaw
Hi,
Please try this
At product.liquid add the "Back to Collection"
<!-- Add this code where you want the button to appear -->
<a href="{{ product.collections.first.url }}" class="back-to-collection-button">Back to Collection</a>
add this CSS to your theme's styles
/* Add this CSS to your theme's styles */
.back-to-collection-button {
display: block;
margin-top: 20px; /* Adjust the margin according to your design */
text-decoration: none;
background-color: #007bff; /* Change the background color to match your theme */
color: #fff;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.back-to-collection-button:hover {
background-color: #0056b3; /* Change the background color on hover if desired */
}
hi @Small_Task_Help
thanks for the code, it works as it should. I just have one small issue. In the mobile view it does not show the button as a button, only as text. How can I fix this?
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025