Shopify themes, liquid, logos, and UX
Hi there,
I am trying to align all the sections of my home page (see screenshots below).
On the desktop version the multicolumn section is not aligned to the others, while on the mobile is the rich text that is not aligned.
Any suggestions?
With best
Andrea
Hello @Andrecolap
can you share store URL?
Hello @Andrecolap
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.background-none .multicolumn-card__image-wrapper {
margin-left: unset !important;
margin-right: unset !important;
}
@media screen and (max-width:767px){
.rich-text__wrapper {
display: flex;
justify-content: center;
width: unset !important;
}
}
</style>
Mobile
Thanks Techlyser_web,
the problem is nearly fixed. The only bits that are not aligned now are the descriptions under the images in the multicolumn section (see screenshot). Do you know how I can sort this?
Also I would like to add links to the images and descriptions on the multicolumn sections, rather than in the few words 'Go to Art', 'Go to Furniture', etc, which I had to add afterwards.
Thank you
Hey @Andrecolap
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.background-none .multicolumn-list .multicolumn-card__info{
padding-left: unset !important;
}
</style>
And for your last issue you have to do some custom code like: you have to add anchor tag on image and description in multicolumn.liquid file.
Thanks Techlyser_web,
but this last fix didn't work. The descriptions in the multicolumn section are still not aligned with the images above them.
What I see in your screenshot is exactly what I want.
Re the other issue, hpw do I add anchor tag on image and descriptions?
Many thanks for your assistance
Note I didn't restore the original version of theme.liquid before adding the last bit of code.
Hello @Andrecolap
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.multicolumn-card .multicolumn-card__info {
padding-left: 0 !important;
}
</style>
Thank you @niraj_patel but for some reasons that didn't work.
It's all ok from mobile but the text is still not aligned on desktop (see below). Any further ideas?
Also in the multicolumn sections I am trying to add anchor tags on images and descriptions to link them to the collections, but with no success. If you could guide me with this as well, it would be great. Thank you
@Andrecolap
for that Go--> Theme--->click on customize
Then click on multicolumn
Then set the number of column
Hey @Andrecolap
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px){
.background-none .multicolumn-list .multicolumn-card__info{
padding-left: unset !important;
}
}
</style>
Hi @niraj_patel,
regarding the number of columns, I just closed the editor opened it again and adjusted the relating option, and it worked.
The text alignment is not sorted even after trying to paste the last bit of code that you suggested.
Also I still didn't figure out how to add anchor tags on images and descriptions, or better to the the entire columns, to link them to the collections.
can you share screenshot of the code where you paste?
Because I applied the code and it is working.
Anyway I realised I pasted that bit of code twice (see screenshot). I tried to remove one of the 2 codes and it wasn't working anymore.
Also I am getting this message about 'Attempting to close HtmlElement 'body' before HtmlElement 'style' was closed. (see screenshot)
Is this something to worry about?
Shall I start another post regarding linking column sections to collections?
You need to remove the code from line number 382-391.
If I remove the code from line number 382-391 (or from 383-291) or from 392-400 I have again the problem I had before: the text is not aligned with the images. If I keep both codes the text is aligned but I keep receiving the warning/error message.
@niraj_patel it worked with this code. Thank you!
Any suggestions on how to add anchor tags to the the single columns, to link them to the collections?
For that you have find the code of image in multicolumn.liquid file and add code between <a href="you have do paste link here"></a> tag , And same as for description.
not sure I got this, on multicolumn.liquid I found only one line with <a href= (see screenshot) and that doesn't end with ></a> tag. so I don't understand where I have to paste my link, and I don't know if that line refers to the image or the description.
Thanks again for your help @niraj_patel
hi @niraj_patel , if you have any suggestions for my 2 current problems, please do let me know.
With best
Andrea
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