Can I show custom section in two pages ?

Solved

Can I show custom section in two pages ?

RahmaaN
Shopify Partner
11 0 0

Hello Team,
I am not able to show in two pages my custom section I have 16 sections on my page  I want to display the first page 8 section and 2nd page 8 section 

RahmaaN_0-1724645798610.png

 

Accepted Solution (1)

niraj_patel
Shopify Partner
2378 514 511

This is an accepted solution.

Hello @RahmaaN 

To display 16 sections across two pages on your Shopify store—8 sections on the first page and 8 on the second page—you'll need to manage this either by creating two different templates or by conditionally rendering sections based on the page.

Option 1: Creating Two Different Templates

  1. Create a New Template:

    • Go to Online Store > Themes > Edit Code.
    • In the Templates folder, create a new template. You might name it something like page.custom2.liquid (for the second page).
  2. Assign Sections to Each Template:

    • For the first template (e.g., page.custom1.liquid), include the first 8 sections.
    • For the second template (e.g., page.custom2.liquid), include the next 8 sections.
  3. Assign the Template to Pages:

    • Create two pages in Shopify admin (e.g., Page 1 and Page 2).
    • Assign the first template (custom1) to the first page.
    • Assign the second template (custom2) to the second page.

Option 2: Conditionally Rendering Sections Based on the Page

  1. Identify Pages:

    • Use Liquid to identify the current page by its handle or URL.
  2. Modify the Code:

    • Go to Online Store > Themes > Edit Code.
    • In the template where you want to conditionally render sections (e.g., page.liquid or index.liquid), use Liquid to check for the page handle.
  3. Code Example:

    • Example Liquid code to display the first 8 sections on one page and the next 8 on another:
      liquid
      {% if page.handle == 'page-1-handle' %} <!-- Include first 8 sections --> {% section 'section1' %} {% section 'section2' %} {% section 'section3' %} {% section 'section4' %} {% section 'section5' %} {% section 'section6' %} {% section 'section7' %} {% section 'section8' %} {% elsif page.handle == 'page-2-handle' %} <!-- Include next 8 sections --> {% section 'section9' %} {% section 'section10' %} {% section 'section11' %} {% section 'section12' %} {% section 'section13' %} {% section 'section14' %} {% section 'section15' %} {% section 'section16' %} {% endif %}

Option 3: Using Shopify Sections Everywhere (for Online Store 2.0 themes)

If you’re using an Online Store 2.0 theme, like Dawn, you can easily add sections to pages through the theme editor:

  1. Create Two Pages:

    • In the Shopify admin, create two pages.
  2. Customize Pages Separately:

    • Go to Online Store > Themes > Customize.
    • Choose the page you want to customize from the dropdown.
    • Add the first 8 sections to Page 1 and the next 8 sections to Page 2.

This approach allows you to manage sections visually without directly editing code.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 3 (3)

niraj_patel
Shopify Partner
2378 514 511

This is an accepted solution.

Hello @RahmaaN 

To display 16 sections across two pages on your Shopify store—8 sections on the first page and 8 on the second page—you'll need to manage this either by creating two different templates or by conditionally rendering sections based on the page.

Option 1: Creating Two Different Templates

  1. Create a New Template:

    • Go to Online Store > Themes > Edit Code.
    • In the Templates folder, create a new template. You might name it something like page.custom2.liquid (for the second page).
  2. Assign Sections to Each Template:

    • For the first template (e.g., page.custom1.liquid), include the first 8 sections.
    • For the second template (e.g., page.custom2.liquid), include the next 8 sections.
  3. Assign the Template to Pages:

    • Create two pages in Shopify admin (e.g., Page 1 and Page 2).
    • Assign the first template (custom1) to the first page.
    • Assign the second template (custom2) to the second page.

Option 2: Conditionally Rendering Sections Based on the Page

  1. Identify Pages:

    • Use Liquid to identify the current page by its handle or URL.
  2. Modify the Code:

    • Go to Online Store > Themes > Edit Code.
    • In the template where you want to conditionally render sections (e.g., page.liquid or index.liquid), use Liquid to check for the page handle.
  3. Code Example:

    • Example Liquid code to display the first 8 sections on one page and the next 8 on another:
      liquid
      {% if page.handle == 'page-1-handle' %} <!-- Include first 8 sections --> {% section 'section1' %} {% section 'section2' %} {% section 'section3' %} {% section 'section4' %} {% section 'section5' %} {% section 'section6' %} {% section 'section7' %} {% section 'section8' %} {% elsif page.handle == 'page-2-handle' %} <!-- Include next 8 sections --> {% section 'section9' %} {% section 'section10' %} {% section 'section11' %} {% section 'section12' %} {% section 'section13' %} {% section 'section14' %} {% section 'section15' %} {% section 'section16' %} {% endif %}

Option 3: Using Shopify Sections Everywhere (for Online Store 2.0 themes)

If you’re using an Online Store 2.0 theme, like Dawn, you can easily add sections to pages through the theme editor:

  1. Create Two Pages:

    • In the Shopify admin, create two pages.
  2. Customize Pages Separately:

    • Go to Online Store > Themes > Customize.
    • Choose the page you want to customize from the dropdown.
    • Add the first 8 sections to Page 1 and the next 8 sections to Page 2.

This approach allows you to manage sections visually without directly editing code.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
RahmaaN
Shopify Partner
11 0 0

Hello @niraj_patel 
Thanks for your suggestion i want to show using the Previous and Next buttons is it possible?

emmaoli3
Tourist
3 0 0

It seems you're trying to divide your 16 custom sections into two pages. This is a common requirement for larger Shopify stores.

Solution:

  • Create Two New Pages
  • Add Custom Sections to Pages
  • Link the Pages