Solved

How can I substitute an HTML tag in my product descriptions without editing each one?

SandrasStitchS1
Excursionist
14 2 1

In all of my 13700+ product descriptions I have an <hr> html tag. The problem is spacing, it is just to far apart between the text sections so I wanted to change the <hr> to this. 

 

<div style="margin-top: 0px; width: 100%; height: 0px; border-bottom: 1px solid #888888; margin-bottom: 10px;">
</div>

 

But, what I want to do is instead of editing 13700+ items is sub the <hr> in the main-product.liquid section where it prints the description. This is the code I have now:

 

{%- when 'description' -%}
{%- if product.description != blank -%}
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
<table width=100% border=2 cellpadding=0 cellspacing=0><tr>
<td bgcolor=#ddccdd><b>Description</b></td>
<td width = 80 align="center" bgcolor=#ddccdd>
<a href="https://sandrasstitchstash.com/pages/fabric-size-calculater"><img src="https://cdn.shopify.com/s/files/1/1777/7041/files/calc.png?v=1576110083" height=30 width=30></a>
</td></tr><tr>
<td bgcolor=#eeeeff colspan=2>{{ product.description }}</td>
</tr></table></div>
{%- endif -%}

 

So I need it to sub the <div> code above for the <hr> in the product.description string right before it prints it out.

Accepted Solutions (2)

SandrasStitchS1
Excursionist
14 2 1

This is an accepted solution.

Actually I figured it out 🙂

New code:

 

{%- when 'description' -%}
{%- if product.description != blank -%}

{% assign newSplitText = product.description | split: '<hr>' %}

<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
<table width=100% border=2 cellpadding=0 cellspacing=0><tr><td bgcolor=#ddccdd><b>Description</b></td>
<td width = 80 align="center" bgcolor=#ddccdd>
<a href="https://sandrasstitchstash.com/pages/fabric-size-calculater"><img src="https://cdn.shopify.com/s/files/1/1777/7041/files/calc.png?v=1576110083" height=30 width=30></a></td></tr><tr>
<td bgcolor=#eeeeff colspan=2>{{ newSplitText[0] }}
<div style="margin-top: 0px; width: 100%; height: 0px; border-bottom: 1px solid #888888; margin-bottom: 10px;">
</div>{{ newSplitText[1] }}</td>
</tr></table></div>
{%- endif -%}

View solution in original post

SandrasStitchS1
Excursionist
14 2 1

This is an accepted solution.

Even better, handles the instances when there no <hr>'s

<td bgcolor=#eeeeff colspan=2>{{ newSplitText[0] }}
{% if newSplitText[1] != blank %}
<div style="margin-top: 0px; width: 100%; height: 0px; border-bottom: 1px solid #AAAAAA; margin-bottom: 10px;">
</div>
{{ newSplitText[1] }}
{% endif %}
</td>

View solution in original post

Replies 2 (2)

SandrasStitchS1
Excursionist
14 2 1

This is an accepted solution.

Actually I figured it out 🙂

New code:

 

{%- when 'description' -%}
{%- if product.description != blank -%}

{% assign newSplitText = product.description | split: '<hr>' %}

<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
<table width=100% border=2 cellpadding=0 cellspacing=0><tr><td bgcolor=#ddccdd><b>Description</b></td>
<td width = 80 align="center" bgcolor=#ddccdd>
<a href="https://sandrasstitchstash.com/pages/fabric-size-calculater"><img src="https://cdn.shopify.com/s/files/1/1777/7041/files/calc.png?v=1576110083" height=30 width=30></a></td></tr><tr>
<td bgcolor=#eeeeff colspan=2>{{ newSplitText[0] }}
<div style="margin-top: 0px; width: 100%; height: 0px; border-bottom: 1px solid #888888; margin-bottom: 10px;">
</div>{{ newSplitText[1] }}</td>
</tr></table></div>
{%- endif -%}

SandrasStitchS1
Excursionist
14 2 1

This is an accepted solution.

Even better, handles the instances when there no <hr>'s

<td bgcolor=#eeeeff colspan=2>{{ newSplitText[0] }}
{% if newSplitText[1] != blank %}
<div style="margin-top: 0px; width: 100%; height: 0px; border-bottom: 1px solid #AAAAAA; margin-bottom: 10px;">
</div>
{{ newSplitText[1] }}
{% endif %}
</td>