I’m trying to recreate the accents (for lack of a better term) like the website before. Colored underscores and backgrounds.
Unfortunately, I couldn’t find any solution myself.
I appreciate your guys help.
Thank you!
Hi @swalter85 ,
CSS can add this, can you send me the site link and the location you want to add it? I will check and guide you.
Refer to the following instructions
Thank you for the reply!
Don’t think that will work as intended since I’m looking for to highlight single words only with the underscores and rectangle backgrounds.
Or am I missing something?
You are happy to check out on my site if that helps.
pw: wild
Hi @swalter85 ,
Can you send me the screenshot or the section position you want to add it? I will help you check the details
Yes that’s spot on.
Hi @swalter85 ,
Please send me the code of section-double.liquid file, I will check and guide you
I hope I’m adding this to the post in the right way.
Here it is:
{%- render 'section-double' -%}
{% schema %}
{
"name": "Image with text",
"class": "section-overlay-header",
"settings": [
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "",
"options": [
{"value": "","label": "Image left, text right"},
{"value": "is-reversed","label": "Text left, image right"}
]
},
{
"type": "select",
"id": "height",
"label": "Desktop height",
"default": "screen-height-three-quarters",
"options": [
{ "value": "image-height", "label": "Image height" },
{ "value": "screen-height-full", "label": "Full screen height"},
{ "value": "screen-height-three-quarters", "label": "3/4 of screen"},
{ "value": "screen-height-two-thirds", "label": "2/3 of screen"},
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "seven-fifty-height-hero", "label": "750px" },
{ "value": "sixty-fifty-height-hero", "label": "650px" },
{ "value": "five-fifty-height-hero", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" }
]
},
{
"type": "select",
"id": "mobile_height",
"label": "Mobile height",
"default": "screen-height-one-half--mobile",
"options": [
{ "value": "image-height--mobile", "label": "Image height" },
{ "value": "screen-height-full--mobile", "label": "Full screen height"},
{ "value": "screen-height-three-quarters--mobile", "label": "3/4 of screen"},
{ "value": "screen-height-two-thirds--mobile", "label": "2/3 of screen"},
{ "value": "screen-height-one-half--mobile", "label": "1/2 of screen"},
{ "value": "screen-height-one-third--mobile", "label": "1/3 of screen"},
{ "value": "seven-fifty-height-hero--mobile", "label": "750px" },
{ "value": "sixty-fifty-height-hero--mobile", "label": "650px" },
{ "value": "five-fifty-height-hero--mobile", "label": "550px" },
{ "value": "four-fifty-height-hero--mobile", "label": "450px" }
]
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wrapper--full",
"options": [
{"value": "wrapper--full", "label": "Full width"},
{"value": "wrapper--full-padded", "label": "Full width padded"},
{"value": "wrapper", "label": "Normal"}
]
},
{
"type": "header",
"content": "Image 1"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
},
{
"type": "header",
"content": "Image 2"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image"
},
{
"type": "header",
"content": "Images"
},
{
"type": "select",
"id": "image_width",
"label": "Image width",
"default": "one-half",
"options": [
{ "value": "one-half", "label": "50%"},
{ "value": "three-quarters", "label": "75%" }
]
},
{
"type": "header",
"content": "Text"
},
{
"type": "select",
"id": "text_alignment",
"label": "Alignment",
"default": "text-left",
"options": [
{"value": "text-left","label": "Left"},
{"value": "text-center","label": "Centered"}
]
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "checkbox",
"id": "reverse_blocks",
"label": "Reverse block placement",
"default": false
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "bg_color",
"label": "Background"
},
{
"type": "color",
"id": "color",
"label": "Text"
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "checkbox",
"id": "show_placeholder",
"label": "Show placeholder image",
"info": "Disable if using a metafield",
"default": true
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 200,
"step": 2,
"unit": "px",
"label": "Padding top",
"default": 0
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 200,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 0
}
],
"blocks": [
{
"type": "heading",
"name": "Heading",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with text"
},
{
"type": "range",
"id": "text_size",
"label": "Size",
"min": 1,
"max": 15,
"step": 1,
"default": 8
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "subheading",
"name": "Subheading",
"settings": [
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Introducing"
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 1,
"max": 15,
"step": 1,
"default": 3
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
},
{
"type": "range",
"id": "text_size",
"label": "Size",
"min": 1,
"max": 15,
"step": 1,
"default": 4
},
{
"type": "select",
"id": "text_style",
"label": "Style",
"default": "font-body",
"options": [
{"value": "font-heading", "label": "Heading"},
{"value": "font-body", "label": "Body"}
]
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "buttons",
"name": "Button",
"settings": [
{
"type": "text",
"id": "button_text",
"label": "Text",
"default": "Learn more"
},
{
"type": "url",
"id": "button_url",
"label": "Link"
},
{
"type": "select",
"id": "button_type",
"label": "Color",
"default": "btn--primary",
"options": [
{"value": "btn--primary", "label": "Primary"},
{"value": "btn--secondary", "label": "Secondary"},
{"value": "btn--white", "label": "White"},
{"value": "btn--black", "label": "Black"}
]
},
{
"type": "select",
"id": "button_size",
"label": "Size",
"default": "",
"options": [
{ "label": "Small", "value": "btn--small" },
{ "label": "Medium", "value": "" },
{ "label": "Large", "value": "btn--large" }
]
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"default": "btn--solid",
"options": [
{ "label": "Solid", "value": "btn--solid" },
{ "label": "Outline", "value": "btn--outline" },
{ "label": "Text", "value": "btn--text" }
]
},
{
"type": "checkbox",
"id": "show_arrow",
"label": "Show arrow",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "divider",
"name": "Divider",
"settings": [
{
"type": "checkbox",
"id": "show_line",
"label": "Show line",
"default": true
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 20
}
]
},
{
"name": "Accordion",
"type": "accordion",
"settings": [
{
"type": "text",
"id": "title",
"label": "Question",
"default": "Frequently asked question"
},
{
"type": "richtext",
"id": "content",
"label": "Answer",
"default": "
Share details about your shipping policies, item returns, or customer service.<\/p>"
},
{
"type": "header",
"content": "Icon"
},
{
"type": "checkbox",
"id": "show_icon",
"label": "Show icon",
"default": false
},
{
"type": "select",
"id": "icon_name",
"label": "Icon",
"default": "icon-award",
"options": [
{ "label": "Award", "value": "icon-award" },
{ "label": "Box", "value": "icon-box" },
{ "label": "Chat", "value": "icon-chat" },
{ "label": "Cloud", "value": "icon-cloud" },
{ "label": "Diameter", "value": "icon-diameter" },
{ "label": "Discount", "value": "icon-discount" },
{ "label": "Donation", "value": "icon-donation" },
{ "label": "Droplet", "value": "icon-droplet" },
{ "label": "Info", "value": "icon-info-empty" },
{ "label": "Email", "value": "icon-email" },
{ "label": "Fast shipment", "value": "icon-fast-shipment" },
{ "label": "Flare", "value": "icon-flare" },
{ "label": "Flower", "value": "icon-flower" },
{ "label": "Gift", "value": "icon-gift" },
{ "label": "Green shipment", "value": "icon-green-shipment" },
{ "label": "Heart", "value": "icon-heart" },
{ "label": "Leaf", "value": "icon-leaf" },
{ "label": "Lightning", "value": "icon-lightning" },
{ "label": "Location", "value": "icon-location" },
{ "label": "Mail", "value": "icon-mail" },
{ "label": "Notes", "value": "icon-notes" },
{ "label": "Pants", "value": "icon-pants" },
{ "label": "Peace", "value": "icon-peace" },
{ "label": "Pin", "value": "icon-pin" },
{ "label": "Planet", "value": "icon-planet" },
{ "label": "Phone", "value": "icon-phone" },
{ "label": "Recycle", "value": "icon-recycle" },
{ "label": "Ruler", "value": "icon-ruler" },
{ "label": "Shield", "value": "icon-shield" },
{ "label": "Smile", "value": "icon-smile" },
{ "label": "Star", "value": "icon-star" },
{ "label": "Tree", "value": "icon-tree" },
{ "label": "Trophy", "value": "icon-trophy" },
{ "label": "Truck", "value": "icon-truck" },
{ "label": "Vegan", "value": "icon-vegan" },
{ "label": "Wash", "value": "icon-wash" },
{ "label": "Washing machine", "value": "icon-washing-machine" }
]
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Alternative icon/image"
},
{
"type": "range",
"id": "icon_size",
"label": "Size",
"unit": "px",
"min": 20,
"max": 80,
"step": 5,
"default": 20
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color",
"default": "#545454"
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 20,
"max": 100,
"step": 5,
"unit": "%",
"label": "Width",
"default": 100
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "video",
"id": "video",
"label": "Video"
},
{
"type": "range",
"id": "video_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Width",
"default": 100
},
{
"type": "checkbox",
"id": "custom_aspect_ratio",
"label": "Set custom aspect ratio",
"default": false
},
{
"type": "range",
"id": "aspect_ratio",
"min": 0.5,
"max": 1.5,
"step": 0.1,
"unit": ":1",
"label": "Aspect ratio",
"info": "Wide to tall",
"default": 1
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product_list",
"id": "product_list",
"label": "Product list",
"limit": 2,
"info": "Choose up to 2 products"
},
{
"type": "checkbox",
"id": "show_product_card",
"label": "Show product card",
"default": true
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "header",
"content": "Collections"
},
{
"label": "Collection 1",
"id": "collection_1",
"type": "collection"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
},
{
"type": "text",
"id": "button_text_1",
"label": "Button text"
},
{
"label": "Collection 2",
"id": "collection_2",
"type": "collection"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image"
},
{
"type": "text",
"id": "button_text_2",
"label": "Button text"
},
{
"type": "checkbox",
"id": "show_product_card",
"label": "Show product card",
"default": true
},
{
"type": "header",
"content": "Button"
},
{
"type": "select",
"id": "button_type",
"label": "Color",
"default": "btn--primary",
"options": [
{"value": "btn--primary", "label": "Primary"},
{"value": "btn--secondary", "label": "Secondary"},
{"value": "btn--white", "label": "White"},
{"value": "btn--black", "label": "Black"}
]
},
{
"type": "select",
"id": "button_size",
"label": "Size",
"default": "",
"options": [
{ "label": "Small", "value": "btn--small" },
{ "label": "Medium", "value": "" },
{ "label": "Large", "value": "btn--large" }
]
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"default": "btn--solid",
"options": [
{ "label": "Solid", "value": "btn--solid" },
{ "label": "Outline", "value": "btn--outline" },
{ "label": "Text", "value": "btn--text" }
]
},
{
"type": "checkbox",
"id": "show_arrow",
"label": "Show arrow",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
},
{
"type": "code",
"name": "Custom code",
"settings": [
{
"type": "liquid",
"id": "code",
"label": "Custom code",
"default": "
Once you write some custom code, it will render right here.
"
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 16
}
]
}
],
"presets": [
{
"name": "Image with text",
"category": "Image",
"blocks": [
{
"type": "subheading"
},
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
],
"disabled_on": {
"groups": ["header", "aside", "footer"]
}
}
{% endschema %}
Hi @swalter85 ,
Please send me the code of snippets > section-double.liquid file 
Here you go 
{%- comment -%}
"enable_slider" is used for "text-slide" blocks with "Optional image" added and make the entire Image & text block a single slide.
"enable_text_slider" is used for "text-slide" blocks without "Optional image" added. Then we only create a slider for the text blocks and the images are static.
{%- endcomment -%}
{%- liquid
assign desktop_height = section.settings.height
assign mobile_height = section.settings.mobile_height
assign width = section.settings.width
assign enable_slider = false
assign enable_text_slider = false
assign text_slide_blocks = section.blocks | where: "type", "text-slide"
assign show_placeholder = section.settings.show_placeholder
assign animation_anchor = '#BrickSection--' | append: section.id
assign animation_order = 0
assign accordion_blocks = section.blocks | where: "type", "accordion"
assign bg_color = section.settings.bg_color
assign bg_color_transparent = bg_color | color_modify: 'alpha', 0
assign text_color = section.settings.color
assign autoplay = section.settings.autoplay
assign autoplay_speed = false
if autoplay
assign autoplay_speed = section.settings.autoplay_speed | times: 1000
endif
if text_slide_blocks.size > 1
assign enable_text_slider = true
for block in section.blocks
if block.settings.image
assign enable_slider = true
assign enable_text_slider = false
break
endif
endfor
endif
capture style
echo '--PT: ' | append: section.settings.padding_top | append: 'px;'
echo '--PB: ' | append: section.settings.padding_bottom | append: 'px;'
unless bg_color == 'rgba(0,0,0,0)' or bg_color == blank
echo '--bg: ' | append: bg_color | append: ';'
echo '--bg-transparent: ' | append: bg_color_transparent | append: ';'
endunless
unless text_color == 'rgba(0,0,0,0)' or text_color == blank
assign text_light = text_color | color_mix: settings.bg_color, 70
assign text_dark = text_color | color_saturate: 10 | color_darken: 15
echo '--text: ' | append: text_color | append: ';'
echo '--text-light: ' | append: text_light | append: ';'
echo '--text-dark: ' | append: text_dark | append: ';'
endunless
endcapture
assign image_1 = section.settings.image_1
assign image_2 = section.settings.image_2
assign image_width = section.settings.image_width
capture sizes
if image_1 and image_2
if image_width == 'three-quarters'
echo '(min-width: 750px) 37.5vw, 100vw'
else
echo '(min-width: 750px) 25vw, 100vw'
endif
else
if image_width == 'three-quarters'
echo '(min-width: 750px) 75vw, 100vw'
else
echo '(min-width: 750px) 50vw, 100vw'
endif
endif
endcapture
assign figure_width_class = ''
assign item_sizes_width = '50vw'
assign item_placeholder = '||number-items-placeholder||'
assign item_per_row_medium = item_placeholder
if image_width == 'three-quarters'
assign figure_width_class = ' brick__block--three-quarters'
assign item_sizes_width = '35vw'
assign item_per_row_medium = 1
endif
assign item_sizes_padding_desktop = '100px'
assign item_sizes_padding_tablet = '60px'
if settings.grid_style == 'compact'
assign item_sizes_padding_desktop = '64px'
assign item_sizes_padding_tablet = '44px'
endif
assign item_sizes_images_mobile = 'calc(100vw / ' | append: item_placeholder | append: ')'
assign item_sizes_images_tablet = '(min-width: 750px) calc(((' | append: item_sizes_width | append: ' * 90 / 100) - ' | append: item_sizes_padding_tablet | append: ') / ' | append: item_per_row_medium | append: ')'
assign item_sizes_images_desktop = '(min-width: 990px) calc(((' | append: item_sizes_width | append: ' * 84 / 100) - ' | append: item_sizes_padding_desktop | append: ') / ' | append: item_per_row_medium | append: ')'
assign item_sizes_images_widescreen = '(min-width: 1400px) calc(((' | append: item_sizes_width | append: ' * 76 / 100) - ' | append: item_sizes_padding_desktop | append: ') / ' | append: item_placeholder | append: ')'
capture item_sizes_images
echo item_sizes_images_widescreen | append: ', ' | append: item_sizes_images_desktop | append: ', ' | append: item_sizes_images_tablet | append: ', ' | append: item_sizes_images_mobile
endcapture
capture columns_style
echo '--COLUMNS-WIDESCREEN: ' | append: item_placeholder | append: ';'
echo '--COLUMNS: ' | append: item_per_row_medium | append: ';'
echo '--COLUMNS-MEDIUM: ' | append: item_per_row_medium | append: ';'
echo '--COLUMNS-SMALL: ' | append: item_placeholder | append: ';'
echo '--COLUMNS-MOBILE: ' | append: item_placeholder | append: ';'
endcapture
capture alignment
if section.settings.text_alignment == 'text-left'
echo ' align--middle-left'
else
echo ' align--middle-center'
endif
endcapture
-%}
{%- capture section_images -%}
{%- if image_1 != blank -%}
{%- render 'image-hero' image: image_1, sizes: sizes, desktop_height: desktop_height, mobile_height: mobile_height -%}
{%- endif -%}
{%- if image_2 != blank -%}
{%- render 'image-hero' image: image_2, sizes: sizes, desktop_height: desktop_height, mobile_height: mobile_height -%}
{%- endif -%}
{%- if image_1 == blank and image_2 == blank -%}
{%- render 'image-hero' sizes: sizes, desktop_height: desktop_height, mobile_height: mobile_height -%}
{%- endif -%}
{%- endcapture -%}
Hey @namphan
were you able to find a solution with the code?
Hi @swalter85 ,
Sorry for the delay.
Please go to Customize > Sections > Heading > Add text:
The Forgotten Superfoods That Big Pharma Doesn't Want You to Rediscover
Works like a charm on the headings.
Thanks a lot!
Hi @swalter85 ,
You’re welcome and happy to help you