Hi, everyone. I want to code my rich text in my shopify theme, so some part of certain text has certain colors. I tried asking chatgpt but it dont really understand anything and **bleep** my code up everythime. I want to change these sentence (and words) to this exact color - #063D60. I want to change these sentence written bellow to the exact font color:
excruciating pain in your knee and joints
natural clinical proven solution
direct support for the misalignment
correctly realign the patella and adjust the knee
Chatgpt told me to insert this into my exact code into my rich text block file in my theme files, but it doesnt really work. Pls any coder here would love for you to help me out because i want it to look good and everything but all this code dont make no sense
<span style="color:#063D60">excruciating pain in your knee and joints</span>
<span style="color:#063D60">natural clinical proven solution</span>
<span style="color:#063D60">direct support for the misalignment</span>
<span style="color:#063D60">correctly realign patella and adjust the knee</span>
This is my code so u can look for yourself and detect and implement it
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-rich-text.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}</noscript>
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.color-scheme-{{ section.id }}.color-custom {
--color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
--gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
--color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
--color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
--color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
--color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
}
{%- endstyle -%}
<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
<div class="rich-text content-container color-{{ section.settings.color_scheme }} color-scheme-{{ section.id }} gradient{% if section.settings.full_width %} rich-text--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
<div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
<div class="rich-text__blocks {{ section.settings.content_alignment }}">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading | replace: 'p>', 'span>' }}
</h2>
{%- when 'caption' -%}
<p
class="rich-text__caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.caption | escape }}
</p>
{%- when 'text' -%}
<div class="rich-text__text rte" {{ block.shopify_attributes }}>
{{ block.settings.text }}
</div>
{%- when 'button' -%}
<div
class="rich-text__buttons{% if block.settings.button_label != blank and block.settings.button_label_2 != blank %} rich-text__buttons--multiple{% endif %}"
{{ block.shopify_attributes }}
>
{%- if block.settings.button_label != blank -%}
<a
{% if block.settings.button_link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link }}"
{% endif %}
class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_2 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.rich-text.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
}
],
"default": "center",
"label": "t:sections.rich-text.settings.desktop_content_position.label",
"info": "t:sections.rich-text.settings.desktop_content_position.info"
},
{
"type": "select",
"id": "content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.rich-text.settings.content_alignment.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
},
{
"value": "custom",
"label": "Custom"
},
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "checkbox",
"id": "full_width",
"default": true,
"label": "t:sections.rich-text.settings.full_width.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 52
},
{
"type": "header",
"content": "Custom color scheme",
"info": "Applied if Color scheme setting is set to Custom."
},
{
"type": "color",
"id": "custom_colors_background",
"default": "#FFFFFF",
"label": "Background color"
},
{
"type": "color_background",
"id": "custom_gradient_background",
"label": "Gradient background",
"info": "If added, replaces Background color when applicable."
},
{
"type": "color",
"id": "custom_colors_text",
"default": "#2E2A39",
"label": "Text"
},
{
"type": "color",
"id": "custom_colors_solid_button_background",
"default": "#dd1d1d",
"label": "Solid button background"
},
{
"type": "color",
"id": "custom_colors_solid_button_text",
"default": "#ffffff",
"label": "Solid button label"
},
{
"type": "color",
"id": "custom_colors_outline_button",
"default": "#dd1d1d",
"label": "Outline button"
},
],
"blocks": [
{
"type": "heading",
"name": "t:sections.rich-text.blocks.heading.name",
"limit": 3,
"settings": [
{
"type": "richtext",
"id": "heading",
"default": "<p>Talk about your brand</p>",
"label": "t:sections.rich-text.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "caption",
"name": "t:sections.rich-text.blocks.caption.name",
"limit": 3,
"settings": [
{
"type": "text",
"id": "caption",
"default": "Add a tagline",
"label": "t:sections.rich-text.blocks.caption.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.rich-text.blocks.text.name",
"limit": 3,
"settings": [
{
"type": "richtext",
"id": "text",
"default": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.</p>",
"label": "t:sections.rich-text.blocks.text.settings.text.label"
}
]
},
{
"type": "button",
"name": "t:sections.rich-text.blocks.buttons.name",
"limit": 2,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.rich-text.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.rich-text.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.rich-text.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"default": false,
"label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"label": "t:sections.rich-text.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.rich-text.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.rich-text.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.rich-text.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
]
}
{% endschema %}
