Adding Extra Rows for Promoted Links/Featured Items on Shopify Responsive Theme

Accommodating a growing business always requires a little code juggling and planning. Currently, we really like our Responsive Shopify Theme, however having only 8 featured categories presents a challenge for NiciArt as we move into 2017. To expand our line-up, we are planning on offering photography, jewelry tools and equipment, paintings, and overhauling our golf ball marker category in the coming year. The photography category will include a mix of royalty free downloadable backgrounds and images along with framed artistic landscape photos from our adventures in the Desert Southwest.

Starting with our basic layout we have 8 categories and are using the featured promotions to set up our menu:

  • Bracelets and Bangles
  • Necklace and Pendants
  • Guitar Picks and Stands
  • Men’s Accessories
  • Rings
  • Key Rings and Pet Tags
  • Toe Rings
  • Earrings

basic-categories

Initially the new categories will be invisible, but for now, I’ll show them as “Test” to ensure the coding is working correctly.

categories-new

Step 1

Find the featured-promotions in the index.liquid files and change the number of items to display from 8 to 12. For us, that means editing line 217 for i in (1…12)

index

Step 2

Find the code in the settings.scheme.json that refers to the featured-promotions

featuredpromoted

After featured item 8, simply copy, edit, and re-paste the code:

},

{

“type”: “header”,

“content”: “Promotion 9”

},

{

“type”: “checkbox”,

“id”: “feature9_enabled”,

“label”: “Enable promotion”

},

{

“type”: “image”,

“id”: “feature9.jpg”,

“label”: “Image”,

“info”: “840 x 840px recommended”,

“max-width”: 840,

“max-height”: 760

},

{

“type”: “text”,

“id”: “feature9_link”,

“label”: “Link URL (optional)”

},

{

“type”: “text”,

“id”: “feature9_title”,

“label”: “Title text (optional)”

},

{

“type”: “text”,

“id”: “feature9_description”,

“label”: “Description (optional)”

 

Step 3

Repeat the last code paste for 10…12 and don’t forget to open and close each set with:

},

{

Step 4

After adding the code for 8 to 12, then close the set with

}
]

Step 5

Now you can simply carry on with adding the next 4 promoted items to the expanded menu.

newpromotions

 

So far, we have been using Out of the Sandbox’s Responsive Theme for about 3 weeks and besides providing us with a clean modern layout featuring sections divided neatly by banners along with logical navigation options, this Responsive Theme is incredibly flexible to edit and customize. My complaint with the Shopify stock themes is they are so basic that customizing usually means starting from scratch to add functionality, whereas a quality template such as Responsive allows the user to simply add onto or modify the existing code. As much as I object to paying Shopify more than the monthly subscription fee, a custom template can definitely save hours of needless and frustrating coding.