Narrative theme

Solved
watershed2612
Tourist
7 0 3

Hi, may I ask that when I use the default function from the Narrative theme, there is one called "Slideshow". As only the heading can be texted, may I ask how can I switch column for the heading part., like the "enter" function. As my sentence is separated into a weird way. Thanks.

KetanKumar
Shopify Partner
16138 1772 5951

@watershed2612 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
watershed2612
Tourist
7 0 3

https://www.dozenaway.com/

Kindly check thanks

0 Likes
KetanKumar
Shopify Partner
16138 1772 5951

Thanks for store url 

can you please share slideshow section code so i will update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
watershed2612
Tourist
7 0 3

@KetanKumar I am not sure whether this is what you need, kindly check.

{%- if section.settings.show_overlay -%}
  <style>
    #Slideshow-{{ section.id }} .slideshow__overlay::before {
      background-color: {{ section.settings.overlay_color }};
      opacity: {{ section.settings.overlay_opacity | divided_by: 100.00 }};
    }

    #Slideshow-{{ section.id }} .slideshow__heading,
    #Slideshow-{{ section.id }} .slideshow__button-label {
      color: {{ section.settings.overlay_text }};
    }
  </style>
{%- endif -%}

{%- assign first_block = section.blocks[0] -%}

{%- comment -%}
  A centered call to action button is displayed if the corresponding setting is
  enabled or if there is just one slide with a call to action button.
{%- endcomment -%}
{%- assign show_center_cta = section.settings.center_cta -%}
{%- if section.blocks.size == 1 and first_block.settings.cta_link != blank -%}
  {%- assign show_center_cta = true -%}
{%- endif -%}

{%- if section.settings.slider_height == 'adapt' -%}
  {%- comment -%}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'home_hero_height' is set to 'adapt'.
    The aspect ratio values for the first image in the slideshow will be used
    unless it is blank, in that case a ratio of 2:1 will be used.
  {%- endcomment -%}

  {%- if first_block.type == 'video' -%}
    {%- assign min_aspect_ratio = 16 | divided_by: 9.0 -%}
  {%- elsif first_block.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    #Slideshow-{{ section.id }} {
      height: {{- wrapper_height -}}vw;
    }
  {%- endstyle -%}
{%- endif -%}

