Bullet points in text of grid section for empire theme

[Tjinnie]

Hi,

Can anybody help me and let me know how i can get a bullet point list in the text of the grid section of the Empire theme?

Want it to look like this:

• Text1
• Text2
• Text3

But  i can only get this:

• Allergy Free • Toxic/Chemicals Free •Latex Free

Also no line breaks are possible

Thanks

[dmwwebartisan]

@Tjinnie 

Please share your store URL and screenshot.

Thanks!

[Tjinnie]

Hi,

Thanks for your reply. The store is not online yet.

This is the screenshot.

[dmwwebartisan]

@Tjinnie 

Please share your preview URL !

Thanks!

[Tjinnie]

https://ce2kf5q1ue3jdftg-56939184337.shopifypreview.com

[dmwwebartisan]

@Tjinnie 

add this code 

<ul>
<li>Allergy Free</li>
<li>Toxic/Chemicals Free</li>
<li>Latex Free</li>
  </ul>

[Tjinnie]

Where do i add this code? 

Thanks

[Tjinnie]

I cant add html in text bit of grid section, because it will just show the text in plain

[dmwwebartisan]

@Tjinnie 

Please share your theme zip file .

[Tjinnie]

I have the empire theme. Which code can i add for the bullet point list for the grid section in the theme.sccs?

[dmwwebartisan]

@Tjinnie 

add code section file not theme.scss.liquid file .

[Tjinnie]

What do you mean? in the dynamic-promo-grid.liquid file?

[dmwwebartisan]

yes edit this file 

[Tjinnie]

ok, what code do i add to make bullet points in that file?

Thanks

[Tjinnie]

this is the code:

<script type="application/pxs-animation-mapping+json">
{
"blocks": [".promo-block"],
"elements": [
".promo-block--header",
".promo-block--text",
".promo-block--button"
]
}
</script>

<section class="promo-grid--container">
{% if section.settings.title != blank %}
<h2 class="home-section--title">
{{ section.settings.title | escape }}
</h2>
{% endif %}

{%- capture classes -%}
home-section--content
promo-grid--height-{{ section.settings.section_height }}
{%- endcapture -%}

<div class="{{ classes | strip_newlines }}">
{% if section.blocks.size > 0 %}
<div class="promo-grid--inner promo-grid__columns--{{ section.settings.section_columns }}">
{% for block in section.blocks %}
{%
render 'promo-block',
block: block,
text_alignment: section.settings.text_alignment,
index: forloop.index,
background_position: block.settings.background_position
%}
{% endfor %}
</div>
{% endif %}
</div>

{%
render 'promo-block-background',
blocks: section.blocks
%}
</section>

{% schema %}
{
"name": "Grid",
"class": "promo-grid--section",
"max_blocks": 20,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Grid"
},
{
"id": "section_height",
"type": "select",
"label": "Image height",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "natural",
"label": "Natural"
}
],
"default": "small"
},
{
"id": "section_columns",
"type": "range",
"label": "Number of columns",
"min": 1,
"max": 4,
"step": 1,
"default": 2
},
{
"id": "text_alignment",
"type": "select",
"label": "Text alignment",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top-center",
"label": "Top center"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "center-left",
"label": "Center left"
},
{
"value": "center-center",
"label": "Center center"
},
{
"value": "center-right",
"label": "Center right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom-center",
"label": "Bottom center"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
],
"default": "top-left"
}
],
"blocks": [
{
"type": "promotion",
"name": "Promotional item",
"settings": [
{
"id": "image",
"type": "image_picker",
"label": "Image"
},
{
"type": "select",
"id": "background_position",
"label": "Background position",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top-center",
"label": "Top center"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "center-left",
"label": "Center left"
},
{
"value": "center-center",
"label": "Center center"
},
{
"value": "center-right",
"label": "Center right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom-center",
"label": "Bottom center"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
],
"default": "center-center"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Grid"
},
{
"type": "textarea",
"id": "text",
"label": "Text",
"default": "Use this section to welcome customers to your store, say a bit about your brand, or share news."
},
{
"type": "color",
"id": "color",
"label": "Text color",
"default": "#4d4d4d"
},
{
"type": "url",
"id": "block_link",
"label": "Link"
},
{
"type": "text",
"id": "button_text",
"label": "Button text"
},
{
"id": "button_style",
"type": "select",
"label": "Button style",
"options": [
{
"value": "primary",
"label": "Primary"
},
{
"value": "secondary",
"label": "Secondary"
}
],
"default": "primary"
},
{
"type": "header",
"content": "Overlay"
},
{
"id": "show_overlay",
"type": "checkbox",
"label": "Show overlay"
},
{
"id": "background",
"type": "color",
"label": "Color"
},
{
"id": "opacity",
"type": "range",
"label": "Opacity",
"min": 1,
"max": 100,
"step": 1,
"unit": "%",
"default": 50
}
]
}
],
"presets": [
{
"name": "Grid",
"category": "Image",
"blocks": [
{
"type": "promotion"
},
{
"type": "promotion"
},
{
"type": "promotion"
},
{
"type": "promotion"
}
]
}
]
}

