Your product and collection pages are the lifeblood of your ecommerce store. They're where you display your products, convey their value, and, if you're lucky, make the sale.
You'll upload and configure your products and collections in the Shopify admin, but when it comes to customizing how they display, you'll do that within the theme editor.
Your product pages are where you highlight the features and benefits of individual products. At minimum, it should contain the product title, images, description, price, and an add-to-cart (ATC) button. In Atlantic, you can customize your product pages by navigating to a product page in the theme editor and clicking on Product pages under the Sections tab.
First off, you can choose which variant style is right for your product page. In the Variant options style dropdown, select either Dropdowns or Selectable boxes.
If you make use of SKUs, you have the option to have them display for the customer by enabling Show variant SKU.
You can configure the product page to Show breadcrumbs by checking the box. Breadcrumbs are secondary navigation links that show the current location of a visitor on your website, and how they got there. It looks something like this:
Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will only affect your product pages.
Next, you can choose whether or not to Show quantity selector (it's that box where people can opt to buy 1 or 100 of your products).
You can also elect to Show email link. If enabled, this will display beneath your product images. It will say "Email us about this product" by default, but you can customize the text by navigating to Edit languages (Actions > Edit languages).
For customers to checkout with greater ease, enable Show dynamic checkout button.
To send customers straight to the cart page after adding an item, Enable cart redirection.
Want customers to share your product to their social media posts? Enable Show social sharing buttons.
Atlantic allows you to customize the images on your product pages in a few ways:
First, you can Enable image zoom by checking that option. This means that when a user hovers over a product image, a magnifying glass icon will appear and they will be able to click to get an up-close look at your product. Note that enabling this feature requires large, resolution images.
Second, you can Enable image lightbox link, which is a link that lets users view a full-size version of the image in a popup modal.
If enabled, a "View fullsize image" link will appear beneath your product image. You can customize the language in the Edit languages settings.
Third, you can select the Product thumbnail position from the dropdown menu. This option refers to the alternate views of your product that appear adjacent to the main image. You can opt to show them to the Right of main image, Below main image, or No thumbnails, display as list.
Checking Enable related products will allow customers to discover more items that are similar to the one they are currently looking at. Related products are automatically pulled from the same collection as the product in view.
Atlantic gives you the option of displaying a customized link to a fitting guide. First you create a page in the Pages admin (Online store > Pages > Add page)
You can also customize the icon from the Fitting guide icon dropdown. The choices are: Shirt, Ruler, and Info (a stylized letter "i"). The fitting guide will display beneath your product image, along with the email and full-size image links.
A Collection page displays all of the products in a given collection. You can configure your collections in your Shopify admin (more information here).
To access the theme's controls for the Collection pages, open any collection page in the right-side preview of your theme editor and a special set of settings will appear in the left sidebar, titled Collection pages.
Select whether to Show breadcrumbs by checking the box at the top. Breadcrumbs are a secondary navigation that show the current location of a visitor on your website, and how they got there. It looks like this:
Here, you'll select the number of Rows (1 to 11) and Number of products per row (2, 3, or 4).
Enable sorting allows customers to sort products in a different order than they appear by default (e.g. Featured, Price: Low to High, Price: High to Low, A-Z, Newest to Oldest, etc.).
The Enable tag filter option allows visitors to sort products by custom tags, which can be added to Product pages in your Shopify admin. You'll find them under Organization on the right side of each product admin.
You can choose to show a sidebar menu on collection pages. Simply check Enable sidebar, then choose a collection menu by clicking Select menu.
Atlantic comes with two distinct pagination styles: Standard pagination and Jump-to-page pagination. The former allows users only to click through pages in sequence (displaying as "Page 1 of 5" with "Previous" and "Next" links), while the latter allows users to jump to the page they want (displaying links to all the pages in a collection). Note that while you can set the pagination for your store in many different places, this setting applies only to the pagination of your collection pages.
Atlantic now offers a "subcollections" feature which groups collections together for improved accessibility and organization. Once this feature is set up, your Subcollections page will resemble a custom Collections list page featuring a select group of collections, each displayed as a Subcollection.
To get started, make sure your published theme is Atlantic Version 13.3.5 or higher. This feature is only accessible following this release.
Navigate to Collections (Products > Collections), then Create collection. This Collection will be the landing page for your subcollections, so the title should reflect the general theme or category of the subcollections. For this example, 'Artwork' is the title of the Collection.
Once you have added a Title, configure the Collection type to Manual. In the bottom-right corner, locate the Theme templates box to select the collection.subcollection-list template, and Save. This will only appear if Atlantic v13.3.5 or higher is in the published position in your Online store.
Before leaving this new collection's settings, scroll down to the Search engine listing preview, then select Edit website SEO.
No edits are required here, but the end of the url is needed for the next setup portion. In the URL and handle field, copy the end of the URL (the handle) to your clipboard. In this example, 'artwork' would be copied.
Next step is in the Navigation settings, so go to Online store > Navigation and select Add menu.
First off, insert the Handle (copied from the Collection's url) into the right-side field. The Title of the menu is not as important as the Handle, so the Title can be anything, but the Handle must match the Collection's url.
Once those fields are filled, start adding some menu items by selecting Add menu item. These menu items will serve as the subcollection links, so in this example the 'Prints' collection has been added as a menu item.
Add more menu items with the desired collections linked, then Save.
The final step takes place in the theme editor, so leave the Navigation settings to open Atlantic > Customize. In the right-side preview of the theme, open up the collection page assigned to the subcollection-list template (in this example 'Artwork'). Once this has loaded, the left-side settings display a Sub-collections list page Section.
In these settings the Layout options can be configured, as well as some basic Collection page options to display the Collection image and/or Breadcrumbs.
Collection list page
The Collection list page displays an index of your store's collections. To access the settings for this page, select Collections list from the theme editor's page selector dropdown. When this page has loaded, you will see a settings section in left sidebar called Collections list.
Select whether or not to Show breadcrumbs by checking the box at the top. Breadcrumbs are a secondary navigation menu that shows the current location of a visitor on your website and how they arrived there.
Note that there are multiple places where breadcrumbs can appear on your site, but checking this setting will affect only your collection listings page.