theme duplication issue - theme changes shopify section nos when duplicated

[SkoorySquirrel]

Noticed this evening that when I duplicate a theme, shopify section numbers are changing. Using Dawn theme.

I happened to receive at around the same time this happened an email from Shopify about webhooks, so would like to know if there is a connection - if there is one.

I'd like to find a quick fix but any good explanation would also be appreciated.

[jordanholmes · Accepted solution]

@SkoorySquirrel 

You should not copy the section id directly as they will change.

If you want to use the id to style a certain section then you should do something like

#{{section.id}} {
  background: white;
}

This way when then id changes - your code will still work

[ThomasBorowski]

What do you mean by "section numbers", the IDs in the JSON templates?

In any case, this has nothing to do with webhooks.

[SkoorySquirrel]

Hi Thomas,

For example:

I'm using this code in base.css:

#shopify-section-template--14347791204375__16407312341cc463a4 {
   margin-top: -10px; margin-bottom: -10px; padding-top: -10px; padding-bottom: -10px;
} /*video*/

But, after duplication the section number has changed, as can be seen from page source using Firefox:

      <section id="shopify-section-template--14349170343959__16407312341cc463a4" class="shopify-section spaced-section"><div style="margin: 0 auto; width: 100%; text-align: center; padding-top: 0px;">
<video controls="controls" style="max-width: 100%; margin: 0 auto; text-align: center; height: auto;">
<source src="https://cdn.shopify.com/s/files/1/0040/7404/5540/files/TTLCICskoorytrailer6_small.mp4?v=1640609837" type="video/mp4" />

so, the formatting is lost.

I need to find out how to fix this; it wasn't happening until yesterday. Worried that other bits and pieces may be changing as well, which I might not have noticed yet.

Thanks

[ThomasBorowski]

Those numbers are dynamically generated by Shopify and you should never target sections in CSS using those IDs. The proper way to target sections in CSS would be to include something like this in the respective section file:

<style>
.shopify-section-{{ section.id }} {
/* CSS styles */
}
</style>

[SkoorySquirrel]

@ThomasBorowski  @jordanholmes 

How would that work for the video section of a collage, for example? Would I put the style code in collage.liquid or collage.css ?

Thanks

[ThomasBorowski · Accepted solution]

Put it in collage.liquid as that's where Liquid can access the section's ID. And make sure you enclose the CSS in <style>...</style> tags.

[jordanholmes · Accepted solution]

@SkoorySquirrel 

You should not copy the section id directly as they will change.

If you want to use the id to style a certain section then you should do something like

#{{section.id}} {
  background: white;
}

This way when then id changes - your code will still work

[Barndog]

I don't understand how this work work when you have 8 different sections on the front page and you don't want them all having a white background. Say you have 4 rich text section and you want a different color background on each of them. I'm giving the sections a CSS class in the customizer, but it doesn't cover everything. 

[amanda3e]

The solution doesn't make sense to me either. I think the best thing to do would be to add a css class name or a css styles input for the customizer via the section schema. For instance:

<section class="{{ section.settings.css_class }}">

{% schema %}
{...
 "settings": [
   {
    "type": "text",
    "id": "css_class",
    "label": "CSS class"
   }
 ]
...}
{% endschema %}

It's bad practice to target IDs with CSS anyway.

[jordanholmes]

@Barndog I just gave a quick example to point the person in the right direction. You just need to replace 'white' with a color setting. This is going in the section file itself.

#s-{{ section.id }} {
  background-color: {{ section.settings.section_bg_color }};
}

@amanda3e I don't agree with you about targeting ids for css being bad practice. Use ID's for elements that will only appear once. But you can use classes if you like.

.s-{{ section.id }} { }

It's fine to add a class using a setting as per your example - but its more useful to link a color to the color picker so the user can select any color they want.

It's not great practice to have inline styles either but it makes sense in Shopify theme development