Where to find specific sections in the theme code?

[XOAppleton]

Hello,

I'm trying to make two "Image with text" sections wherein the text formatting is different.

However, to do so I need to find:

<div id="shopify-section-1568732432263" class="shopify-section index-section"><div class="page-width feature-row">

I've checked every liquid and css file and cannot find any sections with that ID. Are they stored somewhere else?

I'm using the Minimal theme.

Thanks in advance

[OTM]

Hi, XOAppleton,

This is Evita from On The Map. 

The div id that you are looking for is probably generated and you won't find it in the liquid files. You can try to find the div by class names. In what page you want to add the sections?

Best, 

Evita

[XOAppleton]

Hello,

That's what I thought, I guess it is indeed generated then.

I have the "image with text" section twice on my landing page, but I need to make the text in one of them larger and a different colour.

I can edit the div by class names - I already tried that, but that changes both of the sections. Is it even possible to change this without altering the code a lot?

Kind regards,

Remy

[Simon_Jones · Accepted solution]

Hey XOAppleton, 

Like Evita mentioned the id of the div is dynamically created. 

If you're handy with code you could duplicate the file in the sections folder of your theme. Then change up the names so you can identify them in your admin and add a specific class to the div in the new file. So essentially you'd end up with Image with text - large styles and Image with text - small styles. 

[XOAppleton]

Hey,

I was hoping there would be an easier way, but I guess that that's the only way. I'll put my skills to test and hope for the best!

Thank you both kindly for your replies.

[OTM]

It changes both sections because the class names are the same in the div. If you can then add different class names to both of your sections, for example, section-1 and section-2 and then add the CSS code. 

<div class="section-1">Font size 20 and color white</div>
<div class="section-2">Font size 12 and color black</div>

<style>
.section-1 {
  font-size: 20px;
  color: #fff; 
}

.section-2 {
  font-size: 12px;
  color: #000;
}
</style>

Or maybe the code already has one different class name than the other. 

[XOAppleton]

After some tweaking and mistakes I managed to get it working by making a new section and adding classes to it. I even got to fix issues that I had on the mobile website thanks to this.

[Simon_Jones]

Hey XOAppleton, 

Glad it worked out for you! All the best!

[lbcdesign]

I am having a similar issue to this.  I have a few banners that are appearing on a homepage (free shipping banner above the announcement bar and another at the bottom of the browser)... and I want to remove them.  After I inspect these, I can't find the code lines anywhere in any of the liquid files. 

When you say they could be 'generated' what do you mean and how would I go about finding the source and deleting them?  

Thanks in advance for the help.