Shopify themes, liquid, logos, and UX
I'm using the Narrative theme and am looking for help on how to add a four-column section with icons and text below. Ideally, it would switch to two columns on mobile.
See attached for reference. Thanks!
Solved! Go to the solution
This is an accepted solution.
Hi @herculesshields,
This section with a specific mobile layout would need to be custom built. That said, you could probably come close using Narrative's "Custom content" section with HTML blocks.
Let me know if you need more help.
This is an accepted solution.
The fastest method would be to change your "Section spacing" setting in the "The Hero your phone deserves" section:
The section below this one doesn't have such a setting, so reducing its height would require editing code.
This is an accepted solution.
Hi @herculesshields,
This section with a specific mobile layout would need to be custom built. That said, you could probably come close using Narrative's "Custom content" section with HTML blocks.
Let me know if you need more help.
Hi I decided just to use the Featured Content Section in Narrative Theme that allows me to upload 4 images beside one another with text below. I'm trying to find the code so I can remove click state on images as I don't need them going anywhere.
It's the section under "Full Phone Protection" that I am trying to eliminate the click states on images for: https://herculesstrong.ca
Thanks!
Ah, I see you meant the Collection List section.
In this case, the simplest way to disable those links would be to add this CSS to the bottom of your "theme.scss.liquid" file:
#shopify-section-1606766388394af1e7 .collection-list-grid__link {
pointer-events: none;
}
I've scoped this rule to your specific home page section, just in case you want to add another collection list with functional links later on.
THANK YOU!!! That worked great!
Last question (Probably). Do you know how to remove some of the black spacing between the two sections on the homepage? See attached.
Thanks!
This is an accepted solution.
The fastest method would be to change your "Section spacing" setting in the "The Hero your phone deserves" section:
The section below this one doesn't have such a setting, so reducing its height would require editing code.
Thanks!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024