Shopify themes, liquid, logos, and UX
I have added a "people also searched for" section on this page: https://www.physioworldshop.co.uk/collections/treatment-couches
I would like it styled more like this:
https://www.argos.co.uk/browse/appliances/vacuum-cleaners-and-floorcare/vacuum-cleaners/c:29693/
Is there some way of doing this?
If i am not wrong you probably have added this section as html. This is possible with css but will require the html
Please reach out from personal contact links below as it will require collab access to the store to make things easy.
Best
Shadab
<div class="related-categories">
<h3>People also searched for</h3>
<a href="/collections/electric-couches">electric massage bed</a><br> <a href="/collections/massage-beds">massage couch</a><br> <a href="/collections/treatment-couches">examination couch</a><br> <a href="/collections/hydraulic-couches">hydraulic massage bed</a><br> <a href="/collections/treatment-couches">medical couch</a><br> <a href="/collections/treatment-couches">physio bed</a><br> <a href="/collections/electric-couches">electric treatment bed</a><br> <a href="/collections/treatment-couches">treatment couch</a><br> <a href="/collections/electric-couches">electric massage couch</a><br> <a href="/collections/massage-beds">massage table uk</a><br> <a href="/collections/treatment-couches">treatment beds</a><br> <a href="/collections/electric-couches">electric treatment couch</a><br> <a href="/collections/treatment-couches">physio plinth</a><br> <a href="/collections/treatment-couches">physiotherapy table</a><br> <a href="/collections/treatment-couches">physiotherapy beds</a><br> <a href="/collections/treatment-couches">physiotherapy plinth</a><br> <a href="/collections/electric-couches">electric therapy couch</a></div>
Now i will have to try this on codepen😅
Here is the link to the codepen. https://codepen.io/shaddu-dev-ali/pen/NWQeMaO
Replace your html with mine. And the css under style tags
<style>
my css code
</style>
Pretty sure you can take help from the code and make changes as per your liking.
Best
Shadab
Thanks Shadab, this is all looking good apart from it overhanging on mobile view:
Here's the updated css
.links{
display: grid;
grid-template-columns: repeat(5, 1fr);
width: 80%;
margin: 0 auto;
text-align: center;
}
.links a{
text-decoration: none;
color: #000000;
text-transform: capitalize;
margin: 10px;
}
.links a:hover{
background: #eeeeee;
padding: 5px;
border-radius: 50px;
}
@media(max-width:767px){
.links{
grid-template-columns: repeat(1, 1fr);
}
.links a{
margin: 5px;
}
}
Please make the adjustments accordingly
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025