Possible to add text field to gallery section in Narrative theme?

Solved
barcusmrandt
Tourist
5 0 1

Hi all,

I'm using the narrative theme, which has a gallery section with 3 column images with text overlay. I've successfully managed to move the text below each image in the gallery. I have also restyled the text similar to an h3 heading used in the rest of the theme.

I would now like to add a text field below, so that i get a heading/caption, with some descriptive text below, for each of the images in the gallery. This style is used in several other sections in narrative theme, just not in the gallery section.

The problem is that there is only 1 text input field in the theme editor, which is now used to input the text for the heading/caption. I realize that in order to add a text field below the heading, I will need to add another text input field in the editor, and to have the code ready the input from there. The question is if this is at all possible, and if so, how to it.

I've already spoken to shopify support about this, and got the response that this falls outside of their ability to help.

Please have a look at the attached screenshots to see what i mean.

Appreciate any help on this!

Snip from my site. The section below the gallery shows what i would like to achieve.Snip from my site. The section below the gallery shows what i would like to achieve.Similar to this example, where there are 3 columns with image, heading, and text.Similar to this example, where there are 3 columns with image, heading, and text.

Pallavi
Shopify Expert
2364 396 512

This is an accepted solution.

Hello There, 

 

1. Add this code on this file sections/gallery.liquid

Screenshot :- https://prnt.sc/vlwi5b

{
"type": "text",
"id": "cta_label1",
"label":"Description"
},

2. Add this code on this file sections/gallery.liquid

{% if block.settings.cta_label1 != blank %}
<p class="content-text">{{ block.settings.cta_label1 | escape }}</p>
{% endif %}

Screenshot :- https://prnt.sc/vlwkt3
Screenshot :- https://prnt.sc/vlwjym

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
barcusmrandt
Tourist
5 0 1

This worked perfectly! Thank you so much!

0 Likes
forrester33
New Member
3 0 0

Awesome fix - worked great for me!

One more question: how can I increase left & right padding for the description text? Currently, it spans the entire gallery block but I'd like it to be more compact/centered. 

Thank you!

0 Likes
forrester33
New Member
3 0 0

Following up on this, I figured it out and have provided the (very simple) solution below:

Description: If you followed the original solution's instructions, now all you have to do is create a "content-text" class in the theme.scss.liquid file. The "content-text" class is shown in the screenshot in the original solution, but since the "content-text" class doesn't exist in the style sheet yet, you have to create it to manipulate colors, padding, etc. 

The code I added is the final block (.content-text), which will make the description text white and add a bit of padding.

 

Hope this helps!

forrester33_0-1608585766577.png

 

0 Likes
Chengst88
New Member
2 0 0

Hi, You start this post with mentioning that you moved the text under the image. How did you get it to do that? I am having your exact problem. Thanks a million!

0 Likes