<div class="slideshow--{{ section.settings.slider_height }}{% if show_center_cta %} slideshow--center-cta{% endif %}" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  <div id="Slideshow-{{ section.id }}"
       class="slideshow"
       role="region"
       aria-describedby="slideshow-info"
       tabindex="-1"
       aria-label="slideshow">
    {%- if section.blocks.size > 0 -%}
      <ul class="slideshow__slides">

        {%- for block in section.blocks -%}
          <li class="slideshow__slide slideshow__slide--{{ block.id }}{% if forloop.first %} slideshow__slide--active{% endif %}{% if section.settings.show_overlay %} slideshow__overlay{% endif %}"
              id="Slide{{ forloop.index0 }}"
              {% unless forloop.first %}aria-hidden="true"{% endunless %}
              {{ block.shopify_attributes }}>
            {%- if block.settings.image == blank -%}
              <div class="slideshow__image slideshow__image--{{ block.id }}">
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              </div>
            {%- else -%}
              {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              <style>
                .slideshow__image--{{ block.id }} {
                  object-position: {{ block.settings.alignment }};
                  font-family: "object-fit: cover; object-position: {{ block.settings.alignment }};";
                }
              </style>

              <img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
                  src="{{ block.settings.image | img_url: '300x' }}"
                  data-src="{{ img_url }}"
                  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                  data-sizes="auto"
                  data-parent-fit="cover"
                  alt="{{ block.settings.image.alt | escape }}">
            {%- endif -%}

            {%- if block.type == 'video' and block.settings.video_url != blank -%}
              <div class="slideshow__video slideshow__video--{{ block.id }}"
                data-video-type="{{ block.settings.video_url.type }}"
                data-video-id="{{ block.settings.video_url.id }}"
                data-block-id="{{ block.id }}"></div>
            {%- endif -%}

            <div class="slideshow__text-container page-width">
              {%- if block.type == 'video' -%}
                <button class="slideshow__play-button btn btn--clear"
                        disabled
                        aria-live="polite"
                        aria-label="{{ 'sections.slider.pause' | t }}"
                        aria-pressed="false"
                        data-label-pause="{{ 'sections.slider.pause' | t }}"
                        data-label-play="{{ 'sections.slider.play' | t }}"
                        data-pause-button>
                  <span class="visually-hidden" data-play-label>{{ 'video.play' | t }}</span>
                  <span class="slideshow__play-button-icon"></span>
                  <span class="slideshow__play-button-circle"></span>
                </button>
              {%- endif -%}
              <div class="slideshow__text-content" data-animate>
                {%- if block.settings.title != blank -%}
                  <h2 class="slideshow__heading h1">
                    {{ block.settings.title | escape }}
                  </h2>
                {%- endif -%}
                {%- if show_center_cta and block.settings.cta_link != blank -%}
                  <a href="{{ block.settings.cta_link }}" class="slideshow__heading-cta btn{% if section.blocks.size == 1 and section.settings.slider_height == 'adapt' %} small--hide{% endif %}">
                    {{ block.settings.cta | escape }}
                  </a>
                {%- endif -%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>
    {%- else -%}
      <div class="slideshow__image slideshow__image--{{ block.id }}{% if section.settings.show_overlay %} slideshow__overlay{% endif %}">
        <div class="placeholder-background">
          {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      </div>
    {%- endif -%}

    {%- if section.blocks.size > 1 -%}
      <div class="slideshow__buttons critical-hide" data-count="{{ section.blocks.size }}">
        {%- for block in section.blocks -%}
          <div class="slideshow__button slideshow__button--{{ section.blocks.size }}{% if block.settings.cta_link != blank %} slideshow__button--link{% endif %}">
            <button class="slideshow__button-label text-title btn--clear">
              <span class="visually-hidden">{{ 'sections.slider.slide' | t: number: forloop.index }}</span>
              <span class="slideshow__button-label-text">{{ block.settings.button }}</span>
            </button>
            {%- unless section.settings.center_cta -%}
              {%- if block.settings.cta_link != blank -%}
                <a href="{{ block.settings.cta_link }}" class="slideshow__button-cta slideshow__button-cta--multiple medium-up--hide btn" tabindex="-1">
                  <span class="visually-hidden">{{ block.settings.cta | escape }}</span>
                  {% include 'icon-plus' %}
                </a>
              {%- else -%}
                <div class="slideshow__button-cta slideshow__button-cta--multiple medium-up--hide btn" tabindex="-1">
                  <span class="visually-hidden">{{ block.settings.cta | escape }}</span>
                  {% include 'icon-plus' %}
                </div>
              {%- endif -%}

              {%- if block.settings.cta_link != blank -%}
                <a href="{{ block.settings.cta_link }}" class="slideshow__button-cta slideshow__button-cta--desktop small--hide btn" aria-label="{{ block.settings.cta | escape }}" tabindex="-1">
                  <span class="slideshow__heading-cta-text" data-button-text="{{ block.settings.cta | escape }}" aria-hidden="true"></span>
                </a>
              {%- else -%}
                <div class="slideshow__button-cta slideshow__button-cta--desktop small--hide btn" tabindex="-1">
                  <span class="slideshow__heading-cta-text"></span>
                </div>
              {%- endif -%}
            {%- endunless -%}
          </div>
        {%- endfor -%}
      </div>

      <ul class="slideshow__navigation">
        <li>
          <button class="slideshow__navigation-item critical-hide" aria-label="{{ 'sections.slider.previous_slide' | t}}" disabled="disabled" data-slider-navigation data-slider-navigation-previous></button>
        </li>
        <li>
          <button class="slideshow__navigation-item slideshow__button-next critical-hide" aria-label="{{ 'sections.slider.next_slide' | t}}" data-slider-navigation data-slider-navigation-next></button>
        </li>
      </ul>
    {%- endif -%}
  </div>

  {%- if section.blocks.size > 1 -%}
    <ol class="slideshow__indicators">
      {%- for block in section.blocks -%}
        <li>
          <a href="#Slideshow-{{ section.id }}"
             class="slideshow__indicator{% if forloop.first %} slideshow__indicator--active{% endif %} critical-clear"
             data-slide-index="{{ forloop.index0 }}"
             data-link-no-focus>
            <span class="visually-hidden">{{ 'sections.slider.slide' | t: number: forloop.index }}</span>
          </a>
        </li>
      {%- endfor -%}
    </ol>
  {%- endif -%}
  {%- if section.settings.slider_height == 'adapt' -%}
    <div class="slideshow__text-container slideshow__text-container-mobile page-width">
      {%- if section.blocks.size == 1 and first_block.settings.cta_link != blank -%}
        <a href="{{ first_block.settings.cta_link }}" class="slideshow__button-cta-single medium-up--hide btn">
          {{ first_block.settings.cta | escape }}
        </a>
      {%- endif -%}
      {%- for block in section.blocks -%}
        <div class="slideshow__text-content slideshow__text-content-mobile" data-animate>
          {%- if block.settings.title != blank -%}
            <h2 class="slideshow__heading h1">
              {{ block.settings.title | escape }}
            </h2>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  {%- endif -%}

  <p id="slideshow-info" class="visually-hidden" aria-hidden="true">
    {{- 'sections.slider.navigation_instructions' | t -}}
  </p>
</div>

 

0 Likes
KetanKumar
Shopify Partner
16138 1772 5951

@watershed2612 

Thanks for code

i have updated the code you have a try also add custom HTML as you like

{%- if section.settings.show_overlay -%}
  <style>
    #Slideshow-{{ section.id }} .slideshow__overlay::before {
      background-color: {{ section.settings.overlay_color }};
      opacity: {{ section.settings.overlay_opacity | divided_by: 100.00 }};
    }

    #Slideshow-{{ section.id }} .slideshow__heading,
    #Slideshow-{{ section.id }} .slideshow__button-label {
      color: {{ section.settings.overlay_text }};
    }
  </style>
{%- endif -%}

{%- assign first_block = section.blocks[0] -%}

{%- comment -%}
  A centered call to action button is displayed if the corresponding setting is
  enabled or if there is just one slide with a call to action button.
{%- endcomment -%}
{%- assign show_center_cta = section.settings.center_cta -%}
{%- if section.blocks.size == 1 and first_block.settings.cta_link != blank -%}
  {%- assign show_center_cta = true -%}
{%- endif -%}

{%- if section.settings.slider_height == 'adapt' -%}
  {%- comment -%}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'home_hero_height' is set to 'adapt'.
    The aspect ratio values for the first image in the slideshow will be used
    unless it is blank, in that case a ratio of 2:1 will be used.
  {%- endcomment -%}

  {%- if first_block.type == 'video' -%}
    {%- assign min_aspect_ratio = 16 | divided_by: 9.0 -%}
  {%- elsif first_block.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    #Slideshow-{{ section.id }} {
      height: {{- wrapper_height -}}vw;
    }
  {%- endstyle -%}
{%- endif -%}

<div class="slideshow--{{ section.settings.slider_height }}{% if show_center_cta %} slideshow--center-cta{% endif %}" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  <div id="Slideshow-{{ section.id }}"
       class="slideshow"
       role="region"
       aria-describedby="slideshow-info"
       tabindex="-1"
       aria-label="slideshow">
    {%- if section.blocks.size > 0 -%}
      <ul class="slideshow__slides">

        {%- for block in section.blocks -%}
          <li class="slideshow__slide slideshow__slide--{{ block.id }}{% if forloop.first %} slideshow__slide--active{% endif %}{% if section.settings.show_overlay %} slideshow__overlay{% endif %}"
              id="Slide{{ forloop.index0 }}"
              {% unless forloop.first %}aria-hidden="true"{% endunless %}
              {{ block.shopify_attributes }}>
            {%- if block.settings.image == blank -%}
              <div class="slideshow__image slideshow__image--{{ block.id }}">
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              </div>
            {%- else -%}
              {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              <style>
                .slideshow__image--{{ block.id }} {
                  object-position: {{ block.settings.alignment }};
                  font-family: "object-fit: cover; object-position: {{ block.settings.alignment }};";
                }
              </style>

              <img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
                  src="{{ block.settings.image | img_url: '300x' }}"
                  data-src="{{ img_url }}"
                  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                  data-sizes="auto"
                  data-parent-fit="cover"
                  alt="{{ block.settings.image.alt | escape }}">
            {%- endif -%}

            {%- if block.type == 'video' and block.settings.video_url != blank -%}
              <div class="slideshow__video slideshow__video--{{ block.id }}"
                data-video-type="{{ block.settings.video_url.type }}"
                data-video-id="{{ block.settings.video_url.id }}"
                data-block-id="{{ block.id }}"></div>
            {%- endif -%}

            <div class="slideshow__text-container page-width">
              {%- if block.type == 'video' -%}
                <button class="slideshow__play-button btn btn--clear"
                        disabled
                        aria-live="polite"
                        aria-label="{{ 'sections.slider.pause' | t }}"
                        aria-pressed="false"
                        data-label-pause="{{ 'sections.slider.pause' | t }}"
                        data-label-play="{{ 'sections.slider.play' | t }}"
                        data-pause-button>
                  <span class="visually-hidden" data-play-label>{{ 'video.play' | t }}</span>
                  <span class="slideshow__play-button-icon"></span>
                  <span class="slideshow__play-button-circle"></span>
                </button>
              {%- endif -%}
              <div class="slideshow__text-content" data-animate>
                {%- if block.settings.title != blank -%}
                  <h2 class="slideshow__heading h1">
                    {{ block.settings.title }}
                  </h2>
                {%- endif -%}
                {%- if show_center_cta and block.settings.cta_link != blank -%}
                  <a href="{{ block.settings.cta_link }}" class="slideshow__heading-cta btn{% if section.blocks.size == 1 and section.settings.slider_height == 'adapt' %} small--hide{% endif %}">
                    {{ block.settings.cta }}
                  </a>
                {%- endif -%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>
    {%- else -%}
      <div class="slideshow__image slideshow__image--{{ block.id }}{% if section.settings.show_overlay %} slideshow__overlay{% endif %}">
        <div class="placeholder-background">
          {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      </div>
    {%- endif -%}

    {%- if section.blocks.size > 1 -%}
      <div class="slideshow__buttons critical-hide" data-count="{{ section.blocks.size }}">
        {%- for block in section.blocks -%}
          <div class="slideshow__button slideshow__button--{{ section.blocks.size }}{% if block.settings.cta_link != blank %} slideshow__button--link{% endif %}">
            <button class="slideshow__button-label text-title btn--clear">
              <span class="visually-hidden">{{ 'sections.slider.slide' | t: number: forloop.index }}</span>
              <span class="slideshow__button-label-text">{{ block.settings.button }}</span>
            </button>
            {%- unless section.settings.center_cta -%}
              {%- if block.settings.cta_link != blank -%}
                <a href="{{ block.settings.cta_link }}" class="slideshow__button-cta slideshow__button-cta--multiple medium-up--hide btn" tabindex="-1">
                  <span class="visually-hidden">{{ block.settings.cta | escape }}</span>
                  {% include 'icon-plus' %}
                </a>
              {%- else -%}
                <div class="slideshow__button-cta slideshow__button-cta--multiple medium-up--hide btn" tabindex="-1">
                  <span class="visually-hidden">{{ block.settings.cta | escape }}</span>
                  {% include 'icon-plus' %}
                </div>
              {%- endif -%}

              {%- if block.settings.cta_link != blank -%}
                <a href="{{ block.settings.cta_link }}" class="slideshow__button-cta slideshow__button-cta--desktop small--hide btn" aria-label="{{ block.settings.cta | escape }}" tabindex="-1">
                  <span class="slideshow__heading-cta-text" data-button-text="{{ block.settings.cta }}" aria-hidden="true"></span>
                </a>
              {%- else -%}
                <div class="slideshow__button-cta slideshow__button-cta--desktop small--hide btn" tabindex="-1">
                  <span class="slideshow__heading-cta-text"></span>
                </div>
              {%- endif -%}
            {%- endunless -%}
          </div>
        {%- endfor -%}
      </div>

      <ul class="slideshow__navigation">
        <li>
          <button class="slideshow__navigation-item critical-hide" aria-label="{{ 'sections.slider.previous_slide' | t}}" disabled="disabled" data-slider-navigation data-slider-navigation-previous></button>
        </li>
        <li>
          <button class="slideshow__navigation-item slideshow__button-next critical-hide" aria-label="{{ 'sections.slider.next_slide' | t}}" data-slider-navigation data-slider-navigation-next></button>
        </li>
      </ul>
    {%- endif -%}
  </div>

  {%- if section.blocks.size > 1 -%}
    <ol class="slideshow__indicators">
      {%- for block in section.blocks -%}
        <li>
          <a href="#Slideshow-{{ section.id }}"
             class="slideshow__indicator{% if forloop.first %} slideshow__indicator--active{% endif %} critical-clear"
             data-slide-index="{{ forloop.index0 }}"
             data-link-no-focus>
            <span class="visually-hidden">{{ 'sections.slider.slide' | t: number: forloop.index }}</span>
          </a>
        </li>
      {%- endfor -%}
    </ol>
  {%- endif -%}
  {%- if section.settings.slider_height == 'adapt' -%}
    <div class="slideshow__text-container slideshow__text-container-mobile page-width">
      {%- if section.blocks.size == 1 and first_block.settings.cta_link != blank -%}
        <a href="{{ first_block.settings.cta_link }}" class="slideshow__button-cta-single medium-up--hide btn">
          {{ first_block.settings.cta }}
        </a>
      {%- endif -%}
      {%- for block in section.blocks -%}
        <div class="slideshow__text-content slideshow__text-content-mobile" data-animate>
          {%- if block.settings.title != blank -%}
            <h2 class="slideshow__heading h1">
              {{ block.settings.title }}
            </h2>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  {%- endif -%}

  <p id="slideshow-info" class="visually-hidden" aria-hidden="true">
    {{- 'sections.slider.navigation_instructions' | t -}}
  </p>
</div>

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
watershed2612
Tourist
7 0 3

@KetanKumar 

Thanks for your reply, however, even I change the code, the page still keeps the same. Just double confirm the question is about what you can see from my webpage, after "Revive." it keeps the word "In" in the same line. But I want the word "In" start from the next line. Thanks!

0 Likes
KetanKumar
Shopify Partner
16138 1772 5951

@watershed2612 

do you need single line?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
watershed2612
Tourist
7 0 3

@KetanKumar

I would prefer double line, but the second line would be started with the word "In". As in my screen, it separates into "Relax. Refresh. Revive. In a", and then "DoZen Minutes." But I would prefer "Relax. Refresh. Revive.", and then "In a DoZen Minutes."

Thanks

KetanKumar
Shopify Partner
16138 1772 5951

@watershed2612 

do you have like this?

KetanKumar_0-1614339356328.png

 

so just user <br> tag 

like this

Relax. Refresh. Revive. <br>In a DoZen Minutes.
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing