The Shop page and blocks

Your website has a shop at /shop. It is built for you. You do not lay it out.

What the Shop page shows

Your plans come first, under a heading that reads Plans. Each plan is a card with its price, its bullets, and a button.

Your categories come next, under a heading that reads Categories. Each is a card that opens that category’s page. A shop with no categories skips this part.

Your products come last, under a heading that reads Products. Each one is a card with its photo, its price, and a button.

If you sell only plans, or only products, you get the one list and no heading over it.

Any plan with a yearly price gets a Monthly and a Yearly switch above the cards. Clicking it flips every price at once.

Only published products appear. Drafts never do.

The shop shows 24 products to a page, with page links at the bottom. You can change that. See How the shop looks.

The product cards

A card can carry up to two badges, such as Sold out, Coming soon, Sale, Pre-order, Only 3 left or New. A kit shows its saving, such as Save $12.

A card with a second photo shows it when a shopper rests their mouse on it. Color swatches on a card open that color. When reviews are on, the card shows its stars.

The button fits the product:

Button	When
Add to cart	A product with no choices to make.
Choose options	A product with sizes or colors. It opens the product page.
View set	A set. It opens the set’s page.
“Buy on” and a site name	A product sold on another site.

A sold out or coming soon product shows that, instead of a buy button.

One page for each thing

Every product also has a page of its own, at /shop/ and then its short web name. A candle called Maple Falls Cedar candle sits at /shop/maple-falls-cedar-candle.

That page shows:

• the photos. Click one to see it full screen. On a phone, swipe through them.
• the price. A sale shows the old price crossed out.
• the choices, such as color and size, and a Size chart link if it has one
• a Volume pricing table, if it has one
• the buy button, and any notes such as the turnaround
• the long words you typed in Description, under a Description heading
• its specs and its tags
• its reviews, when reviews are on

On a phone, the buy button stays at the bottom of the screen.

A product with a download file shows a note: “Digital download.” The buyer can download it right after checkout.

Category and tag pages

Each published category has a page at /shop/category/ and its short web name. It lists the category’s products, and those of the categories inside it. A category can have a banner across the top.

Each tag has a page at /shop/tag/ and its short web name.

Categories and tags are set up on the Products tab. See Products and Plans.

How the shop looks

Go to Plugins, then Commerce. Click the Settings tab, then Store. Find the Shop display box.

Setting	What it does	Starts at
Columns on a computer	How many cards fit across: Auto, 2, 3 or 4.	Auto
Columns on a phone	1 or 2.	1
Card photo shape	Landscape (4 ), Square or Portrait (4 ).	Landscape (4 )
Products per page	How many cards before the page links. 0 shows them all on one page.	24
Show New for (days)	How long a new product wears the New badge. 0 turns it off.	30

Trust row adds short lines with small pictures under the price on every product page. “Free shipping over $50”, for example. Click Add a line, pick an icon, and type the words. Up to four lines.

Click Save at the bottom of the tab. The shop changes right away.

The filter bar

The filter bar sits above your products. Shoppers use it to narrow the list. It is off to start with.

To turn it on, go to the Settings tab, then Store. Turn on Shop filter bar, and click Save.

The bar holds:

• one list for each of your attributes, such as Brand. See Attributes.
• one list for each product choice, such as Color
• Price, with a low and a high end
• In stock only and On sale
• Rating, when you turn on Rating in the shop filter bar
• Sort by: Featured, Newest, Price: low to high, Price: high to low, and Top rated when ratings are on

Nothing changes until the shopper clicks Apply. Clear all starts over.

A filtered page has its own web address, so a shopper can share it. Google is asked not to list filtered pages.

The cart

Cards carry a buy button. Add something and a Cart button shows at the bottom of the screen, with a count. Click it and a panel slides in, titled Your cart.

It lists each line, with buttons to add one, take one away, or Remove it. The total sits at the bottom.

When you offer free shipping over an amount, the cart says how much more to add, such as “Add $12.00 more for free shipping”.

The cart lives in the visitor’s own browser. You never see it, and you cannot do anything with it from the panel. If they type their email at checkout and leave, you may see it as a saved cart. See Orders.

A cart can hold a plan and a few products together. It cannot hold a monthly plan and a yearly plan at once. The button says “Cart is monthly” or “Cart is yearly” when somebody tries.

Put Shop in your menu

Nothing links to your shop until you add the link. Add a link to /shop to your main menu.

Go to Plugins, then Navigation. It sits in the Site Layout group. Menus walks through adding a link.

A published category can go in your menu too.

Changing the words on the Shop page

The Shop page is one of your pages. Go to Content, then Pages, and open the entry named Shop.

Blocks you add there show up above your plans and products. A welcome paragraph, or a note about delivery, works well.

With no blocks, the page shows a plain heading with the entry’s title. Once you add blocks, they are the top of the page. So start with a heading or a hero.

The entry also carries the SEO panel, which sets the title and the line of text Google shows. See What Google shows.

Save and publish the page the usual way. See Saving and publishing.

Showing plans and products on other pages

Two blocks pull from your products. You can drop either one on any page, such as your home page or a pricing page.

Adding a block covers the steps. Type / in the page, then pick the block by name.

Neither block holds a copy of anything. Change a price on the product and every block that shows it changes too.

Pricing Plans

This one shows your subscription plans, with the Monthly and Yearly switch.

Box	What it does
Headline	The big words above the plans.
Subheadline	A line under the headline.
Show	All plans, or Featured only.
Only plans tagged	One tag. Only plans with that tag show. Blank shows every plan.
Maximum plans to show	Stops the list after that many.
Billing period shown first	Monthly or Yearly.
Button label	The words on each button. Blank reads Choose plan.

Product Grid

This one shows the things bought once.

Box	What it does
Headline	The big words above the grid.
Subheadline	A line under the headline.
Show	All products, or Featured only.
Only products tagged	One tag. Only products with that tag show. Blank shows every product.
Only products in category (slug)	One category’s short web name. Only its products show.
Maximum products to show	Stops the grid after that many.
Button label	The words on each button. Blank reads Buy now.

Tags and categories are set on each product. See Products and Plans. Put a Product Grid on a page, type gifts in Only products tagged, and that page shows only your gifts.

Both blocks show nothing at all when there is nothing to show. A shop with no published plans renders no plan block. The same goes for a tag no product carries.

Sharing links

Customers can share a referral link, and affiliates share theirs. Both are your web address, then /shop?ref_code=, then a code. See Customers, credits and referrals and Affiliates.

You can also share a link that fills in one of your discount codes. See Promo links.