Shopify Design

ThomasMaghanga · ‎11-05-2021

Hello everyone

May someone please help me understand the difference between these two lines

Line 1
<body class="template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}{% if request.path == '/challenge' %} template-challange{% endif %}" data-center-text="{{ settings.type_body_align_text }}" data-button_style="{{ settings.button_style }}" data-type_header_capitalize="{{ settings.type_header_capitalize }}" data-type_headers_align_text="{{ settings.type_headers_align_text }}" data-type_product_capitalize="{{ settings.type_product_capitalize }}" data-swatch_style="{{ settings.swatch_style }}" {% if settings.disable_animations %}data-disable-animations="true"{% endif %}>

Line 2
<body class="template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}{% if request.path == '/challenge' %} template-challange{% endif %}" data-center-text="{{ settings.type_body_align_text }}" data-button_style="{{ settings.button_style }}" data-type_header_capitalize="{{ settings.type_header_capitalize }}" data-type_headers_align_text="{{ settings.type_headers_align_text }}" data-type_product_capitalize="{{ settings.type_product_capitalize }}" data-swatch_style="{{ settings.swatch_style }}" {% if settings.disable_animations %}data-disable-animations="true"{% endif %}>

PaulNewton · ‎11-06-2021

@ThomasMaghanga The first <body> is creating a class in the class attribute with this logic "template-{{ template | replace: '.', '-' | handle }}"

which is similar to another piece of logic creating the first class : "template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}"

When comparing code/html lines like this it helps immensely to format code with line breaks between attributes for reading sanity

<body
 class="template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}{% if request.path == '/challenge' %} template-challange{% endif %}"
 data-center-text="{{ settings.type_body_align_text }}"
 data-button_style="{{ settings.button_style }}"
 data-type_header_capitalize="{{ settings.type_header_capitalize }}"
 data-type_headers_align_text="{{ settings.type_headers_align_text }}"
 data-type_product_capitalize="{{ settings.type_product_capitalize }}"
 data-swatch_style="{{ settings.swatch_style }}"
 {% if settings.disable_animations %}data-disable-animations="true"{% endif %}
>

When having trouble interpreting an html tags class logic extract it out to it's own code block being careful to not inadvertently remove whitespace between the classes

{%- capture body_classes - %}
 template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} 
 template-{{ template | replace: '.', '-' | handle }} 
 {% if request.path == '/challenge' %} template-challange {% endif %} 
{%- endcapture - %}

<body class="{{ body_classes }}" >

FYI: "template-challange" is a typo it should be "template-challenge"

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

PaulNewton · ‎11-06-2021

@ThomasMaghanga The first <body> is creating a class in the class attribute with this logic "template-{{ template | replace: '.', '-' | handle }}"

which is similar to another piece of logic creating the first class : "template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}"

When comparing code/html lines like this it helps immensely to format code with line breaks between attributes for reading sanity

<body
 class="template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}{% if request.path == '/challenge' %} template-challange{% endif %}"
 data-center-text="{{ settings.type_body_align_text }}"
 data-button_style="{{ settings.button_style }}"
 data-type_header_capitalize="{{ settings.type_header_capitalize }}"
 data-type_headers_align_text="{{ settings.type_headers_align_text }}"
 data-type_product_capitalize="{{ settings.type_product_capitalize }}"
 data-swatch_style="{{ settings.swatch_style }}"
 {% if settings.disable_animations %}data-disable-animations="true"{% endif %}
>

When having trouble interpreting an html tags class logic extract it out to it's own code block being careful to not inadvertently remove whitespace between the classes

{%- capture body_classes - %}
 template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} 
 template-{{ template | replace: '.', '-' | handle }} 
 {% if request.path == '/challenge' %} template-challange {% endif %} 
{%- endcapture - %}

<body class="{{ body_classes }}" >

FYI: "template-challange" is a typo it should be "template-challenge"

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

ThomasMaghanga · ‎11-18-2021

Thank you so much Paul, understood!

Shopify Design

Help me understand the body tag on theme.liquid

Help me understand the body tag on theme.liquid

Re: Help me understand the body tag on theme.liquid

Re: Help me understand the body tag on theme.liquid

Re: Help me understand the body tag on theme.liquid

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links