Formating on theme after push doesn't match development

nealrm
Shopify Partner
5 0 0

I duplicated and modified an existing theme. I pulled the theme files using the CLI, edited the theme using VS code and checked the results. I then push the theme to as follows: 

```

shopify theme push --theme "Ver 1.02 (July 17, 2023)"
┏━━ Pushing theme files to Ver 1.02 (July 17, 2023) (#########6226) on inland-cape-rice.myshopify.com
┃ 100%
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (3.71s) ━━━
√ Your theme was pushed successfully

View your theme:
https://[company name]/?preview_theme_id=########6226

Customize this theme in the Theme Editor:
https://[company name]/admin/themes/#######6226/editor

 

 

I then returned to development to compare the two. 

July 12> shopify theme dev
╭─ success ──────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Preview your theme │
│ • http://127.0.0.1:9292 [1] │
│ │
│ Next steps │
│ • Customize your theme at the theme editor [2] │
│ • Share your theme preview [3] │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
[1] http://127.0.0.1:9292
[2] https://[company name]/admin/themes/########9234/editor
[3] https://[company name]/?preview_theme_id=########9234

 

The formats on the two are very different. The pushed theme looks like this:
pushed theme.png

 

The theme on the development side looks like this:
Development Theme.png
Template page code:

<div id='scasl-app-container' class="new-for-mobile" style="display:none">
  <div class="bh-sl-container scasl-container" style="margin-top:150px" >
      {% section 'store_logos' %}
  </div>
</div>
 
store_logos code:
{% stylesheet %}
    .debug {
        outline:solid 1px blue;
    }
    .center-block {
        display: block;
        margin-inline: auto;
        width: max-content;
        max-width: 96%;
    }
    .logoHolder {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: space-between;
        flex-wrap: wrap;
        flex-direction: row;
        gap: clamp(20px, 5vw, 50px);
        margin-bottom:50px;
        margin-inline:auto;
        width: 70%;
    }
    .title {
        font-size: clamp( 12px, 5vw, 48px) !important;
        margin-bottom: 80px !important;
        text-align: center;
    }

    @media screen and (max-width: 1800px) {
           
    }

{% endstylesheet %}


<div class="col-lg-12 ">
    <h2 class="center-block title">
        {% case section.settings.font_case %}
            {% when 'capitalize' %}
                {{ section.settings.title | capitalize }}
            {% when 'upcase' %}
                {{ section.settings.title | upcase }}
            {% when 'downcase' %}
                {{ section.settings.title | downcase }}
            {% else %}
                {{ section.settings.title | upcase }}
        {% endcase %}
    </h2>
    <div class="logoHolder">
        {% for logo in section.blocks %}
            {{ logo.settings.logo | img_url: logo.settings.logo_size | img_tag }}
        {% endfor %}
    </div>
</div>

{% schema %}
    {
        "name": "Store Logos Section",
        "class": "store-logos",
        "settings": [
            {
                "id": "title",
                "type" : "text",
                "label" : "Store logos title",
                "default" : "Find our rice at these great stores"
            },
            {
                "id": "font_case",
                "type": "select",
                "label": "Font Case",
                "options": [
                    { "value": "upcase", "label": "Upper Case"},
                    { "value": "capitalize", "label": "Capitalize"},
                    { "value": "downcase", "label": "Lower Case"}
                ],
                "default": "capitalize"
            }
        ],
        "blocks":[
            {
                "name": "store logos",
                "type": "store_logos",
                "settings": [
                    {
                        "id":"logo",
                        "type":"image_picker",
                        "label":"Logo"
                    },
                    {
                        "id": "logo_size",
                        "type": "text",
                        "label": "Logo Size",
                        "default": "200x"
                    },
                    {
                        "id": "store",
                        "type": "text",
                        "label": "Store Name"
                    }
                ]
            }
        ]
    }
{% endschema %}
Why is the theme that was pushed to shopify displaying differently than the theme in development?
 
Replies 4 (4)
nealrm
Shopify Partner
5 0 0

Let's keep this online so that others can learn from this.

 

Liam
Shopify Staff
2731 302 783

Hi Nealrm - it sounds like the theme on the live Shopify store is not accepting the changes from the development environment, is that correct? 

 

Can I ask what version of the CLI you're using? There may be a syncing issue that was resolved in recent CLI versions.

 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

nealrm
Shopify Partner
5 0 0

Thanks for the reply. The CLI version is 3.47.5. 

I checked the code using the code editor on the Shopify site. It appears to be identical. 

nealrm
Shopify Partner
5 0 0

On a hunch, I replaced "{% stylesheet %}" with "<style>". That worked. Not sure why the template was not accepting the CSS inside the code tag, but it clearly was not.