Shopify themes, liquid, logos, and UX
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:
But i can only get this:
• Allergy Free • Toxic/Chemicals Free •Latex Free
Also no line breaks are possible
Thanks
Please share your store URL and screenshot.
Thanks!
Hi,
Thanks for your reply. The store is not online yet.
This is the screenshot.
Please share your preview URL !
Thanks!
add this code
<ul>
<li>Allergy Free</li>
<li>Toxic/Chemicals Free</li>
<li>Latex Free</li>
</ul>
Where do i add this code?
Thanks
I cant add html in text bit of grid section, because it will just show the text in plain
Please share your theme zip file .
I have the empire theme. Which code can i add for the bullet point list for the grid section in the theme.sccs?
add code section file not theme.scss.liquid file .
What do you mean? in the dynamic-promo-grid.liquid file?
yes edit this file
ok, what code do i add to make bullet points in that file?
Thanks
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 %}
please send your Snippets/promo-block.liquid file code .
Thanks!
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 %}>
Otherwise add me as a staff member.
Thanks!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024