Atlantic's products and collections

Product pages

Collection pages

Collection list


Product pages

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. 

Product page in Atlantic Chic demo

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.

General

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.

Images

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. 

View fullsize image lightbox

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 imageBelow 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.

Related products feature on product page

Fitting guide

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: ShirtRuler, and Info (a stylized letter "i"). The fitting guide will display beneath your product image, along with the email and full-size image links.

Additional links below product image

Collection pages

Collection page in Atlantic Chic demo

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.

General

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:

Breadcrumb links on Collection page

Product layout

Here, you'll select the number of Rows (1 to 11) and Number of products per row (2, 3, or 4).

Filtering

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

Optional sidebar on Collection page

Pagination

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.

Collection list page

Collections list in Atlantic Chic demo

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.

General

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.


Back to top ↑

Next article:

Atlantic's blog and article pages