Why isn't my custom CSS rendering for my new page template?

lel2009 · December 18, 2021, 12:30am

Hi there,

My store uses custom code and I’m trying to add another template for a new page.

I created a new template:


	{% section 'page-wholesale' %}
	{% section 'founders' %}
	{% section 'employees' %}
	{% section 'featured-article' %}
	{% section 'press' %}

and then created the page-wholesale section (the other sections stay the same)


	

		
![Coterie-Snowflake-00012.jpg?v=1638470055|1920x1263](upload://2YYYo4Cxeof4CmQ4SzeL7ZNnoNt.jpeg)

	

	
		# {{ section.settings.header }}
		

{{ section.settings.text }}

	

{% schema %}
	{
    "name": "wholesale Page",
    "class": "section-page-wholesale page-wholesale__inner",
    "settings": [
    	{
    		"type": "image_picker",
    		"id": "image",
    		"label": "Image of Founders together"
    	},
      {
        "type": "text",
        "id": "header",
        "label": "Header",
        "default": "Our mission is simple: More good times."
      },
      {
        "type": "textarea",
        "id": "text",
        "label": "Text",
        "default": "bla bla."
      }
    ]
  }
{% endschema %}

and then created the css file

@media (min-width: 768px) {
  .page-wholesale__hero,
  .page-wholesale__social-mission {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50vw 50vw;
    grid-template-columns: 50vw 50vw;
    -ms-grid-rows: auto;
    grid-template-rows: auto; }
  .page-wholesale__hero > *:nth-child(1), .page-wholesale__social-mission > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .page-wholesale__hero > *:nth-child(2), .page-wholesale__social-mission > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2; } }

.page-wholesale__imagex {
  background-origin: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 100%; }

@media (min-width: 768px) {
  .page-wholesale__image--social-mission {
    height: auto; }
    .page-wholesale__image--social-mission img {
      display: none; } }

@media (min-width: 768px) {
  .page-wholesale__image--mobile {
    display: none; } }

.page-wholesale__text-wrapper {
  padding: 40px 45px 65px;
  background-color: var(--color-new-coterie-red); }
  @media (min-width: 768px) {
    .page-wholesale__text-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .page-wholesale__text-wrapper h1,
      .page-wholesale__text-wrapper p {
        width: 371px; } }

@media (min-width: 768px) {
  .page-wholesale__text-wrapper--social-mission {
    padding: 70px 45px 65px; } }

.page-wholesale__header {
  color: var(--color-white);
  font: 300 36px Domaine Display Regular;
  letter-spacing: 1px;
  margin: 0;
  text-align: center; }

.page-wholesale__header--founder {
  color: var(--color-dark-slate);
  font: 300 36px Domaine Display Regular;
  letter-spacing: 1px;
  text-align: center; }

.page-wholesale__header--social-mission {
  display: none; }
  @media (min-width: 768px) {
    .page-wholesale__header--social-mission {
      display: block;
      font: 900 36px/1.44 Avenir;
      letter-spacing: 4px;
      margin: 0 0 -11px;
      width: 405px !important; } }

.page-wholesale__copy {
  margin: 25px 0 0;
  font: 300 15px Avenir;
  color: var(--color-white);
  text-align: left; }

@media (min-width: 768px) {
  .page-wholesale__copy--social-mission,
  .page-wholesale__title {
    width: 405px !important; } }

.page-wholesale__title {
  font: 300 14px/1.71 Avenir;
  letter-spacing: 0.9px;
  margin: 0 0 14px;
  text-transform: uppercase; }

.page-wholesale__link {
  all: unset;
  border-bottom: 1px solid;
  cursor: pointer;
  display: block;
  margin: 40px 0 10px;
  padding: 0 0 4.8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; }

.press {
  background-color: var(--color-dark-teal);
  padding: 50px 25px 60px; }
  @media (min-width: 768px) {
    .press {
      padding: 0 80px; } }

.press__inner {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column; }
  @media (min-width: 768px) {
    .press__inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      min-height: 190px; } }

.press__header {
  color: {{ settings.color_accent }};
  font: 300 24px Domaine Display Regular;
  letter-spacing: 1px;
  margin: 0 0 30px;
  text-align: center;
  display: block;
  text-transform: uppercase; }
  @media (min-width: 768px) {
    .press__header {
      margin: 30px 0 15px; } }

.press__logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  margin-bottom: 15px; }
  @media (min-width: 768px) {
    .press__logos {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; } }

.press__block {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: .5;
      -ms-flex: .5 0 50%;
          flex: .5 0 50%;
  margin: 10px auto;
  padding: 0 20px; }
  @media (min-width: 768px) {
    .press__block {
      -webkit-box-flex: 0;
          -ms-flex: 0 auto;
              flex: 0 auto;
      margin: 0 37.5px;
      padding: 0; } }

.press__image {
  display: inline-block;
  max-width: 100%; }

/*! Flickity v2.1.2
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative; }

.flickity-enabled:focus {
  outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%; }

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default; }

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab; }

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing; }

/*-------------------------------
Default prev/next buttons
-------------------------------*/
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }

.flickity-prev-next-button.previous {
  left: 10px; }

.flickity-prev-next-button.next {
  right: 10px; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px; }

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px; }

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%; }

/*-------------------------------
Dots
-------------------------------*/
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 0px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.flickity-rtl .flickity-page-dots {
  direction: rtl; }

.flickity-page-dots .dot {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(107, 107, 107, 0.8);
  background-color: white; }

.flickity-page-dots .dot:hover,
.flickity-page-dots .dot.is-selected {
  background-color: rgba(107, 107, 107, 0.8); }

/*-------------------------------
Arrows
-------------------------------*/
.flickity__arrow {
  all: unset;
  text-decoration: none;
  display: block;
  width: 30px;
  height: 30px;
  margin: -15px 0 0;
  position: absolute;
  top: 50%;
  z-index: var(--z-index-priority-content);
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .flickity__arrow:hover {
    opacity: .5; }
  .flickity__arrow svg {
    -webkit-filter: drop-shadow(0px 1px 1px {{ settings.color_body }});
            filter: drop-shadow(0px 1px 1px {{ settings.color_body }}); }
    .flickity__arrow svg g {
      stroke: {{ settings.color_accent }}; }

.flickity__arrow--prev {
  left: 30px; }

.flickity__arrow--next {
  right: 30px;
  text-align: right;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }

/*-------------------------------
Hidden Nav UI
-------------------------------*/
.is-hiding-flickity-nav .flickity__arrows,
.is-hiding-flickity-nav .flickity-page-dots {
  display: none; }

.section-employees {
  background: blue;
  background: {{ settings.color_accent }};
  color: white;
  overflow: hidden;
  position: relative; }

.employees__top {
  margin-top: var(--gutter);
  text-align: center; }

.employees__slideshow {
  margin-bottom: var(--gutter);
  min-height: 50vw; }

.employees__slide {
  display: inline-block;
  padding: 0 var(--gutter); }

.employees__slide img {
  display: block;
  width: 50vw; }

.employees__slide-copy {
  margin: 2em 0 3em;
  text-align: center; }

.section-employees .flickity__arrow {
  top: 42%; }

.section-employees .flickity__arrow--prev {
  left: calc(25vw - 30px); }

.section-employees .flickity__arrow--next {
  right: calc(25vw - 30px); }

.page-wholesale__founders {
  background-color: var(--color-background-grey);
  color: var(--color-white);
  padding: 50px 0 75px;
  text-align: center; }

.page-wholesale__blurb {
  margin: 19px 0 0;
  font: 300 15px Avenir;
  color: var(--color-body-copy-grey);
  text-align: center; }

@media (min-width: 767px) {
  .page-wholesale__founders-photos {
    display: -ms-grid;
    display: grid;
    grid-column-gap: 170px;
    -ms-grid-columns: 160px 170px 160px;
    grid-template-columns: 160px 160px;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: auto;
    max-width: 489px; }
  .page-wholesale__founders-photos > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .page-wholesale__founders-photos > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3; } }

.page-wholesale__image-block {
  display: -ms-grid;
  display: grid;
  margin: 50px 0 0; }

.page-wholesale__founder-image {
  background-origin: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: auto;
  width: 160px; }
  .page-wholesale__founder-image img {
    display: block;
    border-radius: 50%;
    width: 100%; }

.page-wholesale__founder-name {
  font: 300 24px/1.29 Avenir;
  letter-spacing: normal;
  margin: 25px 0 0;
  color: var(--color-dark-slate); }

@media (min-width: 768px) {
  .featured-article {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50vw 50vw;
    grid-template-columns: 50vw 50vw;
    -ms-grid-rows: auto;
    grid-template-rows: auto; }
  .featured-article > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .featured-article > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2; } }

.featured-article__image {
  background-origin: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 100%; }

@media (min-width: 768px) {
  .featured-article__image {
    height: auto; } }

@media (min-width: 768px) {
  .featured-article__image--mobile {
    display: none; } }

.featured-article__text-wrapper {
  padding: 40px 45px 65px;
  background-color: var(--color-darker-teal); }
  @media (min-width: 768px) {
    .featured-article__text-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      padding: 70px 45px 65px; } }

.featured-article__text-wrapper-inner {
  width: 371px; }
  .featured-article__text-wrapper-inner p {
    color: var(--color-white);
    text-align: left; }

.featured-article__header {
  color: var(--color-background-grey);
  font: 300 36px Domaine Display Regular;
  letter-spacing: 1px;
  margin: 0;
  text-align: center; }
  @media (min-width: 768px) {
    .featured-article__header {
      display: block; } }

.featured-article__copy {
  font: 300 15px Avenir;
  color: var(--color-white);
  text-align: left; }

.featured-article__founders {
  background-color: {{ settings.color_accent }};
  color: #fff;
  padding: 50px 0 75px;
  text-align: center; }

.featured-article__blurb {
  margin: 19px 0 0; }

@media (min-width: 767px) {
  .featured-article__founders-photos {
    display: -ms-grid;
    display: grid;
    grid-column-gap: 170px;
    -ms-grid-columns: 160px 170px 160px;
    grid-template-columns: 160px 160px;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: auto;
    max-width: 489px; }
  .featured-article__founders-photos > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .featured-article__founders-photos > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3; } }

.featured-article__title {
  font: 300 14px/1.71 Avenir;
  letter-spacing: 0.9px;
  margin: 0 0 1em;
  text-transform: uppercase; }

.featured-article__link {
  color: var(--color-white);
  all: unset;
  border-bottom: 1px solid;
  cursor: pointer;
  display: block;
  margin: 40px auto 10px;
  padding: 0 0 4.8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; }

however the css is not showing up. I can make changes to the first two pieces of code and it will show up so I dont think it is a caching issue. Let me know if you have any ideas!

made4Uo · January 1, 2022, 4:08am

Hi,

How are you adding the css file? There are several ways to do it. In your section file, add a css code by using tag.

.this-css { display: none}

or

{% stylesheet %}

.this-css { display: none}
{% endstylesheet %}

Topic		Replies	Views
Trouble adding dynamic sections to custom page Store Design	1	52	December 6, 2020
How to change css on specific custom page Store Design css	2	155	January 16, 2021
How can I apply page specific CSS, JS & HTML without affecting other pages? Technical Q&A css	4	39	April 2, 2021
Section is rendered without css after adding in theme designer Store Design	0	3	November 19, 2021
Why isn't my custom CSS applying in my custom section? Store Design	2	30	November 4, 2022

Why isn't my custom CSS rendering for my new page template?

Related topics