Shopify themes, liquid, logos, and UX
Hi friends,
Would love to make my home page blog section look more ...professional. I'd like to move the header "lately at acorn & artisan" to the left in line with the blog posts. I'd also like below the lately at acorn & artisan header to have a blogs or visit the blog clickable link.
website: www.acornandartisan.com
Solved! Go to the solution
This is an accepted solution.
Hi @acornandartisan,
Sorry, there was a mistake in the CSS code, please change the code here, it will work fine
Code:
{%- 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;
display: flex;
}
.section-{{ section.id }}-padding slider-component{
width: 100%;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
@media screen and (max-width: 749px) {
.section-{{ section.id }}-padding {
flex-wrap: wrap;
}
.section-{{ section.id }}-padding .title-wrapper-with-link{
display: flex;
width: 100%;
}
}
{%- endstyle -%}
Hi @acornandartisan,
Go to Assets > base.css and paste this at the bottom of the file:
@media only screen and (min-width: 750px) {
.blog__title.h2 {
padding-left: 30px;
}
}
@media only screen and (max-width: 749px) {
.blog .title-wrapper-with-link {
justify-content: center;
}
}
Hope it helps!
Hi, that didn't seem to work. Nothing changed with it.
Hi @acornandartisan,
I checked and didn't find the code, can you add it again?
Because I tested and it works fine.
Hope it helps!
Hi, repasted it in for you. Maybe there is a miscommunication. I'd love the title to go to the left of the blog. So, it would be the title then all the blogs following to the right.
Hi @acornandartisan,
Are you wanting this?
Yes and below the "lately at acorn & artisan" I'm hoping for a link to view all blog posts!
Hi @acornandartisan,
Please send me the code of featured-blog.liquid file, I will help you to change it
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-article-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-featured-blog.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-article-card.css' | asset_url | stylesheet_tag }}</noscript>
{{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}
{%- 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;
}
}
{%- endstyle -%}
{%- liquid
assign posts_displayed = section.settings.blog.articles_count
if section.settings.post_limit <= section.settings.blog.articles_count
assign posts_exceed_limit = true
assign posts_displayed = section.settings.post_limit
endif
-%}
<display:in-line><div class="blog color-{{ section.settings.color_scheme }} gradient{% if section.settings.heading == blank %} no-heading{% endif %}">
<div class="page-width-desktop isolate{% if posts_displayed < 3 %} page-width-tablet{% endif %} section-{{ section.id }}-padding">
{%- unless section.settings.heading == blank -%}
<div class="title-wrapper-with-link{% if posts_displayed > 2 %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
<h2 class="blog__title {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
{%- if section.settings.blog != blank and section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
<a href="{{ section.settings.blog.url }}"
class="link underlined-link large-up-hide"
>
{{ 'sections.featured_blog.view_all' | t }}
</a>
{%- endif -%}
</div>
{%- endunless -%}
{%- if section.settings.blog != blank and section.settings.blog.articles_count > 0 -%}
<slider-component class="slider-mobile-gutter">
<ul id="Slider-{{ section.id }}"
class="blog__posts articles-wrapper contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--peek grid--2-col-tablet{% if section.settings.columns_desktop == 1 %} grid--full-width{% else %} grid--{{ section.settings.columns_desktop }}-col-desktop{% endif %} slider {% if posts_displayed > 2 %}slider--tablet{% else %}slider--mobile{% endif %}"
role="list"
>
{%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="blog__post grid__item article slider__slide slider__slide--full-width">
{% render 'article-card', blog: section.settings.blog, article: article, media_aspect_ratio: 1.66, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author, show_excerpt: false %}
</li>
{%- endfor -%}
</ul>
{%- if posts_exceed_limit -%}
<div class="slider-buttons no-js-hidden{% if section.settings.post_limit < 3 %} medium-hide{% endif %}{% if section.settings.post_limit < 2 %} small-hide{% endif %}">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.settings.post_limit }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
{%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
<div class="blog__view-all center small-hide medium-hide">
<a href="{{ section.settings.blog.url }}" class="blog__button button">
{{ 'sections.featured_blog.view_all' | t }}
</a>
</div>
{%- endif -%}
{%- else -%}
<div class="blog-placeholder">
<div class="placeholder media media--landscape">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "t:sections.featured-blog.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Blog posts",
"label": "t:sections.featured-blog.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"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "blog",
"id": "blog",
"label": "t:sections.featured-blog.settings.blog.label"
},
{
"type": "range",
"id": "post_limit",
"min": 2,
"max": 4,
"step": 1,
"default": 3,
"label": "t:sections.featured-blog.settings.post_limit.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 4,
"step": 1,
"default": 3,
"label": "t:sections.featured-blog.settings.columns_desktop.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"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info"
},
{
"type": "checkbox",
"id": "show_image",
"default": true,
"label": "t:sections.featured-blog.settings.show_image.label",
"info": "t:sections.featured-blog.settings.show_image.info"
},
{
"type": "checkbox",
"id": "show_date",
"default": true,
"label": "t:sections.featured-blog.settings.show_date.label"
},
{
"type": "checkbox",
"id": "show_author",
"default": false,
"label": "t:sections.featured-blog.settings.show_author.label"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-blog.settings.show_view_all.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": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.featured-blog.presets.name",
"settings": {
"blog": "News"
}
}
]
}
{% endschema %}
Hi @acornandartisan,
Please change all code:
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-article-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-featured-blog.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-article-card.css' | asset_url | stylesheet_tag }}</noscript>
{{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}
{%- 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;
display: flex;
}
.section-{{ section.id }}-padding slider-component{
width: 100%;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
flex-wrap: wrap;
}
.section-{{ section.id }}-padding .title-wrapper-with-link{
display: flex;
width: 100%;
}
}
{%- endstyle -%}
{%- liquid
assign posts_displayed = section.settings.blog.articles_count
if section.settings.post_limit <= section.settings.blog.articles_count
assign posts_exceed_limit = true
assign posts_displayed = section.settings.post_limit
endif
-%}
<display:in-line><div class="blog color-{{ section.settings.color_scheme }} gradient{% if section.settings.heading == blank %} no-heading{% endif %}">
<div class="page-width-desktop isolate{% if posts_displayed < 3 %} page-width-tablet{% endif %} section-{{ section.id }}-padding">
{%- unless section.settings.heading == blank -%}
<div class="title-wrapper-with-link{% if posts_displayed > 2 %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
<h2 class="blog__title {{ section.settings.heading_size }}" style="padding-left: 0">
<a href="{{ section.settings.blog.url }}" class="full-unstyled-link">{{ section.settings.heading | escape }}</a>
</h2>
{%- if section.settings.blog != blank and section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
<a href="{{ section.settings.blog.url }}"
class="link underlined-link large-up-hide"
>
{{ 'sections.featured_blog.view_all' | t }}
</a>
{%- endif -%}
</div>
{%- endunless -%}
{%- if section.settings.blog != blank and section.settings.blog.articles_count > 0 -%}
<slider-component class="slider-mobile-gutter">
<ul id="Slider-{{ section.id }}"
class="blog__posts articles-wrapper contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--peek grid--2-col-tablet{% if section.settings.columns_desktop == 1 %} grid--full-width{% else %} grid--{{ section.settings.columns_desktop }}-col-desktop{% endif %} slider {% if posts_displayed > 2 %}slider--tablet{% else %}slider--mobile{% endif %}"
role="list"
>
{%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="blog__post grid__item article slider__slide slider__slide--full-width">
{% render 'article-card', blog: section.settings.blog, article: article, media_aspect_ratio: 1.66, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author, show_excerpt: false %}
</li>
{%- endfor -%}
</ul>
{%- if posts_exceed_limit -%}
<div class="slider-buttons no-js-hidden{% if section.settings.post_limit < 3 %} medium-hide{% endif %}{% if section.settings.post_limit < 2 %} small-hide{% endif %}">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.settings.post_limit }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
{%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
<div class="blog__view-all center small-hide medium-hide">
<a href="{{ section.settings.blog.url }}" class="blog__button button">
{{ 'sections.featured_blog.view_all' | t }}
</a>
</div>
{%- endif -%}
{%- else -%}
<div class="blog-placeholder">
<div class="placeholder media media--landscape">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "t:sections.featured-blog.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Blog posts",
"label": "t:sections.featured-blog.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"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "blog",
"id": "blog",
"label": "t:sections.featured-blog.settings.blog.label"
},
{
"type": "range",
"id": "post_limit",
"min": 2,
"max": 4,
"step": 1,
"default": 3,
"label": "t:sections.featured-blog.settings.post_limit.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 4,
"step": 1,
"default": 3,
"label": "t:sections.featured-blog.settings.columns_desktop.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"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info"
},
{
"type": "checkbox",
"id": "show_image",
"default": true,
"label": "t:sections.featured-blog.settings.show_image.label",
"info": "t:sections.featured-blog.settings.show_image.info"
},
{
"type": "checkbox",
"id": "show_date",
"default": true,
"label": "t:sections.featured-blog.settings.show_date.label"
},
{
"type": "checkbox",
"id": "show_author",
"default": false,
"label": "t:sections.featured-blog.settings.show_author.label"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-blog.settings.show_view_all.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": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.featured-blog.presets.name",
"settings": {
"blog": "News"
}
}
]
}
{% endschema %}
Hope it helps!
Code has been changed; however, the page does not appear any different.
This is an accepted solution.
Hi @acornandartisan,
Sorry, there was a mistake in the CSS code, please change the code here, it will work fine
Code:
{%- 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;
display: flex;
}
.section-{{ section.id }}-padding slider-component{
width: 100%;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
@media screen and (max-width: 749px) {
.section-{{ section.id }}-padding {
flex-wrap: wrap;
}
.section-{{ section.id }}-padding .title-wrapper-with-link{
display: flex;
width: 100%;
}
}
{%- endstyle -%}
Thank you for your help!!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024