Bullet points in text of grid section for empire theme

Store Design
1

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

2

@Tjinnie

Please share your store URL and screenshot.

Thanks!

3

Hi,

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

This is the screenshot.

Tjinnie_0-1623931867639.png
Tjinnie_0-1623931867639.png1528×520 690 KB

4

@Tjinnie

Please share your preview URL !

Thanks!

5

https://ce2kf5q1ue3jdftg-56939184337.shopifypreview.com

6

@Tjinnie

add this code


- Allergy Free

- Toxic/Chemicals Free

- Latex Free
7

Where do i add this code?

Thanks

8

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

9

@Tjinnie

Please share your theme zip file .

10

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

11

@Tjinnie

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

12

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

13

yes edit this file

14

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

Thanks

15

this is the code:

{% if section.settings.title != blank %}

{{ section.settings.title | escape }}

{% endif %}

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

{% if section.blocks.size > 0 %}
{% 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 %}
{% endif %}

{%
render ‘promo-block-background’,
blocks: section.blocks
%}

{% 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 %}

16

@Tjinnie

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

Thanks!

17

@Tjinnie

Otherwise add me as a staff member.

Thanks!

18

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 %}

{% endif %}
{% if block.settings.title != blank %}

{{ block.settings.title | escape }}

{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text | escape }}

{% endif %}

{% if block.settings.button_text != blank and block.settings.block_link != blank %}

{{ block.settings.button_text | escape }}

{% endif %}

{% if has_link %}

{% else %}

{% endif %}