Changing the position of the sub heading in the Motion theme

Store Design
,
1

I am currently designing my website using the Motion theme (sorry it is not live yet)

In the hero slide show there is room for two lines of text

  • heading text which is big and bold
  • sub heading text which is capitalised and thin

I would like the sub heading text to appear above the heading text, instead of below it as the template has it.

How do I make this change?

2

Hello there

To change the position of the subheading text in the hero slideshow of the Motion theme, you will need to edit the theme’s code. Here are the steps to do this:

  1. From your Shopify admin panel, go to “Online Store” and then “Themes”. Find the Motion theme and click on “Actions” and then “Edit code”.
  2. In the left-hand navigation, click on “Sections” and then select “slideshow.liquid”.
  3. Look for the following code block:

css

{% if slide.subtitle != blank %}
  ## {{ slide.subtitle }}
{% endif %}
# {{ slide.title }}

This is the code that controls the positioning of the heading and subheading text in the hero slideshow.

  1. To move the subheading text above the heading text, simply swap the order of the two lines of code. Here’s what the updated code should look like:

css

{% if slide.subtitle != blank %}
  # {{ slide.subtitle }}
{% endif %}
## {{ slide.title }}
1 Like