Hello I want to make the heading on the featured collection the same size as the heading options I have defined in the theme settings. I’ll post a few pictures below to illustrate what I mean.
I would also like to make the titles of each product pink, one of my accent colours, and I was wondering if anyone could help me out with some code to sort these changes out?
Thank you in advance!
URL: https://pete-749.myshopify.com/?key=880007d2ec9f2df628bdff23bf8a2816b8cda639b321c496440005eea3ac381f
Password: filtia
yocave
January 14, 2022, 2:20pm
2
@whjarrold
Okey, maybe i can help you..
Go in to your theme CSS file , and press CTRL+F for search..
Find this classes(green) and add this code like i do
.card-information__text h5 {
line-height: calc(1 + .4 / var(--font-body-scale));
color: pink;
font-size: 26px;
}
.price__regular {
display: block;
color: pink;
font-size: 26px;
}
.
If this helps, great
@yocave
Hi Yocave thanks for your reply.
My code looks like this, where abouts would I put that code?
Thank you
{%- if settings.favicon != blank -%}
{%- endif -%}
{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
{%- endunless -%}
{% if page_description %}
{% endif %}
{% render 'meta-tags' %}
{{ content_for_header }}
{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}
{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}
:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};
--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};
--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
--color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
--color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
--payment-terms-background-color: {{ settings.colors_background_1 }};
--gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
--gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
--gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
--gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};
--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}
@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}
{{ 'base.css' | asset_url | stylesheet_tag }}
{%- unless settings.type_body_font.system? -%}
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
{%- endunless -%}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{{ "accessibility.skip_to_text" | t }}
{% section 'announcement-bar' %}
{% section 'header' %}
{% section 'footer' %}
- {{ 'accessibility.refresh_page' | t }}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
yocave
January 14, 2022, 2:43pm
4
Okay, but you must have something like this in your theme files.. theme.scss or styles.scss it must ended with css or scss.. but first try this ..
find this in the code you sent me:
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}
and insert what I sent you below
.card-information__text h5 {
line-height: calc(1 + .4 / var(--font-body-scale));
color: pink;
font-size: 26px;
}
.price__regular {
display: block;
color: pink;
font-size: 26px;
}
@yocave
Hi Yocave.
I managed to get the price to change colour using this code thank you!
.price__regular {
display: block;
color: pink;
font-size: 26px;
}
However the code to change the heading font size did not work. Do you have any other ideas?
Thank you!
yocave
January 14, 2022, 2:56pm
6
@whjarrold
Try this, add in same place
.card-information__wrapper {
line-height: calc(1 + .4 / var(--font-body-scale));
color: pink;
font-size:26px;
}
Ollie
January 14, 2022, 6:41pm
7
Hey @whjarrold .
Thanks for reaching out.
If the change in coding advised by @yocave , you can mark it as a solution to inform others that may view the thread.
Looking into the URL that you have provided, since the Dawn theme is designed and support by Shopify, we can use free design time for Shopify themes to allow our internal team to make the coding changes on your behalf.
If you are interested in musing the design time to make this change, you will need to login to your store using our Contact Us page . This will allow us to securely verify you as the store owner before discussing the changes you would like to see with a Support Advisor.
Let me know if you have any questions.
