ArtiStick Guide: Page.Sidebar Template

Using the Page.Sidebar Template

Page Setup

Page Settings

Sidebar

Layout

Advanced

Heading Divider

Using the Page.Sidebar Template 

In the ArtiStick theme, there is a page.sidebar template that includes the ability to add a sidebar and a couple of settings in the theme editor for the layout and custom CSS.

In order to use the 'page.sidebar template, the theme will need to be published! The templates from which you can select are limited to the templates available in your currently published theme.

If you are unable to currently publish your theme and would still like to set up the ‘page.sidebar template, we have instructions on how to access unpublished templates here.

Page Setup

When adding a Page in your Shopify Admin (Online Store > Pages), the page.sidebar template is named page.sidebar and can be selected under Template > Template Suffix:

Once you've added your page content, you can head into the Theme Editor (Customize) > Select your Page.sidebar from the drop-down page selector. Your theme editor on the left will then update with the page settings. Here you can configure the Sidebar and adjust the 'Layout' and 'Advanced' settings if you'd like!

Page Settings

Sidebar

The sidebar is configured by adding content blocks in the theme editor. The sidebar includes options to add the following: featured promotion, menu, content page, search form, and text.

The content in the sidebar can be a great way to highlight other links or information that relate to the main page content that you want your customers to be aware of and explore while they're on this page! 

In addition to adding the content, you can also include custom CSS for the sidebar specifically under the advanced settings! 

In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!

The 'Custom CSS' field is where you can add in the actual CSS code.

More information about using the Advanced CSS feature.

The example below features a page about cocktails. The content blocks added to the sidebar are a text block introducing the page, followed by two menu blocks: bar/cocktail products and recipe links. In the advanced CSS settings, a border-right has been added to the sidebar.

Layout

In the layout settings, you can adjust the width of the page content, and the top/bottom spacing.

If you'd like your page content to spread full-width, you can select 'wide.' If you'd like your page content to be contained/not full-width, you can select 'standard.'

You can adjust the space between your page content and the header/footer with the top spacing and bottom spacing settings.

Advanced

In the advanced settings, you can add in your own CSS classes and custom CSS.

More information about using the Advanced CSS feature.

In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!

The 'Custom CSS' field is where you can add in the actual CSS code.

Heading Divider

The page title will display a divider underneath. The settings for this divider can be configured in Theme Settings > Elements > Heading Dividers.

The 'animation' setting will determine how the divider 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom in.'

The 'style' for the heading divider can be either short horizontal, long horizontal or vertical:

The 'width' for the heading divider can be set here as well. You can choose from 0 - 5px. If you select 0, the divider line will not appear.