Where to find specific sections in the theme code?

Solved
Excursionist
27 0 1

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

0 Likes
Shopify Expert
665 170 199
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
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Excursionist
27 0 1

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

0 Likes

Success.

Shopify Expert
20 3 4

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. 

https://enjoythemecompany.com/
1 Like
Excursionist
27 0 1

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.

0 Likes
Shopify Expert
665 170 199

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. 

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Excursionist
27 0 1

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.

 

Screenshot 2019-09-19 at 18.15.57.pngScreenshot 2019-09-19 at 18.18.18.png

0 Likes
Shopify Expert
20 3 4

Hey XOAppleton, 

 

Glad it worked out for you! All the best!

https://enjoythemecompany.com/
0 Likes