Shopify themes, liquid, logos, and UX
Hello, I have customized my collection list to appear slightly differently, however there are still changes I need to make. I need to make the collection name text white, slightly bigger and better positioned like in the example below.
Additionaly, I want to adjust the mobile view so the collections appear in a 2x2 format there, an example is also included below.
( ^ Right now collection names are barely visible, need to change them)
( ^ This is what I want the text to look like instead)
Here whats needed for mobile:
( ^ This is how the collection list looks on mobile currently, would be nice to change text to white and lift it a little so its more centered. Would also want to remove scrolling function, and just have a 2x2 like in the example below)
( ^ This is how I would like the collection list to look on mobile, 2x2 format, no scrolling/carrousel)
Any and all help appreciated, thank you!
Store: https://artisimo.es/
Pass: pongia
Solved! Go to the solution
This is an accepted solution.
Can transfer the code to the other file? Check the instruction below.
1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
.collection-list h3.card__heading {
color: white;
font-size: 20px;
}
.section-collection-list .card__content {
position: absolute;
bottom: 50px !important;
}
@media only screen and (max-width: 749px){
.collection-list-wrapper .slider {
overflow-x: hidden;
scroll-snap-type: inline;
gap: 0;
}
.collection-list {
display: grid;
grid-template-columns: 1fr 1fr;
}
.collection-list-wrapper .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
width: 100% !important;
max-width: 100%;
}
.collection-list .grid__item:first-of-type {
margin-left: 0rem !important;
}
.collection-list.slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: 0;
padding-top: 0;
}
.section-collection-list .slider-buttons {
display: none;
}
}
</style>
And Save.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hello @JordiP ,
Would you please share your Store URL website? with password if its unpublish. Thanks!
Hi @JordiP
Try this one.
.collection-list h3.card__heading {
color: white;
font-size: 20px;
}
.collection-list-wrapper .card__content {
position: absolute;
bottom: 50px !important;
}
@media only screen and (max-width: 749px){
.collection-list-wrapper .slider {
overflow-x: hidden;
scroll-snap-type: inline;
gap: 0;
}
.collection-list {
display: grid;
grid-template-columns: 1fr 1fr;
}
.collection-list-wrapper .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
width: 100% !important;
max-width: 100%;
}
.collection-list .grid__item:first-of-type {
margin-left: 0rem !important;
}
.collection-list.slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: 0;
padding-top: 0;
}
.section-collection-list .slider-buttons {
display: none;
}
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Thank you! Is it possible to adjust the positioning of the text on both desktop and mobile? And to remove the gap in the 2x2 for mobile?
( ^ I would like the text moved up slightly and in a slightly bigger font so its easier to read on desktop specifically.)
For mobile:
( ^ I would like to remove the white gap in between the 2x2, and adjust all the text positioning slightly higher so that atleast the "Pintura Inspirada" section fits into the image.)
This is an accepted solution.
Can transfer the code to the other file? Check the instruction below.
1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
.collection-list h3.card__heading {
color: white;
font-size: 20px;
}
.section-collection-list .card__content {
position: absolute;
bottom: 50px !important;
}
@media only screen and (max-width: 749px){
.collection-list-wrapper .slider {
overflow-x: hidden;
scroll-snap-type: inline;
gap: 0;
}
.collection-list {
display: grid;
grid-template-columns: 1fr 1fr;
}
.collection-list-wrapper .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
width: 100% !important;
max-width: 100%;
}
.collection-list .grid__item:first-of-type {
margin-left: 0rem !important;
}
.collection-list.slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: 0;
padding-top: 0;
}
.section-collection-list .slider-buttons {
display: none;
}
}
</style>
And Save.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Thank you so much!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024