{% endschema %}

[dmwwebartisan]

@Tjinnie 

please send your Snippets/promo-block.liquid file code .

Thanks!

[Tjinnie]

What code should i add in the promo-block file then.

{% assign additional_classes = additional_classes | default: blank %}

{% assign has_link = false %}
{% if block.settings.block_link != blank %}
{% assign has_link = true %}
{% endif %}

{%- capture classes -%}
promo-block
{% if block.settings.image != blank %}promo-block--image{% else %}promo-block--placeholder{% endif %}
promo-block--{{ block.id }}
promo-block--index-{{ index }}
promo-block--{{ background_position }}
{% if maintain_aspect_ratio %}promo-mosaic--maintain-aspect-ratio{% endif %}
{{ additional_classes | strip_newlines }}
{%- endcapture -%}

{% style %}
.promo-block--{{ block.id }}.promo-block--top-center {
background-position: center top;
}

.promo-block--{{ block.id }}.promo-block--top-left {
background-position: left top;
}

.promo-block--{{ block.id }}.promo-block--top-right {
background-position: right top;
}

.promo-block--{{ block.id }}.promo-block--center-center {
background-position: center center;
}

.promo-block--{{ block.id }}.promo-block--center-left {
background-position: left center;
}

.promo-block--{{ block.id }}.promo-block--center-right {
background-position: right center;
}

.promo-block--{{ block.id }}.promo-block--bottom-center {
background-position: center bottom;
}

.promo-block--{{ block.id }}.promo-block--bottom-left {
background-position: left bottom;
}

.promo-block--{{ block.id }}.promo-block--bottom-right {
background-position: right bottom;
}
{% endstyle %}

<{% if block.settings.title != blank and block.settings.text != blank %}article{% else %}div{% endif %}
class="{{ classes | replace: ' ', ' ' | strip_newlines }} {% if block.settings.image == blank %}onboarding-image{% endif %}"
{{ block.shopify_attributes }}
{% if block.settings.image %}
{%
render 'rimg'
img: block.settings.image,
background: true,
lazy: true,
size: '1350x1350'
%}
{% endif %}
>
{% if block.settings.image %}
{%
render 'rimg'
img: block.settings.image,
lazy: true,
canvas: true,
class: 'promo-block--background',
size: '1350x1350'
%}
{% endif %}

{%- capture wrapper_classes -%}
promo-block--content
promo-block--content-align-{{ text_alignment }}
{% unless maintain_aspect_ratio %}promo-grid--maintain-aspect-ratio{% endunless %}
{% unless compress_blocks %}promo-block--expanded{% endunless %}
{% unless has_link %}promo-block--unlinked{% endunless %}
{%- endcapture -%}

{% if has_link %}
<a
class="{{ wrapper_classes | replace: ' ', ' ' | strip_newlines }}"
href="{{ block.settings.block_link }}"
data-promo-block-content
>
{% else %}
<div
class="{{ wrapper_classes | replace: ' ', ' ' | strip_newlines }}"
data-promo-block-content
>
{% endif %}

<div class="promo-block--content-wrapper">
{% if block.settings.title != blank %}
<h2 class="promo-block--header">
{{ block.settings.title | escape }}
</h2>
{% endif %}

{% if block.settings.text != blank %}
<p class="promo-block--text">
{{ block.settings.text | escape }}
</p>
{% endif %}

{% if block.settings.button_text != blank and block.settings.block_link != blank %}
<span
class="button-{{ block.settings.button_style }} promo-block--button">
{{ block.settings.button_text | escape }}
</span>
{% endif %}

</div>

{% if has_link %}
</a>
{% else %}
</div>
{% endif %}
</{% if block.settings.title != blank and block.settings.text != blank %}article{% else %}div{% endif %}>

[dmwwebartisan]

@Tjinnie 

Otherwise add me as a staff member.

Thanks!