Wordpress Module Guide

Below is a guide to all the WordPress modules that can be used on your Shopify site. WordPress manages Brand Marketing Blog Posts, Landing Pages (campaigns), Hybrid Collections (wordpress modules on top of a traditional Shopify collection page, see Louie Lopez Collection as an example), Store pages, Ambassadors, and the Blog Main Page (/blogs/truetothis).

 

Internal Linking

When sending a post to more than one region/Shopify site, you need to be mindful of your internal linking, and you must use “relative url paths” (everything after the domain extension, for example, https://www.volcom.com/blogs/campaigns/farm-to-yarn, the relative url path is /blogs/campaigns/farm-to-yarn) when linking to other posts, collections and product. If the regions/sites you are trying to send the post to do not all have the each post, collection or product with the exact same relative url path, then you will need to clone the post and update/remove your links accordingly.

PDF: WordPress Blog Post & Landing Page Cloning Guide

 

Image and size specs for all modules

Please use the following guide when cropping images for your posts in WordPress. It’s it very important to follow these closely so that your posts appear as you intend them and so that the page loads fast.

When saving an image out of Photoshop, select Save for Web and save at “High quality 60”, and make your file-name descriptive of the what is going on in the photo (ex. alec-majerus-skateboarding-in-london.jpg), this way the Alt text is automatically created for each photo uploaded.

Before uploading, please use the software Image Optin to further reduce the image size (set Jpeg quality to 70% and PNG/GIF to 80%), you can drag all the photos for the post in at once and they will be reduced usually by another 40%.

3-Up External module

Header (not required)

Heading

Sub Heading

This where the description goes. You can see button below, 'On Image' still not working, button should display on image

Heading

Sub Heading

Don't mix and match your button sizes

Heading

Sub Heading

You can see button below, 'On Image' still not working, button should display on image

Heading

Sub Heading

Heading, Sub Heading and Description are all optional. Main link (image is linked in addition to the buttons) is only required field.

In the above 3-up External section, on mobile by default it displays a single pod per row. If you are using an even numbered of Pods and wish them to display 2 per row, paste the following code in Text tab of a Copy Formatting module directly below the 3-Up External, and update the Number in the () of nth-last-child to the total number of the Pods in the module… in this example, it’s 4.

<style>@media only screen and (max-width: 767px) {.Pods {display: flex !important; padding-left:15px;}.rte .Pod {padding-right:15px;}.Pods .Pod__content ul {margin: 0;}.Pods .Pod:first-child:nth-last-child(4), .Pods .Pod:first-child:nth-last-child(4)~.Pod {flex-basis: 50% !important; max-width: 50% !important;}}</style>

Heading 4

is probably the largest you want to go here

Heading 5

or

Heading 6

can be used to as a subtitle

Heading 4

is probably the largest you want to go here

Heading 5

or

Heading 6

can be used to as a subtitle

If you want to a button to this text area, use the following code:

<p style="text-align: center;"><a class="Button Button--on-image Button--normal" style="text-decoration: none;" href="#">Button Text</a></p>

Button Text

If you want two buttons use this code:

<div class="Banner__buttons"><div class="Banner__button"><a class="Button Button--on-image" href="#">Shop Mens</a></div><div class="Banner__button"><a class="Button Button--on-image" href="#">Shop Boys</a></div></div><style>.Banner__buttons {text-align:center;} .Banner__button:not(:first-child:last-child) {width: 45%;} .rte a {text-decoration:none !important;} @media only screen and (max-width: 767px){.Banner__button:not(:first-child) {display:block !important;}}</style>

If you want to a button to this text area, use the following code:

<p style="text-align: center;"><a class="Button Button--on-image Button--normal" style="text-decoration: none;" href="#">Button Text</a></p>

Button Text

If you want two buttons use this code:

<div class="Banner__buttons"><div class="Banner__button"><a class="Button Button--on-image" href="#">Shop Mens</a></div><div class="Banner__button"><a class="Button Button--on-image" href="#">Shop Boys</a></div></div><style>.Banner__buttons {text-align:center;} .Banner__button:not(:first-child:last-child) {width: 45%;} .rte a {text-decoration:none !important;} @media only screen and (max-width: 767px){.Banner__button:not(:first-child) {display:block !important;}}</style>

Do not use single product handle field below, there are currently some bugs with it that affect the formatting of the rest of the post.

The Custom Buttons should be only used to link to other Blog Posts, Campaign Landing Pages or Collection pages, otherwise if you want to link to Products, use the built in product tagging features.

Do not use single product handle field below, there are currently some bugs with it that affect the formatting of the rest of the post.

The Custom Buttons should be only used to link to other Blog Posts, Campaign Landing Pages or Collection pages, otherwise if you want to link to Products, use the built in product tagging features.

Copy formatting module (header 4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna bold text. Leo urna molestie at elementum eu, italic text.

This is an example of a blockquote. Like pull copy but font size stays the same.

Indenting a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Adipiscing commodo elit at imperdiet dui accumsan sit amet. Mauris pharetra et ultrices neque ornare aenean euismod elementum.

  • Bulleted list item
  • Bulleted list item
  • Bulleted list item
    1. Numbered list item indented
    2. Numbered list item indented
    3. Numbered list item indented
Preheading, a/k/a Eyebrow copy (not required)

This is the Heading (not required)

Link to more (not required)

Hero Banner

'Custom Heading' replaces the Header, and can include html code, which the 'Header' can not.

This is a the subheading goes

This is the ‘Description’, there is currently a Bug where the text will only display in the color ‘White’ even when you update the settings to be Dark Text. Once fixed we will notify you and update this guide.

Embed iframes here, we currently only use it for Email Sign-up capture, but you could potentially embed a video to get a framing effect.

On Setting tab in post admin, note the ‘Responsive minimum height’ checkbox, checking this will make the whole module grow in height to accommodate long headers, descriptions and if like this example a youtube video embed. If left unchecked the hero banner’s height will never exceed the height you set for it (800px being maximum).

Hero Banner

Just an example of the Hero Banner with a safe zone highlighted. As the browser size grows the image zooms in to stretch the width while maintaining a maximum height of 800px.

event location name

Put the name of the event location in ‘Heading 5’ style and then the address location underneath it in ‘Paragraph’ style

Month, Day Year without abbreviations

Put date, written as Month, Day Year without abbreviations in ‘Heading 5’ style. Addition information like Timing can be placed below it in ‘Paragraph’ style

RSVP, Website or Contact

You can place additional information in this column, use an appropriate heading name in ‘Heading 5’ style and place any text or links in ‘Paragraph’ style. If linking to another page/website, you will need to add a bit of inline html styling to your link to get it to show up. <a style=”color:#fff;” href=”#”>link</a>. Make sure to use the ‘Text’ editor tab when adding html styling. Otherwise it be black and wont show up.

Preheading: Do Not Use

Team Rider Name

Country

Do not place anything in Description box. Adjust the following Module settings:

  • Text Alignment = Bottom Left
  • Overlay Style = Light Text
  • Section Animation = none
  • Content Animation = none
  • Height (desktop) = 800
  • Height (mobile) = 350
  • Uncheck text boxes
  • Heading size = H4
  • Heading style = Clip Light
  • Subheading size = H6
  • Subheading style = Clip Light
Paste your Youtube or Vimeo embed code here, make sure to paste it into the ‘Text’ tab. Also please add ?rel=0 to the end of any Youtube URLs in the iframe embed codes. This ensures that when the video is paused, the carousel of other videos to watch are Volcom videos and not random most popular in YouTube ones.

Inline image caption. You should enter a caption, if not the background paper strip still shows up. We will eventually get this fixed. In the mean time if you need use this module without a caption, you can edit using the Text tab and add the following code:<style>.RteFullCaption__description {display:none !important;"}</style> though beware that it will hide the captions anywhere else this same module is used on the page. This code only needs to be used once to hide the captions on every instance of the Inline Image module on the page.

Captions for 2-Up Inline images are managed on the image itself, click the pencil icon the edit the image to add a caption
The Primary Image setting below the images refers to which of the two images will show up first on mobile when the images are responsively stacked on top of each other

Use the Text tab and paste the embed code for the Instagram post. Embed codes for Instagram posts can be found using the desktop version of Instagram, clicking on an image and clicking on the 3 dots (…) in the lower right hand corner. Don’t use the Visual tab here, wordpress might try to format the embed code.

Use the Pull Copy module to emphasize a sentence use this module. It's great for breaking up long blocks of copy and images.

Remember to please add ?rel=0 to the end of any Youtube URLs in the iframe embed codes

Shop the Collection Carousel

Header (not required)

Shop the Collection Grid

Header (not required)

The Grid version of Shop The Collection offers more flexibility and is a good choice for when a Shopify Collection is larger and you don't want a carousel that goes on forever and also requires the post to load tons of product images. In 'Settings' use the 'Maximum Products' to choose how many products from the collection to display (there is no pagination contrary to what it says). When selecting 'Number of Products Per Row' for desktop, make sure it divides nicely with the 'Maximum Products' selected. To get specific products to show up in the first X number of slots, go into Shopify and manually reorganize the product order of the collection (this will have no impact on how the collection displays on the collection page since we Search Spring to display the products).

The following images below illustrate how to utilize the TTT Posts 3 Standard, these are used on the Blog Main Pages, but can also be used on Ambassador pages, Store pages, Landing pages, and in a regular blog post if you so desired. Instructions on how to set these up in the admin are in the caption of each image below.

Module: TTT Posts 3 Standard, variation 1:

First enter the large post on the left, then the second and third will be on the right. Adjust the aspect ratios to accommodate the sizing. Ignore the image sizes below images are automatically pulled from each post’s featured thumbnail and the text below the image is pulled from the post’s “Excerpt”.

Module: TTT Posts 3 Standard, variation 2:

Adjust ratios, choose if the left or the right will be the main one (meaning the image will be placed slightly higher in the layout as shown in the image above. Ignore the image sizes below images are automatically pulled from each post’s featured thumbnail and the text below the image is pulled from the post’s “Excerpt”.

Module: TTT Posts 3 Standard, variation 3:

.Adjust ratios as needed (5:7 is actually 3:2 in the admin). Not shown, you can have two events side by side if you wish.

For an event item:

  • Your Event post Featured Thumbnail image will need to be updated to a 3:2 portrait size instead of the standard 1170×878
  • Fill in top/bottom section for the date
  • “auto” will not crop the image
  • Event can go on left or right or both
  • If this is an event, the column will be larger
  • If both are events, they will be equal size

Module: TTT Posts 3 Standard, variation 4:

To achieve this variation, you will use two of these modules. The first large image should be placed in it’s on TTT Posts 3 Standard module by itself, select 16:9 aspect ratio. Then the next two images would be the same set up as variation 2 and selecting the right image as the main image meaning it will be placed slightly higher in the layout.

Volcom Pipe Pro Logo