Shopify themes, liquid, logos, and UX
I'm pulling my hair out trying to see what the issue is here - I have a theme that has been updated to the latest version, it's made the jump to Shopify 2.0 so it's a little different than before. I got all of my settings fixed, everything looks great, but for my content pages CSS styles are not being applied.
They are comprised of .JSON blocks or sections, the rest of the page looks correct, but the .JSON section styling had 0 margins and 0 padding and looks terrible. For whatever reason I cannot get the CSS that should be applied working. I've used the element inspector and I see that it is being loaded in the header, but the divs, classes, and ids don't have any of the properties applying to them. All other pages look correct. Help!
Mine: https://highfloperformance.com/pages/contact-us
How it should look: https://chromium3.arenacommerce.com/pages/contact-us
Solved! Go to the solution
This is an accepted solution.
Hi @wmcc
I saw in the body has a class "template-page-contact" -> it's wrong. It should be "page-contact".
1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid to update it
This is an accepted solution.
Hi @wmcc
I saw in the body has a class "template-page-contact" -> it's wrong. It should be "page-contact".
1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid to update it
My man! It was a little tricky, I had to make this change in my theme.liquid:
{%- capture body_class -%}
{%- if template.name == 'product' -%}
{%- if template.suffix != blank -%}
{{--}}|template-{{ template | replace: '.', '-' | replace: '/', '-' -}}
{%- else -%}
{{--}}|template-product-{{settings.product_page}}
{%- endif -%}
{%- else -%}
{{--}}|template-{{ template | replace: '.', '-' | replace: '/', '-' -}}
{%- endif -%}
to:
{%- capture body_class -%}
{%- if template.name == 'product' -%}
{%- if template.suffix != blank -%}
{{--}}|template-{{ template | replace: '.', '-' | replace: '/', '-' -}}
{%- else -%}
{{--}}|template-product-{{settings.product_page}}
{%- endif -%}
{%- else -%}
{{--}}|template-{{ template | replace: '.', '-' | replace: '/', '-' -}}
{%- endif -%}
As far as I can tell, this is only affecting my contact/about template page (default page template was fine). I'm assuming it was a typo by theme developers...which they should fix ASAP. Thank you so much!
User | RANK |
---|---|
214 | |
169 | |
65 | |
54 | |
53 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023