Imprint is a super minimalist GeneratePress Shop Site. Designed for selling posters, prints and single image products. No sidebars, no gallery, no distractions. It however has received some custom styling with a couple of hook elements and some CSS.

Hook Element

The site is using 5 hook elements that can be found in the Dashboard > Appearance > Elements. They are:

#1 Shop Loop Info Wrap & #2 Shop Loop Info Wrap Close

These two hooks opens and closes a simple div around the Shop product title and price which allows them to be displayed inline.

#3 Single Product Next Previous

This hook adds the Next and Previous links to the single product page

#4 Social Share Shop & #5 Social Share Single Product

These two hooks are used to add the social media icons to the shop.

Custom CSS

All of the Custom CSS added to the site can be found in the Customizer > Additional CSS. The majority of it is related to the shop and single product styling. All CSS has title comments to make it easier to find.

Split Navigation

The site uses the Navigation as Header ( set in Customizer > Layout > Header ) and some simple CSS found under /— Navigation Center branding —/ and does the following:

• Center Nav Branding
• Force Menu Left
• Force Shop Cart icon right

Buttons

The Buttons have had some CSS treatment to add border radius and to create the show on hover effect for the shop. The CSS controlling this is found under:

/— Woocommerce Buttons —/

Shop Layout

There are several CSS properties that are fairly self explanatory but here is some details:

/* Staggered 3 and 4 column grid */

This simple CSS changes the vertical position of the outer two columns of the grid. It works with 3 or 4 column layouts on desktop only

/* Image border radius */

Adds a border radius to the shop product image

/* Title Price wrapper alignment */

Flex styling for title and price alignment using Hook: Shop Loop Info Wrap.

Single Product

The Single Product has several style changes and includes the custom Single Product Next Previous Links added by the Hook mentioned above. All of the styling can be found under /— Woocommerce Single Product —/. It includes:

/* Layout */

This changes the layout of the page to a single column and centre aligns the summary content.

/* Hide Magnifier until hovered */

Simply hides the light box magnifier icon until the image is hovered upon.

/* Remove border from QTY buttons */

Keeping everything minimal this CSS removes the border from the qty buttons, oh and the page navigation on the shop.

/* Constrain width of summary */

This sets a max width to our product summary to keep it within the width of the image.

/* Next Previous Buttons */

The styling required for the custom Next Previous buttons added using Hook: Single Product Next Previous

Social Icons

Adjusting the orientation of the icons on the shop page and their centre alignment on the product page. The one piece of CSS you may require to adjust is this:

.inside-wc-product-image #gp-social-share a svg {
	fill: #fff !important;
}

This overwrites the color fo the icons on the shop page.